From 2264786c1c9792cab02d7fdbc07d4a1378271628 Mon Sep 17 00:00:00 2001 From: Vincent Fiduccia Date: Thu, 29 Aug 2019 15:11:22 -0700 Subject: [PATCH] ButtonGroup, CodeMirror keyMap --- assets/styles/global/_button.scss | 13 +++--- components/AsyncButton.vue | 2 +- components/ButtonGroup.vue | 74 +++++++++++++++++++++++++++++++ components/CodeMirror.vue | 7 ++- components/ResourceTable.vue | 25 ++++++----- components/ResourceYaml.vue | 5 ++- layouts/default.vue | 14 +----- pages/c/_resource/index.vue | 2 +- pages/ns/_resource/index.vue | 2 +- pages/prefs.vue | 63 +++++++++++++++++++++----- plugins/norman/index.js | 7 ++- store/prefs.js | 33 +++++++++++--- 12 files changed, 191 insertions(+), 56 deletions(-) create mode 100644 components/ButtonGroup.vue diff --git a/assets/styles/global/_button.scss b/assets/styles/global/_button.scss index 01f4171a50..43d0543133 100644 --- a/assets/styles/global/_button.scss +++ b/assets/styles/global/_button.scss @@ -97,27 +97,26 @@ fieldset[disabled] .btn { vertical-align: middle; text-align: center; padding: 0; - overflow: hidden; background: var(--input-bg); border-radius: $border-radius; - border: 4px solid transparent; - .btn, .btn-xs, .btn-sm, .btn-lg { + .btn { position: relative; display: inline-block; + border-radius: 0; &.active { @extend .bg-primary; } &:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-top-left-radius: $border-radius; + border-bottom-left-radius: $border-radius; } &:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-top-right-radius: $border-radius; + border-bottom-right-radius: $border-radius; } } } diff --git a/components/AsyncButton.vue b/components/AsyncButton.vue index 105e10cc2a..811b126df1 100644 --- a/components/AsyncButton.vue +++ b/components/AsyncButton.vue @@ -157,7 +157,7 @@ export default { timerDone() { if ( this.phase === SUCCESS || this.phase === ERROR ) { - this.state = ACTION; + this.phase = ACTION; } } } diff --git a/components/ButtonGroup.vue b/components/ButtonGroup.vue new file mode 100644 index 0000000000..ba3c8d49a5 --- /dev/null +++ b/components/ButtonGroup.vue @@ -0,0 +1,74 @@ + + + diff --git a/components/CodeMirror.vue b/components/CodeMirror.vue index 80de093cad..feb7432bdc 100644 --- a/components/CodeMirror.vue +++ b/components/CodeMirror.vue @@ -1,5 +1,6 @@ @@ -13,13 +41,24 @@ export default {

Preferences

-
- - -
+
Theme
+ + +
YAML Editor Mode
+
+ + diff --git a/plugins/norman/index.js b/plugins/norman/index.js index ddae804b52..939b3ea32e 100644 --- a/plugins/norman/index.js +++ b/plugins/norman/index.js @@ -91,7 +91,12 @@ export default (config = {}) => { } else if ( obj && typeof obj === 'object' ) { if ( obj.__rehydrate ) { const type = obj.type; - const map = state.types[type].map; + const cache = state.types[type]; + + if ( !cache ) { + return obj; + } + const map = cache.map; const keyField = keyFieldFor(type); const entry = map.get(obj[keyField]); diff --git a/store/prefs.js b/store/prefs.js index c560aa92e6..2824826440 100644 --- a/store/prefs.js +++ b/store/prefs.js @@ -2,9 +2,13 @@ import Vue from 'vue'; const all = {}; -export const create = function(name, def, parseJSON = false) { +export const create = function(name, def, opt = {}) { + const parseJSON = opt.parseJSON === true; + const options = opt.options; + all[name] = { def, + options, parseJSON }; @@ -24,12 +28,14 @@ export const mapPref = function(name) { }; // -------------------- +const parseJSON = true; // Shortcut for setting it below -export const NAMESPACES = create('ns', [], true); -export const EXPANDED_GROUPS = create('open_groups', [], true); +export const NAMESPACES = create('ns', [], { parseJSON }); +export const EXPANDED_GROUPS = create('open_groups', [], { parseJSON }); export const GROUP_RESOURCES = create('group_by', 'namespace'); -export const DIFF = create('diff', 'unified'); -export const THEME = create('theme', 'dark'); +export const DIFF = create('diff', 'unified', { options: ['unified', 'split'] }); +export const THEME = create('theme', 'dark', { options: ['light', 'dark'] }); +export const KEYMAP = create('keymap', 'sublime', { options: ['sublime', 'emacs', 'vim'] }); export const ROWS_PER_PAGE = create('per_page', 100); export const DATE_FORMAT = create('date_format', 'ddd, MMM D, Y'); export const TIME_FORMAT = create('time_format', 'h:mm:ss a'); @@ -66,6 +72,20 @@ export const getters = { const def = JSON.parse(JSON.stringify(entry.def)); return def; + }, + + options: state => (key) => { + const entry = all[key]; + + if (!entry) { + throw new Error(`Unknown preference: ${ key }`); + } + + if (!entry.options) { + throw new Error(`Preference does not have options: ${ key }`); + } + + return entry.options.slice(); } }; @@ -84,7 +104,8 @@ export const actions = { loadCookies({ commit }) { for (const key in all) { const entry = all[key]; - const opt = { parseJSON: entry.parseJSON !== false }; + + const opt = { parseJSON: entry.parseJSON === true }; const val = this.$cookies.get(`${ prefix }${ key }`, opt);