Container logs & shell fixes

rancher · Oct 3, 2020 · 55145cd · 55145cd
1 parent e6ade88
commit 55145cd
Show file tree

Hide file tree

Showing 11 changed files with 59 additions and 48 deletions.
diff --git a/assets/styles/base/_variables.scss b/assets/styles/base/_variables.scss
@@ -3,8 +3,6 @@ $min-width: 75% !default;
 
 $column-gutter: 1.75%;
 
-$outline-width: 1px;
-
 $sideways-tabs-width: 200px;
 
 $z-indexes: (
@@ -18,15 +16,14 @@ $z-indexes: (
   modalOverlay: 20,
   modalContent: 21,
 
-  dropdownOverlay: 30,
-  dropdownContent: 31,
-
-  loadingOverlay: 40,
-  loadingContent: 41
-);
+  tooltip: 30,
 
-$text-light: 300;
+  dropdownOverlay: 40,
+  dropdownContent: 41,
 
+  loadingOverlay: 50,
+  loadingContent: 51
+);
 
 // Usage Example:
 // @media only screen and (min-width: map-get($breakpoints, '--viewport-*')) {

diff --git a/assets/styles/global/_form.scss b/assets/styles/global/_form.scss
@@ -20,7 +20,7 @@ TEXTAREA,
   padding: 8px;
   background-color: var(--input-bg);
   border-radius: var(--border-radius);
