redesign tab header

Signed-off-by: binsky <timo@binsky.org>
This commit is contained in:
binsky 2021-08-17 15:47:27 +02:00
parent 28d7b683f4
commit cb0ae9374f
10 changed files with 159 additions and 159 deletions

View file

@ -140,38 +140,42 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
.tab_header {
width: calc(100vw - 300px);
margin: 0 0 0;
list-style: none;
padding: 0; }
.tab_header li.tab:first-child {
margin-left: 0; }
.tab_header li.tab {
/*@include border-top-radius(2px);*/
float: left;
border-bottom-width: 0;
margin: 0;
padding: 10px 10px 10px 10px;
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; }
.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; }
.app-sidebar-tabs {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1 1 100%; }
.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; }
.app-sidebar-tabs__tab {
position: relative;
display: block;
overflow: hidden;
padding: 10px 10px 10px 10px;
transition: color var(--animation-quick), opacity var(--animation-quick), border-color var(--animation-quick);
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
opacity: .7;
color: var(--color-main-text);
border-bottom: 1px solid var(--color-border); }
.tab_container {
border: 1px solid #eee;

File diff suppressed because one or more lines are too long

View file

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

View file

@ -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"

View file

@ -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) {

View file

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

View file

@ -20,51 +20,47 @@
*
*/
.tab_header {
width: calc(100vw - 300px);
// margin: 44px 0 0;
margin: 0 0 0;
list-style: none;
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 {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1 1 100%;
}
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;
}
}
.app-sidebar-tabs__nav ul {
display: flex;
justify-content: stretch;
}
li.inactive {
background-color: #fff !important;
color: unset !important;
}
.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;
}
li.active {
.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);
}
//position: relative;
.indicator {
display: inline-block;
position: absolute;
height: 7px;
left: 0;
right: 0;
bottom: -1px;
}
}
.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;
transition: color var(--animation-quick), opacity var(--animation-quick), border-color var(--animation-quick);
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
opacity: .7;
color: var(--color-main-text);
border-bottom: 1px solid var(--color-border);
}
.tab_container {

View file

@ -1,35 +1,36 @@
<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 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>
</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 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>

View file

@ -5,26 +5,26 @@
<a ng-click="logout()"><i class="fa fa-home"></i></a>
</div>
<div class="crumb svg">
<a ng-click="cancel()">{{active_vault.name}}</a>
<a ng-click="cancel()">{{ active_vault.name }}</a>
</div>
<div class="crumb svg last">
<a>{{ 'settings' | translate}}</a>
<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="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>
</div>

View file

@ -1,34 +1,40 @@
<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 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>
<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>
<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 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>