nextcloud/passman
1
1
Fork 0
mirror of https://github.com/nextcloud/passman.git synced 2025-12-09 21:26:00 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix tab theming

Browse source
This commit is contained in:
brantje 2016-10-07 16:29:51 +02:00
parent e8c9e59419
commit 73b114a3ff
No known key found for this signature in database
GPG key ID: 5FF1D117F918687F
7 changed files with 86 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
css/app.css
View file

@ -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,6 +336,8 @@
@media all and (min-width: 78em) {
#app-content #app-content-wrapper .grid-view .credential {
width: 20%; } }
#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"] {

2
css/app.css.map
View file

File diff suppressed because one or more lines are too long

13
js/app/directives/use-theme.js
View file

@ -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));
}
}

2
js/templates.js
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="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) {

1
sass/credentials.scss
View file

@ -209,6 +209,7 @@
}
.edit_credential {
padding-top: 10px;
label {
display: block;
}

14
sass/partials/tabs.scss
View file

@ -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;
}
}
}

5
templates/views/edit_credential.html
View file

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