From aba369391c133b55e99edea12e588cb3c240c2cd Mon Sep 17 00:00:00 2001 From: Vincent Fiduccia Date: Thu, 24 Sep 2020 03:03:41 -0700 Subject: [PATCH] Remove table stripes, add border edges, fix row-actions with table-actions=false --- components/SortableTable/index.vue | 32 ++++++++++----- components/SortableTable/selection.js | 5 +-- components/Tabbed/index.vue | 9 +++-- models/cluster.js | 55 ------------------------- models/management.cattle.io.cluster.js | 56 +++++++++++++++++++++++++- 5 files changed, 83 insertions(+), 74 deletions(-) delete mode 100644 models/cluster.js diff --git a/components/SortableTable/index.vue b/components/SortableTable/index.vue index 77c3780ddd5..e6ec624802e 100644 --- a/components/SortableTable/index.vue +++ b/components/SortableTable/index.vue @@ -531,7 +531,7 @@ export default { - + @@ -665,6 +665,10 @@ $spacing: 10px; &.row-check { padding-top: 16px; + + LABEL { + margin-right: 1px; /* to make up for the edge border */ + } } } @@ -675,25 +679,25 @@ $spacing: 10px; tr { border-bottom: 1px solid var(--sortable-table-top-divider); + background-color: var(--body-bg); &.main-row + .sub-row { border-bottom: 0; } - &:nth-of-type(even) { - background-color: var(--body-bg); - } - - &.sub-row:nth-of-type(even) { - background-color: initial; + &:last-of-type { + border-bottom: 0; } + } - &.sub-row:nth-of-type(odd) { - background-color: var(--body-bg); + td { + &:first-of-type { + border-left: 1px solid var(--sortable-table-accent-bg); } &:last-of-type { - border-bottom: 0; + /* Not sure why 2 but one doesn't show up.. */ + border-right: 2px solid var(--sortable-table-accent-bg); } } @@ -715,11 +719,13 @@ $spacing: 10px; content: ""; display: block; height: 20px; - background-color: var(--sortable-table-accent-bg); + background-color: transparent; } } tr.group-row { + background-color: initial; + &:first-child { border-bottom: 0; } @@ -730,6 +736,10 @@ $spacing: 10px; td { padding: 0; + + &:first-of-type { + border-left: 1px solid var(--sortable-table-accent-bg); + } } .group-tab { diff --git a/components/SortableTable/selection.js b/components/SortableTable/selection.js index 68a97e486f3..3066669d1f8 100644 --- a/components/SortableTable/selection.js +++ b/components/SortableTable/selection.js @@ -132,10 +132,9 @@ export default { return; } - const check = tgtRow.find('label.selection-checkbox'); - const nodeId = check.data('node-id'); + const nodeId = tgtRow.data('node-id'); - if ( !nodeId || !check || !check.length || check[0].disabled ) { + if ( !nodeId ) { return; } diff --git a/components/Tabbed/index.vue b/components/Tabbed/index.vue index e1ffc516f61..e94571e0bd9 100644 --- a/components/Tabbed/index.vue +++ b/components/Tabbed/index.vue @@ -307,9 +307,9 @@ export default { outline:none; & .tab.active { - outline-color: var(--outline); - outline-style: solid; - outline-width: var(--outline-width); + outline-color: var(--outline); + outline-style: solid; + outline-width: var(--outline-width); } } @@ -331,6 +331,8 @@ export default { &.active { background-color: var(--tabbed-container-bg); + // box-shadow: 0 0 20px var(--shadow); + // clip-path: polygon(-100% -100%, 100% -100%, 200% 100%, -100% 100%); } } } @@ -338,6 +340,7 @@ export default { .tab-container { padding: 20px; background-color: var(--tabbed-container-bg); + // box-shadow: 0 0 20px var(--shadow); } .side-tabs{ diff --git a/models/cluster.js b/models/cluster.js deleted file mode 100644 index 2773d066e7f..00000000000 --- a/models/cluster.js +++ /dev/null @@ -1,55 +0,0 @@ -import { insertAt } from '@/utils/array'; - -export default { - - _availableActions() { - const out = this._standardActions; - - insertAt(out, 0, { - action: 'openShell', - label: 'Kubectl Shell', - icon: 'icon icon-terminal', - enabled: !!this.links.shell, - }); - - return out; - }, - - openShell() { - return () => { - this.$dispatch('wm/open', { - id: `kubectl-${ this.id }`, - label: this.$rootGetters['i18n/t']('wm.kubectlShell.title', { name: this.nameDisplay }), - icon: 'terminal', - component: 'KubectlShell', - attrs: { - cluster: this, - pod: {} - } - }, { root: true }); - }; - }, - - isReady() { - return this.hasCondition('Ready'); - }, - - configName() { - const allKeys = Object.keys(this.spec); - const configKey = allKeys.find( kee => kee.includes('Config')); - - return configKey; - }, - - kubernetesVersion() { - if ( this?.status?.version?.gitVersion ) { - return this.status.version.gitVersion; - } else { - return this.$rootGetters['i18n/t']('generic.unknown'); - } - }, - - canDelete() { - return this.hasLink('remove') && !this?.spec?.internal; - }, -}; diff --git a/models/management.cattle.io.cluster.js b/models/management.cattle.io.cluster.js index e5b4f1e36bf..2773d066e7f 100644 --- a/models/management.cattle.io.cluster.js +++ b/models/management.cattle.io.cluster.js @@ -1,3 +1,55 @@ -import Cluster from './cluster'; +import { insertAt } from '@/utils/array'; -export default Cluster; +export default { + + _availableActions() { + const out = this._standardActions; + + insertAt(out, 0, { + action: 'openShell', + label: 'Kubectl Shell', + icon: 'icon icon-terminal', + enabled: !!this.links.shell, + }); + + return out; + }, + + openShell() { + return () => { + this.$dispatch('wm/open', { + id: `kubectl-${ this.id }`, + label: this.$rootGetters['i18n/t']('wm.kubectlShell.title', { name: this.nameDisplay }), + icon: 'terminal', + component: 'KubectlShell', + attrs: { + cluster: this, + pod: {} + } + }, { root: true }); + }; + }, + + isReady() { + return this.hasCondition('Ready'); + }, + + configName() { + const allKeys = Object.keys(this.spec); + const configKey = allKeys.find( kee => kee.includes('Config')); + + return configKey; + }, + + kubernetesVersion() { + if ( this?.status?.version?.gitVersion ) { + return this.status.version.gitVersion; + } else { + return this.$rootGetters['i18n/t']('generic.unknown'); + } + }, + + canDelete() { + return this.hasLink('remove') && !this?.spec?.internal; + }, +};