msb-public
/
wiki
mirror of https://github.com/requarks/wiki
1
0
Code Issues Projects Releases Wiki Activity

fix: graphiql UI fix

Browse Source
pull/621/head
NGPixel 7 years ago
parent 3f0adc5daf
commit cb253f7bfa
6 changed files with 35 additions and 305 deletions
Show Stats Download Patch File Download Diff File

19
client/components/admin-dev.vue
Unescape View File

@ -17,6 +17,7 @@
</template>
<script>
import _ from 'lodash'
import React from 'react'
import ReactDOM from 'react-dom'
import GraphiQL from 'graphiql'
@ -48,6 +49,8 @@ const fetcher = (qry, respType) => {
})
}
let graphiQLInstance
export default {
data() {
return {
@ -68,8 +71,15 @@ export default {
renderGraphiQL() {
ReactDOM.render(
React.createElement(GraphiQL, {
fetcher: qry => fetcher(qry, 'text'),
query: null,
ref(el) { graphiQLInstance = el },
async fetcher(qry) {
let resp = await fetcher(qry, 'text')
_.delay(() => {
graphiQLInstance.resultComponent.viewer.refresh()
}, 500)
return resp
},
query: '',
response: null,
variables: null,
operationName: null,
@ -77,6 +87,9 @@ export default {
}),
document.getElementById('graphiql')
)
graphiQLInstance.queryEditorComponent.editor.refresh()
graphiQLInstance.variableEditorComponent.editor.refresh()
graphiQLInstance.state.variableEditorOpen = true
},
renderVoyager() {
ReactDOM.render(
@ -94,7 +107,7 @@ export default {
<style lang='scss'>
#graphiql {
height: calc(100vh - 250px);
height: calc(100vh - 230px);
.topBar {
background-color: mc('grey', '200');

2
client/components/admin-groups.vue
Unescape View File

@ -10,7 +10,7 @@
v-icon(left) add
| New Group
v-card
v-card-title.headline.grey--text.text--darken-2 New Group
.dialog-header.is-short New Group
v-card-text
v-text-field(v-model='newGroupName', label='Group Name', autofocus, counter='255')
v-card-actions

14
client/components/admin-logging.vue
Unescape View File

@ -58,8 +58,6 @@
<script>
import _ from 'lodash'
/* global CONSTANTS */
export default {
data() {
return {
@ -73,12 +71,12 @@ export default {
return _.filter(this.services, 'isEnabled')
}
},
apollo: {
services: {
query: CONSTANTS.GRAPH.AUTHENTICATION.QUERY_PROVIDERS,
update: (data) => data.authentication.providers
}
},
// apollo: {
// services: {
// query: CONSTANTS.GRAPH.AUTHENTICATION.QUERY_PROVIDERS,
// update: (data) => data.authentication.providers
// }
// },
methods: {
async refresh() {
await this.$apollo.queries.services.refetch()

2
client/scss/app.scss
Unescape View File

@ -7,7 +7,7 @@
// @import "../libs/animate/animate";
@import 'components/markdown-content';
@import 'components/navigator';
@import 'components/dialog';
// @import '../libs/twemoji/twemoji-awesome';
@import '../libs/prism/prism.css';

11
client/scss/components/_dialog.scss
Unescape View File

@ -0,0 +1,11 @@
.dialog-header {
background-color: mc('blue', '700');
background: radial-gradient(ellipse at top, mc('blue', '500'), transparent),
radial-gradient(ellipse at bottom, mc('blue', '800'), transparent);
height: 60px;
color: #FFF;
display: flex;
align-items: center;
padding: 0 1rem;
font-size: 1.2rem;
}

292
client/scss/components/navigator.scss
Unescape View File

@ -1,292 +0,0 @@
.navigator {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
&-bar {
display: flex;
justify-content: flex-start;
align-items: stretch;
background-color: rgba(mc('grey', '900'), .7);
}
&-fab {
&-button {
width: 50px;
height: 50px;
background-color: #FFF;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all .4s ease;
svg use {
transition: all .4s ease;
}
&:hover {
svg use {
color: mc('blue', '500');
fill: mc('blue', '500');
}
}
}
}
&-title {
background-image: linear-gradient(to bottom right, mc('blue', '500') 0%, mc('blue', '700') 50%, mc('blue', '900') 100%);
background-size: 200%;
background-repeat: no-repeat;
padding: 0 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all .4s ease;
cursor: pointer;
&:hover {
background-position-y: -50px;
}
h1 {
font-size: 1.2rem;
color: #FFF;
font-weight: 500;
}
}
&-subtitle {
background-repeat: no-repeat;
background-position-x: -100vw;
color: #FFF;
flex: 1 1 auto;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 1rem;
transition: background-position-x 1s ease;
&.is-error {
background-image: linear-gradient(to right, rgba(mc('red', '500'), 1), rgba(mc('red', '500'), 0));
}
&.is-warning {
background-image: linear-gradient(to right, rgba(mc('orange', '500'), 1), rgba(mc('orange', '500'), 0));
}
&.is-success {
background-image: linear-gradient(to right, rgba(mc('green', '500'), 1), rgba(mc('green', '500'), 0));
}
&.is-info {
background-image: linear-gradient(to right, rgba(mc('blue', '500'), 1), rgba(mc('blue', '500'), 0));
}
&.is-active {
background-position-x: 0;
}
svg {
margin-right: .5rem;
animation: flash 1s linear 1s;
&.navigator-subtitle-icon {
transition: all 1s ease;
&-enter-active, &-leave-active {
transform: scale(1);
width: 24px;
margin-right: .5rem;
}
&-enter, &-leave-to {
transform: scale(0);
width: 0;
margin-right: 0;
}
}
use {
color: #FFF;
fill: #FFF;
stroke: #FFF;
transition: all .4s ease;
}
}
h2 {
font-size: 1rem;
font-weight: 400;
}
}
&-action {
display: flex;
justify-content: flex-end;
align-items: stretch;
position: relative;
&-item {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
cursor: pointer;
transition: all .4s ease;
svg use {
color: #FFF;
fill: #FFF;
transition: all .4s ease;
}
&:hover {
svg use {
color: mc('blue', '500');
fill: mc('blue', '500');
}
}
&.is-active {
background-color: #FFF;
svg use {
color: mc('grey', '500');
fill: mc('grey', '500');
}
}
&-dropdown {
position: absolute;
right: 0;
top: 100%;
width: 250px;
border-radius: 0 0 0 5px;
transition: all .4s ease;
transform-origin: top right;
&-enter-active, &-leave-active {
transform: scale(1);
}
&-enter, &-leave-to {
transform: scale(.1, 0);
}
li {
background-color: #FFF;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 .8rem 0 1rem;
& + li {
border-top: 1px solid mc('grey', '100');
}
&:hover {
background-color: mc('grey', '100');
}
label {
font-size: .8rem;
font-weight: 600;
color: mc('blue', '800');
text-transform: uppercase;
}
&:last-child {
border-radius: 0 0 0 5px;
}
}
}
}
}
&-sd {
width: 350px;
background-color: #FFF;
border-radius: 0 0 5px 0;
transition: all .4s ease;
transform-origin: top left;
&-enter-active, &-leave-active {
transform: scale(1);
}
&-enter, &-leave-to {
transform: scale(.1, 0);
}
&-actions {
background-color: mc('blue-grey', '50');
display: flex;
a {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
transition: all .4s ease;
&.is-active {
background-color: #FFF;
}
&:hover {
background-color: #FFF;
}
}
}
&-search {
position: relative;
input {
display: block;
width: 100%;
padding: 0 3rem 0 1rem;
height: 40px;
border: 0;
font-size: .9rem;
color: mc('grey', '700');
position: relative;
&:focus {
outline: none;
border: 0;
}
}
&::after {
content: " ";
@include spinner(mc('blue', '200'),0.5s,18px);
position: absolute;
display: block;
top: 11px;
right: 1rem;
}
}
&-footer {
background-color: mc('blue-grey', '100');
border-top: 5px solid mc('blue-grey', '200');
border-radius: 0 0 5px 0;
display: flex;
justify-content: center;
a {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
transition: all .4s ease;
&:hover {
background-color: mc('blue-grey', '200');
}
}
}
}
}
Write Preview
Loading…
Cancel
Save