clipperz/password-manager
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Updated edit UI for keeping save/cancel buttons on the bottom of the screen

Browse Source
This commit is contained in:
Giulio Cesare Solaroli 2015-10-01 16:40:05 +02:00
parent 02d4fa0e93
commit 73165361d4
5 changed files with 82 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/delta/css/clipperz.css
View File

@ -1221,11 +1221,28 @@ div.cardContent {
height: 48px;
line-height: 48px; }
.cardDetailToolbar.edit {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-moz-order: 1;
-ms-flex-order: 1;
order: 1;
-webkit-transform: translate3d(0, 0, 0); }
.cardDetailToolbar.edit li.save {
cursor: default; }
cursor: default;
background-color: #55aa55; }
.cardDetailToolbar.edit li.cancel {
background-color: #666666; }
.cardDetailToolbar.edit li.cancel:hover {
background-color: #444444; }
.cardDetailToolbar.edit.hasPendingChanges li.save {
cursor: pointer; }
cursor: pointer;
background-color: #22aa22; }
.cardDetailToolbar.edit.hasPendingChanges li.save:hover {
background-color: #1a801a; }
.cardDetailToolbar.edit.hasPendingChanges li.cancel {
background-color: #aa2222; }
.cardDetailToolbar.edit.hasPendingChanges li.cancel:hover {
background-color: #dd1111; }
.cardDetailToolbar.commands > div {
display: -webkit-box;
display: -webkit-flex;
@ -3235,6 +3252,17 @@ div.cardList.narrow {
#cardDetailPage .edit .cardDetailToolbar, .cardDetail .edit .cardDetailToolbar {
background-color: #1863a1;
color: white; }
#cardDetailPage .edit .cardDetailToolbar.narrow, .cardDetail .edit .cardDetailToolbar.narrow {
-webkit-transition: height 2.5s ease-in;
-moz-transition: height 2.5s ease-in;
-o-transition: height 2.5s ease-in;
-ms-transition: height 2.5s ease-in;
transition: height 2.5s ease-in; }
#cardDetailPage .edit .cardDetailToolbar.narrow.commands, .cardDetail .edit .cardDetailToolbar.narrow.commands {
height: 12px; }
#cardDetailPage .edit .cardDetailToolbar.narrow.commands div, .cardDetail .edit .cardDetailToolbar.narrow.commands div {
display: none;
visibility: hidden; }
#cardDetailPage .edit .cardField, .cardDetail .edit .cardField {
border-top: 1px solid #eee; }
#cardDetailPage .edit .cardField:last-child, .cardDetail .edit .cardField:last-child {
@ -3274,6 +3302,10 @@ div.cardList.narrow {
vertical-align: bottom;
padding-left: 17px; }
.edit .cardDetailToolbar.commands div, .edit .cardDetailToolbar.commands ul {
display: none;
visibility: hidden; }
.cardDetailToolbar.edit li {
font-weight: 100; }
.cardDetailToolbar.edit li:hover {

2
frontend/delta/css/clipperz.css.map
View File

File diff suppressed because one or more lines are too long

1
frontend/delta/js/Clipperz/PM/UI/Components/Cards/Edit.js
View File

@ -611,6 +611,7 @@ console.log("DROP"); //, anEvent);
return React.DOM.div({'className':'editWrapper'}, [
this.props['showGlobalMask'] ? null : React.DOM.div({'className':'mask'}),
React.DOM.div({'className':Clipperz.PM.UI.Components.classNames(classes)},[
Clipperz.PM.UI.Components.Cards.CommandToolbar(this.props),
Clipperz.PM.UI.Components.Cards.EditToolbar(this.props),
React.DOM.div({'className':'content'}, [
this.renderLabel(this.props['label']),

23
frontend/delta/scss/core/layout.scss
View File

@ -512,15 +512,38 @@ div.cardContent {
line-height: $mainCardToolbarHeight;
&.edit {
@include order(1);
@include chromeFix();
li.save {
cursor: default;
background-color: #55aa55;
}
li.cancel {
background-color: #666666;
&:hover {
background-color: #444444;
};
}
&.hasPendingChanges {
li.save {
cursor: pointer;
background-color: #22aa22;
&:hover {
background-color: #1a801a;
};
}
li.cancel {
background-color: #aa2222;
&:hover {
background-color: #dd1111;
};
}
}
}

24
frontend/delta/scss/style/card.scss
View File

@ -267,7 +267,18 @@ $cardViewBasePadding: 10px;
background-color: $cardToolbarBackgroundColor;
color: white;
// box-shadow: inset 2px 0 6px 0 rgba(0, 0, 0, 0.1);
&.narrow {
@include transition(height, 2.5s, ease-in);
&.commands {
height: 12px;
div {
display: none;
visibility: hidden;
}
}
}
}
.cardField {
@ -316,7 +327,16 @@ $cardViewBasePadding: 10px;
.edit {
.cardDetailToolbar {
&.commands {
div, ul {
display: none;
visibility: hidden;
}
}
}
}
.cardDetailToolbar {
&.edit {