fix: graphiql UI fix
This commit is contained in:
NGPixel
parent
3f0adc5daf
commit
cb253f7bfa
@ -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');
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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()
|
||||
|
||||
@ -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
Normal file
11
client/scss/components/_dialog.scss
Normal 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;
|
||||
}
|
||||
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user