From d628c0cf412e93c01d62c063e450d56c4d812d58 Mon Sep 17 00:00:00 2001
From: lvuch <laurenvuchetich@gmail.com>
Date: Tue, 21 Apr 2020 15:32:55 -0700
Subject: [PATCH] start of masthead changes

---
 assets/styles/base/_typography.scss      |   3 +-
 assets/translations/en-us.yaml           |   2 +-
 components/DetailTop.vue                 |  22 +--
 components/form/LabeledSelect.stories.js | 174 +++++++++++++++++++++++
 layouts/default.vue                      |   1 -
 5 files changed, 181 insertions(+), 21 deletions(-)
 create mode 100644 components/form/LabeledSelect.stories.js

diff --git a/assets/styles/base/_typography.scss b/assets/styles/base/_typography.scss
index 225f294757..56cd93f6d4 100644
--- a/assets/styles/base/_typography.scss
+++ b/assets/styles/base/_typography.scss
@@ -11,7 +11,8 @@ H1, H2, H3, H4, H5, H6 {
 }
 
 H1 {
-  font-size: 40px;
+  font-size: 24px;
+  font-weight: 400;
 }
 
 H2 {
diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml
index ea1c428b8c..a49925ade7 100644
--- a/assets/translations/en-us.yaml
+++ b/assets/translations/en-us.yaml
@@ -101,7 +101,7 @@ infoBoxCluster:
 
 resourceDetail:
   header:
-    view: '<a href="{typeLink}">{type}</a>: {name}'
+    view: '{name}'
     create: 'Create <a href="{typeLink}">{type}</a>'
     edit: 'Edit <a href="{typeLink}">{type}</a>: {name}'
     clone: 'Clone from <a href="{typeLink}">{type}</a>: {name}'
diff --git a/components/DetailTop.vue b/components/DetailTop.vue
index 1a4d89edde..732d0dc434 100644
--- a/components/DetailTop.vue
+++ b/components/DetailTop.vue
@@ -12,7 +12,7 @@ export default {
 <template>
   <div class="detail-top">
     <div v-for="col in columns" :key="col.title">
-      <span>{{ col.title }}</span>
+      <span>{{ col.title }}: </span>
       <slot :name="col.name">
         <span>{{ col.content || col.content===0 ? col.content : col.fallback || 'n/a' }}</span>
       </slot>
@@ -24,28 +24,14 @@ export default {
 .detail-top {
     display: flex;
     flex-wrap: wrap;
-    background: var(--box-bg);
-    border: solid thin var(--border);
-    border-radius: var(--border-radius);
-    justify-content: space-between;
+    border-top: solid thin var(--border);
+    border-bottom: solid thin var(--border);
+    padding: 15px 0;
 
     & > * {
         padding: 0 10px;
-        margin: 15px 0;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items:center;
-        flex-grow:1;
-
         & >:first-child {
-            padding-bottom: 5px;
             color: var(--input-placeholder);
-
-        }
-
-        &:not(:last-child) {
-            border-right: 1px solid var(--border);
         }
 
         &:last-child {
diff --git a/components/form/LabeledSelect.stories.js b/components/form/LabeledSelect.stories.js
new file mode 100644
index 0000000000..619e51a832
--- /dev/null
+++ b/components/form/LabeledSelect.stories.js
@@ -0,0 +1,174 @@
+<script>
+import LabeledFormElement from '@/mixins/labeled-form-element';
+import { findBy } from '@/utils/array';
+import { get } from '@/utils/object';
+
+export default {
+  mixins: [LabeledFormElement],
+
+  props: {
+    options: {
+      type:    Array,
+      default: null,
+    },
+    grouped: {
+      type:    Boolean,
+      default: false,
+    },
+    disabled: {
+      type:    Boolean,
+      default: false
+    },
+    multiple: {
+      type:    Boolean,
+      default: false
+    },
+    optionLabel: {
+      type:    String,
+      default: 'label'
+    }
+  },
+  data() {
+    return { selectedDisplay: 'block' };
+  },
+  computed: {
+    currentLabel() {
+      let entry;
+
+      if ( this.grouped ) {
+        for ( let i = 0 ; i < this.options.length && !entry ; i++ ) {
+          entry = findBy(this.options[i].items || [], 'value', this.value);
+        }
+      } else {
+        entry = findBy(this.options || [], 'value', this.value);
+      }
+
+      if ( entry ) {
+        return entry.label;
+      }
+
+      return this.getOptionLabel(this.value);
+    },
+    shownValue() {
+      return this.value ? this.value : ' ';
+    }
+  },
+
+  methods: {
+    onFocus() {
+      this.onFocusLabeled();
+      if ( this.$refs.input ) {
+        this.$refs.input.placeholder = this.placeholder;
+      }
+    },
+
+    onBlur() {
+      this.onBlurLabeled();
+      if ( this.$refs.input ) {
+        this.$refs.input.placeholder = '';
+      }
+    },
+
+    searchFocus() {
+      this.selectedDisplay = 'none';
+    },
+
+    searchBlur() {
+      this.selectedDisplay = 'block';
+    },
+
+    getOptionLabel(option) {
+      if (get(option, this.optionLabel)) {
+        return get(option, this.optionLabel);
+      } else {
+        return option;
+      }
+    },
+    get
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div v-if="isView">
+      <div :class="{'labeled-input': true, raised, focused, empty, [mode]: true}">
+        <label>
+          {{ label }}
+          <span v-if="required && !value" class="required">*</span>
+        </label>
+        <label class="corner">
+          <slot name="corner" />
+        </label>
+        <div class="selected" :class="{'no-label':!label}" :style="{display:selectedDisplay}">
+          {{ currentLabel }}
+        </div>
+      </div>
+    </div>
+    <v-select
+      v-else
+      ref="input"
+      class="inline"
+      v-bind="$attrs"
+      :disabled="isView || disabled"
+      :value="shownValue"
+      :options="options"
+      :multiple="multiple"
+      :get-option-label="opt=>getOptionLabel(opt)"
+      :get-option-key="opt=>optionKey ? get(opt, optionKey) : getOptionLabel(opt)"
+      :label="optionLabel"
+      @input="e=>e.value ? $emit('input', e.value) : $emit('input', e) "
+      @search:focus="searchFocus"
+      @search:blur="searchBlur"
+      @focus="onFocus"
+      @blur="onBlur"
+    >
+      <template v-slot:selected-option-container>
+        <div :class="{'labeled-input': true, raised, focused, empty, [mode]: true}" :style="{border:'none'}">
+          <label>
+            {{ label }}
+            <span v-if="required && !value" class="required">*</span>
+          </label>
+          <label class="corner">
+            <slot name="corner" />
+          </label>
+          <div v-if="isView">
+            {{ currentLabel }}
+          </div>
+          <div v-else class="selected" :class="{'no-label':!label}" :style="{display:selectedDisplay}">
+            {{ currentLabel }}&nbsp;
+          </div>
+        </div>
+      </template>
+    </v-select>
+  </div>
+</template>
+
+<style lang='scss'>
+.v-select.inline {
+
+  & .labeled-input {
+    background-color: rgba(0,0,0,0);
+    padding-right:0;
+    display: flex;
+    flex-direction: column;
+
+     & *{
+      background-color: rgba(0,0,0,0);
+    }
+  }
+
+  & .vs__search {
+    background-color: none;
+    padding: 3px 10px 0px 10px;
+  }
+
+  &  .selected{
+    position:relative;
+    top: 1.4em;
+    &.no-label{
+      top:7px;
+    }
+  }
+}
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 8109f69657..ebcd0f6e19 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -270,7 +270,6 @@ export default {
       .actions {
         grid-area: actions;
         text-align: right;
-        padding-top: 10px;
       }
     }