mirror of
https://github.com/nextcloud/passman.git
synced 2024-12-27 01:52:56 +08:00
Fix tab theming
This commit is contained in:
brantje
parent
e8c9e59419
commit
73b114a3ff
7 changed files with 86 additions and 58 deletions
107
css/app.css
107
css/app.css
|
|
@ -33,7 +33,6 @@
|
|||
border-bottom-width: 0;
|
||||
margin: 0;
|
||||
padding: 10px 10px 10px 10px;
|
||||
color: #e0dddd;
|
||||
cursor: pointer;
|
||||
border-right: 1px solid #eee;
|
||||
-webkit-transition: background-color 250ms linear;
|
||||
|
|
@ -41,8 +40,18 @@
|
|||
-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.active {
|
||||
color: #fff; }
|
||||
color: #fff;
|
||||
position: relative; }
|
||||
.tab_header li.active .indicator {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
height: 7px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -1px; }
|
||||
|
||||
.tab_container {
|
||||
border: 1px solid;
|
||||
|
|
@ -327,53 +336,55 @@
|
|||
@media all and (min-width: 78em) {
|
||||
#app-content #app-content-wrapper .grid-view .credential {
|
||||
width: 20%; } }
|
||||
#app-content #app-content-wrapper .edit_credential label {
|
||||
display: block; }
|
||||
#app-content #app-content-wrapper .edit_credential input[type="text"], #app-content #app-content-wrapper .edit_credential input[type="password"] {
|
||||
width: 100%; }
|
||||
#app-content #app-content-wrapper .edit_credential .tags {
|
||||
float: left; }
|
||||
#app-content #app-content-wrapper .edit_credential .tags .tag {
|
||||
background-color: rgba(240, 240, 240, 0.9);
|
||||
padding: 4px;
|
||||
font-size: 11px; }
|
||||
#app-content #app-content-wrapper .edit_credential tags-input .tags {
|
||||
width: 100%; }
|
||||
#app-content #app-content-wrapper .edit_credential .credential_textarea {
|
||||
width: 100%;
|
||||
height: 100px; }
|
||||
#app-content #app-content-wrapper .edit_credential .password_settings label {
|
||||
overflow: hidden; }
|
||||
#app-content #app-content-wrapper .edit_credential .password_settings label input[type="checkbox"] {
|
||||
width: auto !important;
|
||||
float: left; }
|
||||
#app-content #app-content-wrapper .edit_credential .password_settings label .label {
|
||||
float: left; }
|
||||
#app-content #app-content-wrapper .edit_credential .password_settings label .label.sm {
|
||||
font-size: 12px; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields, #app-content #app-content-wrapper .edit_credential .files {
|
||||
margin-top: 10px; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields table, #app-content #app-content-wrapper .edit_credential .files table {
|
||||
#app-content #app-content-wrapper .edit_credential {
|
||||
padding-top: 10px; }
|
||||
#app-content #app-content-wrapper .edit_credential label {
|
||||
display: block; }
|
||||
#app-content #app-content-wrapper .edit_credential input[type="text"], #app-content #app-content-wrapper .edit_credential input[type="password"] {
|
||||
width: 100%; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields table thead th, #app-content #app-content-wrapper .edit_credential .files table thead th {
|
||||
color: #fff; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields table thead th.field_actions, #app-content #app-content-wrapper .edit_credential .files table thead th.field_actions {
|
||||
width: 15%; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields table tr:hover, #app-content #app-content-wrapper .edit_credential .files table tr:hover {
|
||||
background-color: transparent; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields table tr td.field_actions, #app-content #app-content-wrapper .edit_credential .files table tr td.field_actions {
|
||||
font-size: 13px;
|
||||
width: 15%; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields table tr td.field_actions i, #app-content #app-content-wrapper .edit_credential .files table tr td.field_actions i {
|
||||
cursor: pointer; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields table tr td, #app-content #app-content-wrapper .edit_credential .custom_fields table tr th, #app-content #app-content-wrapper .edit_credential .files table tr td, #app-content #app-content-wrapper .edit_credential .files table tr th {
|
||||
width: 20%;
|
||||
padding: 5px; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields table tr td .editable-has-buttons.editable-input, #app-content #app-content-wrapper .edit_credential .custom_fields table tr th .editable-has-buttons.editable-input, #app-content #app-content-wrapper .edit_credential .files table tr td .editable-has-buttons.editable-input, #app-content #app-content-wrapper .edit_credential .files table tr th .editable-has-buttons.editable-input {
|
||||
width: 55%; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields table tr td, #app-content #app-content-wrapper .edit_credential .files table tr td {
|
||||
height: 50px;
|
||||
vertical-align: middle; }
|
||||
#app-content #app-content-wrapper .edit_credential .tags {
|
||||
float: left; }
|
||||
#app-content #app-content-wrapper .edit_credential .tags .tag {
|
||||
background-color: rgba(240, 240, 240, 0.9);
|
||||
padding: 4px;
|
||||
font-size: 11px; }
|
||||
#app-content #app-content-wrapper .edit_credential tags-input .tags {
|
||||
width: 100%; }
|
||||
#app-content #app-content-wrapper .edit_credential .credential_textarea {
|
||||
width: 100%;
|
||||
height: 100px; }
|
||||
#app-content #app-content-wrapper .edit_credential .password_settings label {
|
||||
overflow: hidden; }
|
||||
#app-content #app-content-wrapper .edit_credential .password_settings label input[type="checkbox"] {
|
||||
width: auto !important;
|
||||
float: left; }
|
||||
#app-content #app-content-wrapper .edit_credential .password_settings label .label {
|
||||
float: left; }
|
||||
#app-content #app-content-wrapper .edit_credential .password_settings label .label.sm {
|
||||
font-size: 12px; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields, #app-content #app-content-wrapper .edit_credential .files {
|
||||
margin-top: 10px; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields table, #app-content #app-content-wrapper .edit_credential .files table {
|
||||
width: 100%; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields table thead th, #app-content #app-content-wrapper .edit_credential .files table thead th {
|
||||
color: #fff; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields table thead th.field_actions, #app-content #app-content-wrapper .edit_credential .files table thead th.field_actions {
|
||||
width: 15%; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields table tr:hover, #app-content #app-content-wrapper .edit_credential .files table tr:hover {
|
||||
background-color: transparent; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields table tr td.field_actions, #app-content #app-content-wrapper .edit_credential .files table tr td.field_actions {
|
||||
font-size: 13px;
|
||||
width: 15%; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields table tr td.field_actions i, #app-content #app-content-wrapper .edit_credential .files table tr td.field_actions i {
|
||||
cursor: pointer; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields table tr td, #app-content #app-content-wrapper .edit_credential .custom_fields table tr th, #app-content #app-content-wrapper .edit_credential .files table tr td, #app-content #app-content-wrapper .edit_credential .files table tr th {
|
||||
width: 20%;
|
||||
padding: 5px; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields table tr td .editable-has-buttons.editable-input, #app-content #app-content-wrapper .edit_credential .custom_fields table tr th .editable-has-buttons.editable-input, #app-content #app-content-wrapper .edit_credential .files table tr td .editable-has-buttons.editable-input, #app-content #app-content-wrapper .edit_credential .files table tr th .editable-has-buttons.editable-input {
|
||||
width: 55%; }
|
||||
#app-content #app-content-wrapper .edit_credential .custom_fields table tr td, #app-content #app-content-wrapper .edit_credential .files table tr td {
|
||||
height: 50px;
|
||||
vertical-align: middle; }
|
||||
#app-content #app-content-wrapper .app_sidebar {
|
||||
padding: 10px;
|
||||
overflow-y: auto; }
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -23,18 +23,21 @@ angular.module('passmanApp')
|
|||
restrict: 'A',
|
||||
scope:{
|
||||
type: '=type',
|
||||
color: '='
|
||||
color: '=',
|
||||
negative: '='
|
||||
},
|
||||
link: function (scope, el, attr, ctrl) {
|
||||
var _color = $('#header').css('background-color');
|
||||
|
||||
var _bg = _color;
|
||||
if(scope.negative){
|
||||
_bg = invertColor(_bg)
|
||||
}
|
||||
if(!scope.type) {
|
||||
$(el).css('background-color', _color);
|
||||
$(el).css('background-color', _bg);
|
||||
} else {
|
||||
$(el).css(scope.type, _color);
|
||||
$(el).css(scope.type, _bg);
|
||||
}
|
||||
if(scope.color){
|
||||
|
||||
$(el).css('color', invertColor(_color));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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="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">Edit credential "{{storedCredential.label}}"</a> <a ng-if="!storedCredential.credential_id">Create new credential</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>{{tab.title}}</li></ul><div class="tab_container edit_credential"><div ng-include="currentTab.url"></div><button ng-click="saveCredential()">Save</button> <button ng-click="cancel()">Cancel</button></div>');
|
||||
'<div id="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">Edit credential "{{storedCredential.label}}"</a> <a ng-if="!storedCredential.credential_id">Create new credential</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}}<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()">Save</button> <button ng-click="cancel()">Cancel</button></div>');
|
||||
}]);
|
||||
|
||||
angular.module('views/partials/forms/edit_credential/basics.html', []).run(['$templateCache', function($templateCache) {
|
||||
|
|
|
|||
|
|
@ -209,6 +209,7 @@
|
|||
}
|
||||
|
||||
.edit_credential {
|
||||
padding-top: 10px;
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
border-bottom-width: 0;
|
||||
margin: 0;
|
||||
padding: 10px 10px 10px 10px;
|
||||
color: #e0dddd;
|
||||
|
||||
cursor: pointer;
|
||||
border-right: 1px solid #eee;
|
||||
-webkit-transition: background-color 250ms linear;
|
||||
|
|
@ -19,9 +19,21 @@
|
|||
-o-transition: background-color 250ms linear;
|
||||
-ms-transition: background-color 250ms linear;
|
||||
transition: background-color 250ms linear;
|
||||
.indicator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
li.active {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
.indicator {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
height: 7px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,12 +19,13 @@
|
|||
<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
|
||||
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">
|
||||
<div class="tab_container edit_credential" use-theme type="'border-top-color'">
|
||||
<div ng-include="currentTab.url"></div>
|
||||
<button ng-click="saveCredential()">Save</button>
|
||||
<button ng-click="cancel()">Cancel</button>
|
||||
|
|
|
|||
Loading…
Reference in a new issue