Merge pull request #1640 from lvuch/lh-1005

daemon and cronjobs top tabs
rancher · Oct 12, 2020 · 8875b93 · 8875b93
2 parents a425630 + 67fdd39
commit 8875b93
Show file tree

Hide file tree

Showing 18 changed files with 98 additions and 72 deletions.
diff --git a/assets/styles/base/_mixins.scss b/assets/styles/base/_mixins.scss
@@ -58,15 +58,21 @@
   padding-bottom: 20px;
 }
 
-.clearfix       { @include clearfix; }
-.list-unstyled  { @include list-unstyled }
-.no-select      { @include no-select }
-.no-resize      { @include no-resize }
-.hand           { @include hand }
-.fixed          { @include fixed }
-.clip           { @include clip }
-.force-wrap     { @include force-wrap }
+@mixin divider {
+  margin-bottom: 20px;
+  margin-top: 20px;
+}
+
+.clearfix         { @include clearfix; }
+.list-unstyled    { @include list-unstyled }
+.no-select        { @include no-select }
+.no-resize        { @include no-resize }
+.hand             { @include hand }
+.fixed            { @include fixed }
+.clip             { @include clip }
+.force-wrap       { @include force-wrap }
 .bordered-section { @include bordered-section }
+.divider          { @include divider }
 
 /// Sets the specified background color and calculates a dark or light contrasted text color.
 @mixin contrasted($background-color, $dark: $contrasted-dark, $light: $contrasted-light) {
@@ -112,4 +118,4 @@
   -webkit-transform: scale($horiz, $vert);
       -ms-transform: scale($horiz, $vert);
           transform: scale($horiz, $vert);
-}
+}
diff --git a/assets/styles/themes/_light.scss b/assets/styles/themes/_light.scss
@@ -195,7 +195,7 @@ $selected: rgba($primary, .5);
 
   --primary-color              : 61, 152, 211;
 
-  --gauge-divider              : rgba(255, 255, 255, .3);
+  --gauge-divider              : #{$lightest};
   --gauge-success-primary      : 150, 189, 127;
   --gauge-success-secondary    : 190, 211, 172;
   --gauge-warning-primary      : 238, 226, 176;