-  border: solid $outline-width var(--input-border);
+  border: solid var(--outline-width) var(--input-border);
   color: var(--input-text);
 
   &:not(.focused) {

diff --git a/assets/styles/global/_tooltip.scss b/assets/styles/global/_tooltip.scss
@@ -4,7 +4,7 @@
   $center: calc(50% - #{$triangle-size});
 
   display: block !important;
-  z-index: 10000;
+  z-index: z-index('tooltip');
 
   .tooltip-inner {
     background: var(--tooltip-bg);

diff --git a/assets/styles/themes/_dark.scss b/assets/styles/themes/_dark.scss
@@ -117,7 +117,7 @@
 
   --tabbed-border: #{$medium};
   --tabbed-sidebar-bg: #{$darkest};
-  --tabbed-container-bg: #{$dark};
+  --tabbed-container-bg: #{mix($medium, $dark, 10%)};
 
   --yaml-editor-bg: #{$darkest};
 
@@ -139,7 +139,7 @@
   --diff-empty-placeholder     : #{$darker};
 
 
-  --wm-tabs-bg: #{$darker};
+  --wm-tabs-bg: #{mix($medium, $dark, 10%)};
   --wm-tab-bg: #{$darkest};
   --wm-closer-hover-bg: #{$medium};
   --wm-tab-active-bg: #{$darker};

diff --git a/assets/styles/themes/_light.scss b/assets/styles/themes/_light.scss
@@ -172,7 +172,7 @@ $selected: rgba($primary, .5);
   --wm-title-border            : #{$medium};
   --wm-body-bg                 : #{$lighter};
   --wm-border                  : var(--border);
-  --wm-tab-height              : 25px;
+  --wm-tab-height              : 29px;
 
   --glance-bg-rgb              : 61, 152, 211;
   --glance-divider             : #{rgba($primary, 0.5)};

diff --git a/assets/styles/vendor/vue-select.scss b/assets/styles/vendor/vue-select.scss
@@ -35,7 +35,7 @@
   position: absolute;
   top: calc(100% - 1px);
   left: 0;
-  z-index: 1000;
+  z-index: z-index('dropdownContent');
   padding: 5px 0;
   margin: 0;
   width: 100%;

diff --git a/components/form/Select.vue b/components/form/Select.vue
@@ -28,12 +28,9 @@ export default {
        * above.
        */
       const popper = createPopper(component.$refs.toggle, dropdownList, {
+
         placement: this.placement,
         modifiers: [
-          {
-            name:    'flip',
-            options: { fallbackPlacements: ['top', 'right', 'left'] },
-          },
           {
             name:    'offset',
             options: { offset: [0, -1] }
@@ -45,7 +42,8 @@ export default {
             fn({ state }) {
               component.$el.setAttribute('x-placement', state.placement);
             },
-          }]
+          },
+        ]
       });
 
       /**
@@ -62,6 +60,7 @@ export default {
   <v-select
     v-bind="$attrs"
     append-to-body
+    :calculate-position="placement ? withPopper : undefined"
     v-on="$listeners"
   >
     <slot />

diff --git a/components/nav/WindowManager/ContainerLogs.vue b/components/nav/WindowManager/ContainerLogs.vue
@@ -107,6 +107,7 @@ export default {
           label: t('wm.containerLogs.range.lines', { value: x }),
           value,
         });
+        updateFound(value);
       }
 
       for ( const x of minutes ) {
@@ -142,7 +143,10 @@ export default {
       return out;
 
       function updateFound(entry) {
-        if ( entry === current || entry === `{ current }s` ) {
+        entry = entry.replace(/[, ]/g, '').replace(/s$/, '');
+        const normalized = current.replace(/[, ]/g, '').replace(/s$/, '');
+
+        if ( entry === normalized) {
           found = true;
         }
       }
@@ -442,10 +446,10 @@ export default {
         v-if="containerChoices.length > 0"
         v-model="container"
         :disabled="containerChoices.length === 1"
-        class="auto-width"
+        class="containerPicker auto-width"
         :options="containerChoices"
-        :searchable="false"
         :clearable="false"
+        placement="top"
         @input="switchTo($event)"
       >
         <template #selected-option="option">
@@ -460,17 +464,11 @@ export default {
       </button>
       <AsyncButton class="btn-sm" mode="download" @click="download" />
 
-      <div
-        class="pull-right text-center ml-5"
-        style="min-width: 80px;>
-        <t :class="
-        {'text-error':
-        !isOpen}"
-        :k="isOpen ? 'wm.connection.connected' : 'wm.connection.disconnected'"
-      />
+      <div class="pull-right text-center p-10" style="min-width: 80px;">
+        <t :class="{'text-success': isOpen, 'text-error': !isOpen}" :k="isOpen ? 'wm.connection.connected' : 'wm.connection.disconnected'" />
       </div>
       <div class="pull-right ml-5">
-        <input v-model="search" class="p-5" style="margin-top: 3px;" type="search" :placeholder="t('wm.containerLogs.search')" />
+        <input v-model="search" class="input-sm" type="search" :placeholder="t('wm.containerLogs.search')" />
       </div>
       <div class="pull-right ml-5">
         <v-popover
@@ -484,9 +482,9 @@ export default {
           <template slot="popover">
             <LabeledSelect
               v-model="range"
+              class="range"
               :label="t('wm.containerLogs.range.label')"
               :options="rangeOptions"
-              :searchable="false"
               :clearable="false"
               placement="top"
               @input="toggleRange($event)"
@@ -561,4 +559,12 @@ export default {
       white-space: normal;
     }
   }
+
+  .containerPicker ::v-deep .vs__search,
+  .range ::v-deep .vs__search {
+    width: 0;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+  }
 </style>
diff --git a/components/nav/WindowManager/ContainerShell.vue b/components/nav/WindowManager/ContainerShell.vue
@@ -266,7 +266,7 @@ export default {
         v-if="containerChoices.length > 0"
         v-model="container"
         :disabled="containerChoices.length === 1"
-        class="auto-width inline-block mini"
+        class="containerPicker auto-width"
         :options="containerChoices"
         :searchable="false"
         :clearable="false"
@@ -279,8 +279,8 @@ export default {
       <button class="btn btn-sm bg-primary" @click="clear">
         <t k="wm.containerShell.clear" />
       </button>
-      <div class="pull-right text-center ml-5" style="min-width: 80px">
-        <t v-if="isOpen" k="wm.connection.connected" />
+      <div class="pull-right text-center p-10" style="min-width: 80px;">
+        <t v-if="isOpen" k="wm.connection.connected" class="text-success" />
         <t v-else-if="isOpening" k="wm.connection.connecting" class="text-warning" :raw="true" />
         <t v-else k="wm.connection.disconnected" class="text-error" />
       </div>
@@ -309,11 +309,10 @@ export default {
     }
   }
 
-  .v-select.mini .vs__dropdown-toggle {
+  .containerPicker ::v-deep .vs__search {
+    width: 0;
     padding: 0;
-  }
-
-  .vs__selected {
-    padding: 0 5px;
+    margin: 0;
+    opacity: 0;
   }
 </style>
diff --git a/components/nav/WindowManager/Window.vue b/components/nav/WindowManager/Window.vue
@@ -65,14 +65,14 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  $title-height: 35px;
+  $title-height: 41px;
 
   .window {
     display: grid;
     grid-template-areas:
       "body"
       "title";
-    // grid-template-rows: auto $title-height;
+    grid-template-rows: auto $title-height;
     height: 100%;
   }
 
@@ -83,7 +83,7 @@ export default {
     height: 100%;
     vertical-align: middle;
     // line-height: $title-height - 4px;
-    padding: 0 5px;
+    padding: 2px 5px;
   }
 
   .body {

diff --git a/components/nav/WindowManager/index.vue b/components/nav/WindowManager/index.vue
@@ -175,7 +175,7 @@ export default {
       >
         <i v-if="tab.icon" class="icon" :class="{['icon-'+ tab.icon]: true}" />
         {{ tab.label }}
-        <i class="closer icon icon-x" @click="close(tab.id)" />
+        <i class="closer icon icon-fw icon-x" @click="close(tab.id)" />
       </div>
       <div
         class="resizer"
@@ -230,20 +230,30 @@ export default {
 
       .tab {
         cursor: pointer;
+        user-select: none;
         border-top: 1px solid var(--wm-border);
         border-right: 1px solid var(--wm-border);
-        padding: 0 10px;
-        line-height: var(--wm-tab-height);
+        padding: 5px 10px;
         overflow: hidden;
         text-overflow: ellipsis;
         margin: 0;
 
         &.active {
           position: relative;
           background-color: var(--wm-body-bg);
-          line-height: calc(var(--wm-tab-height) + 1px);
+          outline: 1px solid var(--wm-body-bg);
           z-index: 1;
         }
+
+        .closer {
+          margin-left: 5px;
+          border: 1px solid var(--body-text);
+          border-radius: var(--border-radius);
+
+          &:hover {
+            background-color: var(--wm-closer-hover-bg);
+          }
+        }
       }
 
       .resizer {