redesign tab header

Signed-off-by: binsky <timo@binsky.org>

css/app.css

@@ -140,38 +140,42 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
-.tab_header {
+.app-sidebar-tabs {
-  width: calc(100vw - 300px);
+  display: flex;
-  margin: 0 0 0;
+  flex-direction: column;
-  list-style: none;
+  min-height: 0;
-  padding: 0; }
+  flex: 1 1 100%; }
-  .tab_header li.tab:first-child {
+
-    margin-left: 0; }
+.app-sidebar-tabs__nav ul {
-  .tab_header li.tab {
+  display: flex;
-    /*@include border-top-radius(2px);*/
+  justify-content: stretch; }
-    float: left;
+
-    border-bottom-width: 0;
+.app-sidebar-tabs__tab.active {
-    margin: 0;
+  color: var(--color-text-light);
+  border-bottom-color: var(--color-primary-element);
+  box-shadow: inset 0 -1px 0 var(--color-primary-element);
+  font-weight: bold; }
+
+.app-sidebar-tabs__tab:not(.active):hover, .app-sidebar-tabs__tab:not(.active):focus {
+  border-bottom-color: var(--color-background-darker);
+  box-shadow: inset 0 -1px 0 var(--color-background-darker); }
+
+.app-sidebar-tabs__tab:hover, .app-sidebar-tabs__tab:focus, .app-sidebar-tabs__tab:active, .app-sidebar-tabs__tab.active {
+  opacity: 1;
+  cursor: pointer; }
+
+.app-sidebar-tabs__tab {
+  position: relative;
+  display: block;
+  overflow: hidden;
   padding: 10px 10px 10px 10px;
-    cursor: pointer;
+  transition: color var(--animation-quick), opacity var(--animation-quick), border-color var(--animation-quick);
-    border-right: 1px solid #eee;
+  text-align: center;
-    -webkit-transition: background-color 250ms linear;
+  white-space: nowrap;
-    -moz-transition: background-color 250ms linear;
+  text-overflow: ellipsis;
-    -o-transition: background-color 250ms linear;
+  opacity: .7;
-    -ms-transition: background-color 250ms linear;
+  color: var(--color-main-text);
-    transition: background-color 250ms linear; }
+  border-bottom: 1px solid var(--color-border); }
-    .tab_header li.tab .indicator {
-      display: none; }
-  .tab_header li.inactive {
-    background-color: #fff !important;
-    color: unset !important; }
-  .tab_header li.active .indicator {
-    display: inline-block;
-    position: absolute;
-    height: 7px;
-    left: 0;
-    right: 0;
-    bottom: -1px; }
 
 .tab_container {
   border: 1px solid #eee;

css/bookmarklet.css

@@ -56,9 +56,6 @@ header {
   padding-right: 5px;
   font-size: 10px; }
 
-.tab_header {
-  margin: 0; }
-
 .angularjs-datetime-picker {
   z-index: 9999; }
 

css/bookmarklet.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,MAAO;EACL,OAAO,EAAE,IAAI;;AAOf,gBAAiB;EACf,WAAW,EAAE,CAAC;;AAIhB,YAAa;EACX,WAAW,EAAE,CAAC;EACd,UAAU,EAAE,IAAI;;AAGlB,oBAAqB;EACnB,UAAU,EAAE,kBAAkB;;AAGhC,sBAAuB;EACrB,YAAY,EAAE,IAAI;;AAGpB,6BAA8B;EAC5B,YAAY,EAAE,CAAC;EACf,kEAAO;IACL,MAAM,EAAE,OAAO;;AAInB,cAAe;EACb,WAAW,EAAE,IAAI;EAOjB,aAAa,EAAE,IAAI;EALnB,kBAAI;IACF,aAAa,EAAE,GAAG;IAClB,QAAQ,EAAE,MAAM;;AAMpB,cAAe;EACb,UAAU,EAAE,IAAI;;AAGlB,aAAc;EACZ,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,KAAK;EACjB,aAAa,EAAE,GAAG;EAClB,SAAS,EAAE,IAAI;;AAGjB,WAAY;EACV,MAAM,EAAE,CAAC;;AAGX,0BAA2B;EACzB,OAAO,EAAE,IAAI;;AAGf,YAAa;EACX,OAAO,EAAE,IAAI",
+"mappings": "AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,MAAO;EACL,OAAO,EAAE,IAAI;;AAOf,gBAAiB;EACf,WAAW,EAAE,CAAC;;AAIhB,YAAa;EACX,WAAW,EAAE,CAAC;EACd,UAAU,EAAE,IAAI;;AAGlB,oBAAqB;EACnB,UAAU,EAAE,kBAAkB;;AAGhC,sBAAuB;EACrB,YAAY,EAAE,IAAI;;AAGpB,6BAA8B;EAC5B,YAAY,EAAE,CAAC;EACf,kEAAO;IACL,MAAM,EAAE,OAAO;;AAInB,cAAe;EACb,WAAW,EAAE,IAAI;EAOjB,aAAa,EAAE,IAAI;EALnB,kBAAI;IACF,aAAa,EAAE,GAAG;IAClB,QAAQ,EAAE,MAAM;;AAMpB,cAAe;EACb,UAAU,EAAE,IAAI;;AAGlB,aAAc;EACZ,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,KAAK;EACjB,aAAa,EAAE,GAAG;EAClB,SAAS,EAAE,IAAI;;AAGjB,0BAA2B;EACzB,OAAO,EAAE,IAAI;;AAGf,YAAa;EACX,OAAO,EAAE,IAAI",
 "sources": ["../sass/bookmarklet.scss"],
 "names": [],
 "file": "bookmarklet.css"

js/templates.js

@@ -9,7 +9,7 @@ angular.module('views/credential_revisions.html', []).run(['$templateCache', fun
 angular.module('views/edit_credential.html', []).run(['$templateCache', function ($templateCache) {
   'use strict';
   $templateCache.put('views/edit_credential.html',
-    '<div id="passman-controls"><div class="breadcrumb"><div class="breadcrumb"><div class="crumb svg ui-droppable" data-dir="/"><a ng-click="logout()"><i class="fa fa-home"></i></a></div><div class="crumb svg" data-dir="/Test"><a ng-click="cancel()">{{active_vault.name}}</a></div><div class="crumb svg last" data-dir="/Test"><a ng-if="storedCredential.credential_id">{{ \'edit.credential\' | translate}} "{{storedCredential.label}}"</a> <a ng-if="!storedCredential.credential_id">{{ \'create.credential\' | translate}}</a></div></div></div></div><div><ul class="tab_header"><li ng-repeat="tab in tabs track by $index" class="tab" ng-class="isActiveTab(tab)? \'active\' : \'inactive\'" ng-click="onClickTab(tab)" use-theme color="\'true\'">{{tab.title}}<div class="indicator" use-theme negative="\'true\'"></div></li></ul><div class="tab_container edit_credential" use-theme type="\'border-top-color\'"><div ng-include="currentTab.url"></div><button ng-click="saveCredential()" ng-disabled="saving"><i class="fa fa-spinner fa-spin" ng-show="saving"></i> {{ \'save\' | translate}}</button> <button ng-click="cancel()">{{ \'cancel\' | translate}}</button></div></div>');
+    '<div id="passman-controls"><div class="breadcrumb"><div class="breadcrumb"><div class="crumb svg ui-droppable" data-dir="/"><a ng-click="logout()"><i class="fa fa-home"></i></a></div><div class="crumb svg" data-dir="/Test"><a ng-click="cancel()">{{ active_vault.name }}</a></div><div class="crumb svg last" data-dir="/Test"><a ng-if="storedCredential.credential_id">{{ \'edit.credential\' | translate }} "{{ storedCredential.label }}"</a> <a ng-if="!storedCredential.credential_id">{{ \'create.credential\' | translate }}</a></div></div></div></div><div class="app-sidebar-tabs"><nav class="app-sidebar-tabs__nav"><ul><li ng-repeat="tab in tabs track by $index" class="app-sidebar-tabs__tab" ng-class="isActiveTab(tab)? \'active\' : \'inactive\'" ng-click="onClickTab(tab)">{{ tab.title }}</li></ul></nav><div class="tab_container edit_credential" use-theme type="\'border-top-color\'"><div ng-include="currentTab.url"></div><button ng-click="saveCredential()" ng-disabled="saving"><i class="fa fa-spinner fa-spin" ng-show="saving"></i> {{ \'save\' | translate }}</button> <button ng-click="cancel()">{{ \'cancel\' | translate }}</button></div></div>');
 }]);
 
 angular.module('views/partials/credential_template.html', []).run(['$templateCache', function ($templateCache) {
@@ -119,13 +119,13 @@ angular.module('views/partials/password-meter.html', []).run(['$templateCache',
 angular.module('views/settings.html', []).run(['$templateCache', function ($templateCache) {
   'use strict';
   $templateCache.put('views/settings.html',
-    '<div id="passman-controls"><div class="breadcrumb"><div class="breadcrumb"><div class="crumb svg ui-droppable" data-dir="/"><a ng-click="logout()"><i class="fa fa-home"></i></a></div><div class="crumb svg"><a ng-click="cancel()">{{active_vault.name}}</a></div><div class="crumb svg last"><a>{{ \'settings\' | translate}}</a></div></div></div></div><div><ul class="tab_header"><li ng-repeat="tab in tabs track by $index" class="tab" ng-class="isActiveTab(tab)? \'active\' : \'inactive\'" ng-click="onClickTab(tab)" use-theme color="\'true\'">{{tab.title | translate}}<div class="indicator" use-theme negative="\'true\'"></div></li></ul><div class="tab_container settings edit_credential" use-theme type="\'border-top-color\'"><div ng-include="currentTab.url"></div></div></div>');
+    '<div id="passman-controls"><div class="breadcrumb"><div class="breadcrumb"><div class="crumb svg ui-droppable" data-dir="/"><a ng-click="logout()"><i class="fa fa-home"></i></a></div><div class="crumb svg"><a ng-click="cancel()">{{ active_vault.name }}</a></div><div class="crumb svg last"><a>{{ \'settings\' | translate }}</a></div></div></div></div><div class="app-sidebar-tabs"><nav class="app-sidebar-tabs__nav"><ul><li ng-repeat="tab in tabs track by $index" class="app-sidebar-tabs__tab" ng-class="isActiveTab(tab)? \'active\' : \'inactive\'" ng-click="onClickTab(tab)">{{ tab.title | translate }}</li></ul></nav><div class="tab_container settings edit_credential" use-theme type="\'border-top-color\'"><div ng-include="currentTab.url"></div></div></div>');
 }]);
 
 angular.module('views/share_credential.html', []).run(['$templateCache', function ($templateCache) {
   'use strict';
   $templateCache.put('views/share_credential.html',
-    '<div class="main_list.share"><div id="passman-controls"><div class="actions creatable"><div class="breadcrumb"><div class="crumb svg ui-droppable" data-dir="/"><a ng-click="logout()"><i class="fa fa-home"></i></a></div><div class="crumb svg" data-dir="/Test"><a ng-click="cancel()">{{active_vault.name}}</a></div><div class="crumb svg last" data-dir="/Test"><a ng-if="storedCredential.credential_id">{{ \'share.credential\' | translate}} {{storedCredential.label}}</a></div></div></div></div><ul class="tab_header"><li ng-repeat="tab in tabs track by $index" class="tab" ng-class="{active:isActiveTab(tab)}" ng-click="onClickTab(tab)" use-theme color="\'true\'">{{tab.title | translate}}<div class="indicator" use-theme negative="\'true\'"></div></li></ul><div class="tab_container share_credential" ng-show="currentTab"><div ng-include="currentTab.url"></div><button ng-click="applyShare()" ng-disabled="share_settings.linkSharing.enabled === false && share_settings.credentialSharedWithUserAndGroup.length === 0">{{ \'share\' | translate}}</button> <button ng-click="cancel()">{{ \'cancel\' | translate}}</button> <button class="btn btn-danger" ng-disabled="!storedCredential.shared_key" ng-click="unshareCredential(storedCredential)">{{ \'unshare\' | translate}}</button></div></div>');
+    '<div id="passman-controls"><div class="actions creatable"><div class="breadcrumb"><div class="crumb svg ui-droppable" data-dir="/"><a ng-click="logout()"><i class="fa fa-home"></i></a></div><div class="crumb svg" data-dir="/Test"><a ng-click="cancel()">{{ active_vault.name }}</a></div><div class="crumb svg last" data-dir="/Test"><a ng-if="storedCredential.credential_id">{{ \'share.credential\' | translate }} {{ storedCredential.label }}</a></div></div></div></div><div class="app-sidebar-tabs"><nav class="app-sidebar-tabs__nav"><ul><li ng-repeat="tab in tabs track by $index" class="app-sidebar-tabs__tab" ng-class="isActiveTab(tab)? \'active\' : \'inactive\'" ng-click="onClickTab(tab)">{{ tab.title | translate }}</li></ul></nav><div class="tab_container share_credential" ng-show="currentTab"><div ng-include="currentTab.url"></div><button ng-click="applyShare()" ng-disabled="share_settings.linkSharing.enabled === false && share_settings.credentialSharedWithUserAndGroup.length === 0">{{ \'share\' | translate }}</button> <button ng-click="cancel()">{{ \'cancel\' | translate }}</button> <button class="btn btn-danger" ng-disabled="!storedCredential.shared_key" ng-click="unshareCredential(storedCredential)">{{ \'unshare\' | translate }}</button></div></div>');
 }]);
 
 angular.module('views/show_vault.html', []).run(['$templateCache', function ($templateCache) {

sass/bookmarklet.scss

@@ -75,10 +75,6 @@ header {
   font-size: 10px;
 }
 
-.tab_header {
-  margin: 0;
-}
-
 .angularjs-datetime-picker {
   z-index: 9999;
 }

sass/partials/tabs.scss

@@ -20,51 +20,47 @@
  *
  */
 
-.tab_header {
+.app-sidebar-tabs {
-  width: calc(100vw - 300px);
+  display: flex;
- // margin: 44px 0 0;
+  flex-direction: column;
-  margin: 0 0 0;
+  min-height: 0;
-  list-style: none;
+  flex: 1 1 100%;
-  padding: 0;
-  li.tab:first-child {
-    margin-left: 0;
 }
-  li.tab {
-    /*@include border-top-radius(2px);*/
-    float: left;
-    border-bottom-width: 0;
-    margin: 0;
-    padding: 10px 10px 10px 10px;
 
+.app-sidebar-tabs__nav ul {
+  display: flex;
+  justify-content: stretch;
+}
+
+.app-sidebar-tabs__tab.active {
+  color: var(--color-text-light);
+  border-bottom-color: var(--color-primary-element);
+  box-shadow: inset 0 -1px 0 var(--color-primary-element);
+  font-weight: bold;
+}
+
+.app-sidebar-tabs__tab:not(.active):hover, .app-sidebar-tabs__tab:not(.active):focus {
+  border-bottom-color: var(--color-background-darker);
+  box-shadow: inset 0 -1px 0 var(--color-background-darker);
+}
+
+.app-sidebar-tabs__tab:hover, .app-sidebar-tabs__tab:focus, .app-sidebar-tabs__tab:active, .app-sidebar-tabs__tab.active {
+  opacity: 1;
   cursor: pointer;
-    border-right: 1px solid #eee;
-    -webkit-transition: background-color 250ms linear;
-    -moz-transition: background-color 250ms linear;
-    -o-transition: background-color 250ms linear;
-    -ms-transition: background-color 250ms linear;
-    transition: background-color 250ms linear;
-    .indicator {
-      display: none;
-    }
 }
 
-  li.inactive {
+.app-sidebar-tabs__tab {
-    background-color: #fff !important;
+  position: relative;
-    color: unset !important;
+  display: block;
-  }
+  overflow: hidden;
-
+  padding: 10px 10px 10px 10px;
-  li.active {
+  transition: color var(--animation-quick), opacity var(--animation-quick), border-color var(--animation-quick);
-
+  text-align: center;
-    //position: relative;
+  white-space: nowrap;
-    .indicator {
+  text-overflow: ellipsis;
-      display: inline-block;
+  opacity: .7;
-      position: absolute;
+  color: var(--color-main-text);
-      height: 7px;
+  border-bottom: 1px solid var(--color-border);
-      left: 0;
-      right: 0;
-      bottom: -1px;
-    }
-  }
 }
 
 .tab_container {

templates/views/edit_credential.html

@@ -1,5 +1,4 @@
 <div id="passman-controls">
-
     <div class="breadcrumb">
         <div class="breadcrumb">
             <div class="crumb svg ui-droppable" data-dir="/">
@@ -17,19 +16,21 @@
 
     </div>
 </div>
-<div>
+<div class="app-sidebar-tabs">
-<ul class="tab_header">
+    <nav class="app-sidebar-tabs__nav">
-	<li ng-repeat="tab in tabs track by $index" class="tab"
+        <ul>
+            <li ng-repeat="tab in tabs track by $index" class="app-sidebar-tabs__tab"
                 ng-class="isActiveTab(tab)? 'active' : 'inactive'"
-		ng-click="onClickTab(tab)" use-theme color="'true'"
+                ng-click="onClickTab(tab)">{{ tab.title }}
-	>{{tab.title}}
-		<div class="indicator"  use-theme negative="'true'"></div>
             </li>
         </ul>
+    </nav>
 
     <div class="tab_container edit_credential" use-theme type="'border-top-color'">
         <div ng-include="currentTab.url"></div>
-	<button ng-click="saveCredential()" ng-disabled="saving"><i class="fa fa-spinner fa-spin" ng-show="saving"></i> {{ 'save' | translate}}</button>
+        <button ng-click="saveCredential()" ng-disabled="saving"><i class="fa fa-spinner fa-spin" ng-show="saving"></i>
+            {{ 'save' | translate }}
+        </button>
         <button ng-click="cancel()">{{ 'cancel' | translate }}</button>
     </div>
 </div>

templates/views/settings.html

@@ -14,15 +14,15 @@
     </div>
 </div>
 
-<div>
+<div class="app-sidebar-tabs">
-    <ul class="tab_header">
+    <nav class="app-sidebar-tabs__nav">
-        <li ng-repeat="tab in tabs track by $index" class="tab"
+        <ul>
+            <li ng-repeat="tab in tabs track by $index" class="app-sidebar-tabs__tab"
                 ng-class="isActiveTab(tab)? 'active' : 'inactive'"
-            ng-click="onClickTab(tab)" use-theme color="'true'">{{tab.title | translate}}
+                ng-click="onClickTab(tab)">{{ tab.title | translate }}
-            <div class="indicator" use-theme negative="'true'"></div>
             </li>
-
         </ul>
+    </nav>
 
     <div class="tab_container settings edit_credential" use-theme type="'border-top-color'">
         <div ng-include="currentTab.url"></div>

templates/views/share_credential.html

@@ -1,4 +1,3 @@
-<div class="main_list.share">
 <div id="passman-controls">
     <div class="actions creatable">
         <div class="breadcrumb">
@@ -16,19 +15,26 @@
         </div>
     </div>
 </div>
-	<ul class="tab_header">
+<div class="app-sidebar-tabs">
-		<li ng-repeat="tab in tabs track by $index" class="tab"
+    <nav class="app-sidebar-tabs__nav">
-			ng-class="{active:isActiveTab(tab)}"
+        <ul>
-			ng-click="onClickTab(tab)" use-theme color="'true'">{{tab.title | translate}}
+            <li ng-repeat="tab in tabs track by $index" class="app-sidebar-tabs__tab"
-			<div class="indicator"  use-theme negative="'true'"></div>
+                ng-class="isActiveTab(tab)? 'active' : 'inactive'"
+                ng-click="onClickTab(tab)">{{ tab.title | translate }}
             </li>
         </ul>
+    </nav>
+
     <div class="tab_container share_credential" ng-show="currentTab">
         <div ng-include="currentTab.url"></div>
 
-	<button ng-click="applyShare()" ng-disabled="share_settings.linkSharing.enabled === false && share_settings.credentialSharedWithUserAndGroup.length === 0">{{ 'share' | translate}}</button>
+        <button ng-click="applyShare()"
+                ng-disabled="share_settings.linkSharing.enabled === false && share_settings.credentialSharedWithUserAndGroup.length === 0">
+            {{ 'share' | translate }}
+        </button>
         <button ng-click="cancel()">{{ 'cancel' | translate }}</button>
-	<button class="btn btn-danger" ng-disabled="!storedCredential.shared_key" ng-click="unshareCredential(storedCredential)">{{ 'unshare' | translate}}</button>
+        <button class="btn btn-danger" ng-disabled="!storedCredential.shared_key"
+                ng-click="unshareCredential(storedCredential)">{{ 'unshare' | translate }}
+        </button>
     </div>
 </div>
-