new save button for forms

zero.Web.UI/App/components/buttons/context-button.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="ui-context-button">
+    <ui-button :submit="true" label="@ui.save" :state="state" />
+    <ui-dropdown ref="dropdown" align="right">
+      <template v-slot:button>
+        <ui-button icon="fth-chevron-down" />
+      </template>
+      <slot></slot>
+    </ui-dropdown>
+  </div>
+</template>
+
+
+<script>
+  import { find as _find } from 'underscore';
+
+  export default {
+    props: {
+      label: {
+        type: String,
+        default: '@ui.save'
+      },
+      state: {
+        type: String,
+        default: 'default'
+      },
+      type: {
+        type: String,
+        default: 'action'
+      },
+      route: {
+        type: String,
+        default: null
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    methods: {
+
+      onClick(isShared)
+      {
+        
+      }
+
+    }
+
+  }
+</script>
+
+<style lang="scss">
+  .ui-context-button
+  {
+    display: flex;
+
+    > .ui-button
+    {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .ui-dropdown-toggle .ui-button
+    {
+      padding: 0 14px;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left: 1px solid var(--color-primary-line);
+    }
+  }
+
+  .ui-context-button .ui-button + .ui-dropdown-container
+  {
+    margin-left: 0;
+  }
+</style>

zero.Web.UI/App/components/forms/form-header.vue

@@ -4,14 +4,12 @@
     <div v-if="activeToggle" class="ui-header-bar-toggle">
       <ui-toggle v-model="value.isActive" class="is-primary" off-content="@ui.inactive" on-content="@ui.active" :content-left="true" />
     </div>
-    <ui-dropdown v-if="!isCreate" align="right">
-      <template v-slot:button>
-        <ui-button type="white" label="@ui.actions" caret="down" />
-      </template>
-      <slot name="actions"></slot>
-      <ui-dropdown-button v-if="canDelete" label="@ui.delete" icon="fth-trash" @click="onDelete" :disabled="disabled" />
-    </ui-dropdown>
-    <ui-button :submit="true" label="@ui.save" :state="state" v-if="!disabled" />
+    <ui-context-button :state="state">
+      <div v-if="!isCreate">
+        <slot name="actions"></slot>
+        <ui-dropdown-button v-if="canDelete" label="@ui.delete" icon="fth-trash" @click="onDelete" :disabled="disabled" />
+      </div>
+    </ui-context-button>
   </ui-header-bar>
 </template>
 

zero.Web.UI/App/components/forms/toggle.vue

@@ -124,12 +124,12 @@
 
     &.is-active
     {
-      background: var(--color-primary);
+      //background: var(--color-primary);
     }
 
     &.is-active  i
     {
-      background: var(--color-primary-fg);
+      //background: var(--color-primary-fg);
       transform: translateX(14px);
     }
   }

zero.Web.UI/Sass/Core/_settings.scss

@@ -102,10 +102,11 @@
 :root
 {
   // accent colors
-  --color-primary: #e7ecee; //linear-gradient(75deg, #48da9c, #3eb8ad); //#484c5b; // #292b2c; // #00aea2
+  --color-primary: #efeee9; //linear-gradient(75deg, #48da9c, #3eb8ad); //#484c5b; // #292b2c; // #00aea2
   --color-primary-fg: #191b1c;
   --color-primary-low: rgba(229, 225, 221, 0.3);
   --color-primary-two: #3d72c4;
+  --color-primary-line: #e0dfda;
   --color-negative: #d82853;
 
   // foreground colors