diff --git a/components/SimpleBox.vue b/components/SimpleBox.vue
@@ -34,7 +34,7 @@ export default {
     line-height: 24px;
     font-size: 18px;
     border-bottom: 1px solid var(--simple-box-divider);
-    padding: $padding;
+    padding-bottom: $padding;
   }
 
   .content {

diff --git a/components/Tabbed/index.vue b/components/Tabbed/index.vue
@@ -361,7 +361,6 @@ export default {
     & .tabs {
       width: $sideways-tabs-width;
       min-width: $sideways-tabs-width;
-      margin: 10px 0;
 
       & .tab {
         width: 100%;
@@ -376,7 +375,7 @@ export default {
         }
 
         &.active {
-          background-color: var(--tabbed-container-bg);
+          background-color: var(--body-bg);
           border-left: solid 5px var(--primary);
 
           & A{

diff --git a/components/form/Command.vue b/components/form/Command.vue
@@ -146,8 +146,7 @@ export default {
         </div>
       </div>
     </div>
-
-    <div class="bordered-section " />
+    <hr class="divider" />
     <h3>{{ t('workload.container.titles.env') }}</h3>
     <EnvVars :mode="mode" :config-maps="configMaps" :secrets="secrets" :value="value" />
   </div>

diff --git a/components/form/Container.vue b/components/form/Container.vue
@@ -78,12 +78,12 @@ export default {
 
 <template>
   <div v-if="isView">
-    <div class="bordered-section">
+    <hr class="divider" />
+    <div>
       <div class="row">
         <div class="col span-4">
           <LabeledInput :label="t('workload.container.name')" :mode="mode" :value="value.name" />
         </div>
-
         <div class="col span-4">
           <LabeledInput
             v-model="value.image"
@@ -102,28 +102,32 @@ export default {
         </div>
       </div>
     </div>
-    <div class="bordered-section">
+    <hr class="divider" />
+    <div>
       <h3><t k="workload.container.titles.ports" /></h3>
       <WorkloadPorts v-if="value.ports" v-model="value.ports" :mode="mode" />
       <div v-else>
         <t k="workload.container.noPorts" />
       </div>
     </div>
 
-    <div class="bordered-section">
+    <hr class="divider" />
+    <div>
       <h3><t k="workload.container.titles.command" /></h3>
       <Command v-model="value" :mode="mode" :secrets="[]" :config-maps="[]" />
     </div>
 
-    <div class="bordered-section">
+    <hr class="divider" />
+    <div>
       <h3><t k="workload.container.titles.resources" /></h3>
       <ContainerResourceLimit v-if="hasResourceLimits" v-model="flatResources" :mode="mode" :show-tip="false" />
       <div v-else>
         <t k="workload.container.noResourceLimits" />
       </div>
     </div>
 
-    <div class="bordered-section">
+    <hr class="divider" />
+    <div>
       <h3><t k="workload.container.titles.healthCheck" /></h3>
       <HealthCheck v-if="hasHealthCheck" v-model="healthCheck" :mode="mode" />
       <div v-else>

diff --git a/components/form/HealthCheck.vue b/components/form/HealthCheck.vue
@@ -42,7 +42,7 @@ export default {
 
 <template>
   <div>
-    <div class="bordered-section">
+    <div>
       <div class="row">
         <Probe
           v-model="readinessProbe"
@@ -54,8 +54,9 @@ export default {
         />
       </div>
     </div>
+    <hr class="divider" />
 
-    <div class="bordered-section">
+    <div>
       <div class="row">
         <Probe
           v-model="livenessProbe"
@@ -67,6 +68,7 @@ export default {
         />
       </div>
     </div>
+    <hr class="divider" />
 
     <div class="row">
       <Probe

diff --git a/components/form/MatchExpressions.vue b/components/form/MatchExpressions.vue
@@ -264,7 +264,7 @@ export default {
         <button
           v-if="!isView"
           type="button"
-          class="btn btn-sm role-link col remove-rule-button"
+          class="btn bg-transparent role-link"
           :style="{padding:'0px'}"
 
           :disabled="mode==='view'"

diff --git a/components/form/Networking.vue b/components/form/Networking.vue
@@ -143,7 +143,7 @@ export default {
 </script>
 <template>
   <div>
-    <div class="bordered-section">
+    <div>
       <div class="row mb-20">
         <div class="col span-6">
           <LabeledSelect
@@ -189,8 +189,9 @@ export default {
         </div>
       </div>
     </div>
+    <hr class="divider" />
 
-    <div class="bordered-section">
+    <div>
       <h3>{{ t('workload.networking.dns') }}</h3>
       <div class="row">
         <div class="col span-6">
@@ -223,8 +224,9 @@ export default {
         </div>
       </div>
     </div>
+    <hr class="divider" />
 
-    <div class="bordered-section">
+    <div>
       <div class="row">
         <KeyValue
           v-model="options"
@@ -238,6 +240,7 @@ export default {
         />
       </div>
     </div>
+    <hr class="divider" />
 
     <div class="row">
       <div class="col span-12">

diff --git a/components/form/PodScheduling.vue b/components/form/PodScheduling.vue
@@ -41,12 +41,13 @@ export default {
 
 <template>
   <div @input="update">
-    <div class="bordered-section">
+    <div>
       <h4 class="mb-10">
         <t k="workload.scheduling.affinity.affinityTitle" />
       </h4>
       <PodAffinity v-model="podAffinity" :mode="mode" />
     </div>
+    <hr class="divider" />
 
     <h4 class="mb-10">
       <t k="workload.scheduling.affinity.antiAffinityTitle" />

diff --git a/components/form/Scheduling.vue b/components/form/Scheduling.vue
@@ -63,7 +63,7 @@ export default {
   <div>
     <NodeScheduling :value="value" :mode="mode" :nodes="nodes" />
 
-    <div class="bordered-section">
+    <div>
       <h3 class="mb-10">
         <t k="workload.scheduling.titles.podScheduling" />
       </h3>
@@ -78,24 +78,28 @@ export default {
         </div>
       </template>
     </div>
+    <hr class="divider" />
 
-    <div class="bordered-section">
+    <div>
       <h3 class="mb-10">
         <t k="workload.scheduling.titles.tolerations" />
       </h3>
       <div class="row">
         <Tolerations v-model="value.tolerations" :mode="mode" />
       </div>
     </div>
+    <hr class="divider" />
 
     <div>
+      <hr class="divider" />
       <h3 class="mb-10">
         <t k="workload.scheduling.titles.priority" />
       </h3>
       <div class="row">
         <div class="col span-6">
           <LabeledInput v-model.number="value.priority" :mode="mode" :label="t('workload.scheduling.priority.priority')" />
         </div>
+
         <div class="col span-6">
           <LabeledInput v-model="value.priorityClassname" :mode="mode" :label="t('workload.scheduling.priority.className')" />
         </div>

diff --git a/components/form/Security.vue b/components/form/Security.vue
@@ -106,7 +106,7 @@ export default {
 
 <template>
   <div @input="update">
-    <div class="bordered-section">
+    <div>
       <div class="row">
         <div class="col span-6">
           <RadioGroup
@@ -131,8 +131,9 @@ export default {
         </div>
       </div>
     </div>
+    <hr class="divider" />
 
-    <div class="bordered-section">
+    <div>
       <div class="row">
         <div class="col span-6">
           <RadioGroup
@@ -157,6 +158,7 @@ export default {
         </div>
       </div>
     </div>
+    <hr class="divider" />
 
     <div class="row mb-10">
       <div class="col span-6">

diff --git a/components/form/Tolerations.vue b/components/form/Tolerations.vue
@@ -61,7 +61,10 @@ export default {
           value: 'tolerationSeconds',
           width: '20%'
         },
-        { name: 'remove', width: '50' }
+        {
+          name:  'remove',
+          width: '50'
+        }
       ];
     },
     operatorOpts() {
@@ -140,10 +143,10 @@ export default {
       <span />
     </div>
     <div v-for="rule in rules" :key="rule.vKey" class="rule">
-      <div class="col  ">
+      <div class="col">
         <LabeledInput v-model="rule.key" :mode="mode" />
       </div>
-      <div class="col  ">
+      <div class="col">
         <LabeledSelect
           id="operator"
           v-model="rule.operator"
@@ -153,36 +156,37 @@ export default {
         />
       </div>
       <template v-if="rule.operator==='Exists'">
-        <div class="col  ">
+        <div class="col">
           n/a
         </div>
       </template>
       <template v-else>
-        <div class="col  ">
+        <div class="col">
           <LabeledInput v-model="rule.value" :mode="mode" />
         </div>
       </template>
-      <div class="col  ">
+      <div class="col">
         <LabeledSelect
           v-model="rule.effect"
           :options="effectOpts"
           :mode="mode"
           @input="e=>updateEffect(e, rule)"
         />
       </div>
-      <div class="col  ">
+      <div class="col">
         <UnitInput v-model="rule.tolerationSeconds" :disabled="rule.effect !== 'NoExecute'" :mode="mode" suffix="Seconds" />
       </div>
-      <button
-        v-if="!isView"
-        type="button"
-        class="btn btn-sm role-link col remove-rule-button"
-        :style="{padding:'0px'}"
-        :disabled="mode==='view'"
-        @click="remove(rule)"
-      >
-        <t k="generic.remove" />
-      </button>
+      <div class="col">
+        <button
+          v-if="!isView"
+          type="button"
+          class="btn bg-transparent role-link"
+          :disabled="mode==='view'"
+          @click="remove(rule)"
+        >
+          <t k="generic.remove" />
+        </button>
+      </div>
     </div>
     <button v-if="!isView" type="button" class="btn role-tertiary" @click="addToleration">
       <t k="workload.scheduling.tolerations.addToleration" />
@@ -197,7 +201,7 @@ export default {
 
   .rule, .toleration-headers{
     display: grid;
-    grid-template-columns: 17% 17% 17% 17% 17% 15%;
+    grid-template-columns: 20% 10% 20% 10% 20% 10%;
     grid-gap: $column-gutter;
     align-items: center;
   }