diff --git a/client/components/admin-dev.vue b/client/components/admin-dev.vue
index 1bd73675..187418f1 100644
--- a/client/components/admin-dev.vue
+++ b/client/components/admin-dev.vue
@@ -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');
diff --git a/client/components/admin-groups.vue b/client/components/admin-groups.vue
index c03bf0da..348b37f6 100644
--- a/client/components/admin-groups.vue
+++ b/client/components/admin-groups.vue
@@ -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
diff --git a/client/components/admin-logging.vue b/client/components/admin-logging.vue
index 6c5378c6..c6994626 100644
--- a/client/components/admin-logging.vue
+++ b/client/components/admin-logging.vue
@@ -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()
diff --git a/client/scss/app.scss b/client/scss/app.scss
index 48607c48..5cc7994d 100644
--- a/client/scss/app.scss
+++ b/client/scss/app.scss
@@ -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';
diff --git a/client/scss/components/_dialog.scss b/client/scss/components/_dialog.scss
new file mode 100644
index 00000000..031fc5cf
--- /dev/null
+++ b/client/scss/components/_dialog.scss
@@ -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;
+}
diff --git a/client/scss/components/navigator.scss b/client/scss/components/navigator.scss
deleted file mode 100644
index 3280b142..00000000
--- a/client/scss/components/navigator.scss
+++ /dev/null
@@ -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');
- }
- }
- }
- }
-}
\ No newline at end of file