rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

ui updates

Browse Source
This commit is contained in:
Mo Bitar
2016-12-25 15:44:40 -06:00
parent b9c1406bcf
commit a091323faf
10 changed files with 188 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/stylesheets/app/_common.scss
View File

@@ -30,8 +30,8 @@
} }
.nt-dropdown-menu.dark { .nt-dropdown-menu.dark {
background-color: $dark-gray; background-color: $selection-color;
color: white; color: $selected-text-color;
li { li {
&:hover { &:hover {
@@ -42,12 +42,12 @@
} }
} }
a { a {
color: white !important; color: $selected-text-color !important;
height: 100%; height: 100%;
font-weight: bold !important; font-weight: bold !important;
} }
.text { .text {
color: white; color: $selected-text-color;
} }
} }
} }

14
app/assets/stylesheets/app/_editor.scss
View File

@@ -14,7 +14,7 @@
border-bottom: none !important; border-bottom: none !important;
} }
$heading-height: 100px; $heading-height: 90px;
.editor-heading { .editor-heading {
@@ -24,7 +24,7 @@
padding-top: 0px; padding-top: 0px;
background-color: white; background-color: white;
min-height: 100px; min-height: $heading-height;
width: 100%; width: 100%;
padding-right: 10px; padding-right: 10px;
@@ -138,17 +138,17 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0px; bottom: 0px;
background-color: $dark-gray; background-color: #f1f1f1;
color: white; color: $selected-text-color;
padding-top: 8px; padding-top: 5px;
height: 36px; height: 28px;
cursor: default; cursor: default;
ul { ul {
li { li {
text-align: left; text-align: left;
a { a {
font-size: 14px; font-size: 13px;
font-weight: bold; font-weight: bold;
padding: 0 0; padding: 0 0;
} }

104
app/assets/stylesheets/app/_header.scss
View File

@@ -1,14 +1,13 @@
.header { .header {
position: relative; position: relative;
width: 100%; width: 100%;
background-color: $bg-color; background-color: #f1f1f1;
height: $header-height; height: $header-height;
max-height: $header-height; max-height: $header-height;
z-index: 100; z-index: 100;
font-size: 14px; font-size: 10px;
color: $dark-gray; color: $dark-gray;
// padding-top: 5px; border-bottom: 1px solid #dddddd;
margin-top: 4px;
a { a {
color: $dark-gray; color: $dark-gray;
@@ -22,26 +21,6 @@
left: 0px; left: 0px;
right: 0px; right: 0px;
.header-name {
display: inline-block;
vertical-align: middle;
font-weight: bold;
font-size: 20px;
padding-top: 12px;
}
.tagline {
display: inline-block;
vertical-align: middle;
font-size: 14px;
font-weight: normal;
padding-left: 11px;
margin-left: 0px;
height: 22px;
margin-top: 2px;
}
} }
.panel-status-text { .panel-status-text {
@@ -51,14 +30,14 @@
} }
.menu { .menu {
// float: right;
float: right; margin-left: 15px;
padding-top: 5px; padding-top: 9px;
margin-top: 10px; margin-top: 0px;
color: black; color: black;
z-index: 1000; z-index: 1000;
margin-bottom: 0px; margin-bottom: 0px;
font-size: 18px; font-size: 12px;
.login-panel .login-input { .login-panel .login-input {
border-radius: 0px; border-radius: 0px;
@@ -66,37 +45,13 @@
.items { .items {
.advanced-brand {
font-size: 18px;
&.btn {
border-radius: 3px;
font-size: 14px;
}
font-weight: bold;
.n {
font-style: italic;
}
.advanced {
margin-left: -4px;
text-transform: uppercase;
font-style: normal;
}
.beta {
font-size: 7px;
font-style: normal;
}
}
.item { .item {
display: inline-block; display: inline-block;
margin-right: 7px; margin-right: 7px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
font-weight: bold;
a { a {
color: $dark-gray; color: $dark-gray;
@@ -114,6 +69,7 @@
max-height: 85vh; max-height: 85vh;
overflow: scroll; overflow: scroll;
background-color: white; background-color: white;
font-weight: normal;
.storage-text { .storage-text {
@@ -141,7 +97,6 @@
.item.account { .item.account {
.link-item { .link-item {
margin-bottom: 8px; margin-bottom: 8px;
a { a {
@@ -181,17 +136,18 @@
> .meta-container { > .meta-container {
display: block; display: block;
font-size: 10px;
} }
> .action-container { > .action-container {
font-size: 14px; font-size: 12px;
margin-top: 6px; margin-top: 6px;
.status-title { .status-title {
font-weight: bold; font-weight: bold;
} }
.subtext { .subtext {
font-size: 12px; font-size: 10px;
margin-top: 2px; margin-top: 2px;
} }
} }
@@ -222,14 +178,14 @@
.meta-container { .meta-container {
> .title { > .title {
font-size: 16px; font-size: 13px;
font-weight: bold; font-weight: bold;
} }
> .desc { > .desc {
font-size: 14px; font-size: 12px;
margin-top: 3px; margin-top: 3px;
line-height: 18px; // line-height: 18px;
} }
} }
} }
@@ -262,31 +218,3 @@
.account-menu { .account-menu {
width: 200px; width: 200px;
} }
.faq-panel {
width: 350px;
font-size: 16px;
z-index: 1000;
p {
font-size: 16px;
}
.faq-item {
margin-bottom: 22px;
}
.question {
margin-bottom: 12px;
}
.answer {
margin-top: 8px;
}
ul {
li {
margin-bottom: 10px;
}
}
}

24
app/assets/stylesheets/app/_main.scss
View File

@@ -1,6 +1,8 @@
$main-text-color: black; $main-text-color: black;
$secondary-text-color: rgba($main-text-color, 0.8); $secondary-text-color: rgba($main-text-color, 0.8);
$bg-color: #e3e3e3; $bg-color: #e3e3e3;
$selection-color: $bg-color;
$selected-text-color: black;
@mixin MQ-Small() { @mixin MQ-Small() {
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
@@ -99,14 +101,13 @@ p {
min-width: 900px; min-width: 900px;
} }
$header-height: 50px; $header-height: 35px;
.app-container { .app-container {
display: table; display: table;
background-color: $bg-color; background-color: $bg-color;
width: 100%; width: 100%;
height: calc(100% - #{$header-height}); height: calc(100% - #{$header-height});
padding: 15px;
padding-top: 0px; padding-top: 0px;
font-size: 0; font-size: 0;
margin-top: 0; margin-top: 0;
@@ -136,7 +137,6 @@ $section-header-height: 70px;
} }
.section { .section {
padding: 8px;
padding-bottom: 0px; padding-bottom: 0px;
display: block; display: block;
@@ -159,22 +159,30 @@ $section-header-height: 70px;
padding: 20px; padding: 20px;
height: $section-header-height; height: $section-header-height;
font-weight: bold; font-weight: bold;
border-bottom: 1px solid $bg-color; font-size: 14px;
> .title { > .title {
float: left; float: left;
text-transform: uppercase;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 85%; width: 80%;
overflow: hidden; overflow: hidden;
} }
> .add-button { > .add-button {
float: right; float: right;
font-size: 30px; font-size: 22px;
margin-top: -10px; width: 30px;
height: 30px;
cursor: pointer; cursor: pointer;
background-color: #e9e9e9;
border-radius: 4px;
font-weight: normal;
text-align: center;
&:hover {
background-color: rgba(#e9e9e9, 0.8);
}
} }
} }
} }

16
app/assets/stylesheets/app/_mostrap.scss
View File

@@ -101,7 +101,7 @@ $screen-md-max: ($screen-lg-min - 1) !default;
@media (min-width: 768px) { @media (min-width: 768px) {
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
margin-left: -15px; // margin-left: -15px;
} }
} }
@@ -115,14 +115,14 @@ $screen-md-max: ($screen-lg-min - 1) !default;
@media (min-width: 768px) { @media (min-width: 768px) {
.container > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-header, .container-fluid > .navbar-collapse { .container > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-header, .container-fluid > .navbar-collapse {
margin-right: 0; // margin-right: 0;
margin-left: 0; // margin-left: 0;
} }
} }
.container > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-header, .container-fluid > .navbar-collapse { .container > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-header, .container-fluid > .navbar-collapse {
margin-right: -15px; // margin-right: -15px;
margin-left: -15px; // margin-left: -15px;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@@ -157,7 +157,7 @@ $screen-md-max: ($screen-lg-min - 1) !default;
@media (min-width: 768px) { @media (min-width: 768px) {
.navbar-right { .navbar-right {
float: right !important; float: right !important;
margin-right: -15px; // margin-right: -15px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@@ -298,6 +298,10 @@ button:focus {outline:0;}
left: -50px; left: -50px;
} }
.panel-right {
left: 0px;
}
.panel-centered { .panel-centered {
position: relative; position: relative;
width: 400px; width: 400px;

19
app/assets/stylesheets/app/_notes.scss
View File

@@ -1,9 +1,14 @@
.notes { .notes {
width: 28%; width: 30%;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
.notes-title-bar { .notes-title-bar {
color: #ff6551; color: rgba(black, 0.40);
height: 136px !important; padding-top: 16px !important;
height: 130px !important;
font-weight: normal !important;
font-size: 18px !important;
} }
.tag-menu-bar { .tag-menu-bar {
@@ -16,7 +21,7 @@
.filter-section { .filter-section {
clear: left; clear: left;
height: 32px; height: 32px;
margin-top: 14px; margin-top: 20px;
.filter-bar { .filter-bar {
background-color: $bg-color; background-color: $bg-color;
@@ -47,6 +52,8 @@
} }
} }
$note-selection-color: #2960ec;
.note { .note {
width: 100%; width: 100%;
padding: 15px; padding: 15px;
@@ -66,12 +73,12 @@
} }
&.selected { &.selected {
background-color: #ff6551; background-color: $note-selection-color;
color: white; color: white;
} }
&:hover:not(.selected) { &:hover:not(.selected) {
background-color: rgba(#ff6551, 0.8); background-color: $note-selection-color;
color: white; color: white;
} }
} }

54
app/assets/stylesheets/app/_tags.scss
View File

@@ -1,18 +1,37 @@
.tags { .tags {
width: 22%; width: 20%;
background-color: #ebebeb;
.tags-title-bar { .tags-title-bar {
color: #0707ff; color: black;
height: 55px !important;
padding-left: 12px !important;
padding-right: 12px !important;
font-size: 12px !important;
color: rgba(black, 0.8);
}
.content {
background-color: #ebebeb !important;
}
.tag-add-button {
margin-top: -6px;
background-color: #d7d7d7 !important;
&:hover {
background-color: rgba(#d7d7d7, 0.8) !important;
}
} }
.tag { .tag {
height: 50px; height: 30px;
border-bottom: 1px solid $bg-color; padding: 5px 12px;
padding: 12px;
cursor: pointer; cursor: pointer;
background-color: white;
transition: height .1s ease-in-out; transition: height .1s ease-in-out;
position: relative; position: relative;
font-size: 14px;
> .icon { > .icon {
float: left; float: left;
@@ -35,33 +54,36 @@
> .count { > .count {
position: absolute; position: absolute;
right: 17px; right: 17px;
padding-top: 3px; padding-top: 1px;
font-weight: bold;
} }
$tags-selected-color: #bdbdbd;
&.selected { &.selected {
background-color: #5151ff; background-color: $tags-selected-color;
color: white; color: $selected-text-color;
> .title { > .title {
color: white; color: $selected-text-color;
cursor: text; cursor: text;
} }
} }
/* When a note is dragged over tag */ /* When a note is dragged over tag */
&.over { &.over {
background-color: rgba(#5151ff, 0.8); background-color: $tags-selected-color;
color: white; color: $selected-text-color;
border: 2px dashed white; border: 2px dashed white;
> .title { > .title {
color: white; color: $selected-text-color;
} }
} }
&:hover:not(.selected) { &:hover:not(.selected) {
background-color: rgba(#5151ff, 0.8); background-color: $tags-selected-color;
color: white; color: $selected-text-color;
> .title { > .title {
color: white; color: $selected-text-color;
} }
} }
} }

2
app/assets/stylesheets/frontend.css.scss
View File

@@ -1,8 +1,8 @@
$dark-gray: #2e2e2e; $dark-gray: #2e2e2e;
@import "app/mostrap"; @import "app/mostrap";
@import "app/common";
@import "app/main"; @import "app/main";
@import "app/common";
@import "app/header"; @import "app/header";
@import "app/tags"; @import "app/tags";
@import "app/notes"; @import "app/notes";

19
app/assets/templates/frontend/header.html.haml
View File

@@ -1,17 +1,12 @@
.header .header
.header-content .header-content
%nav.animated-fast.fadeInDown .menu
%a.navbar-brand{"ui-sref" => "home"}
.header-name
Standard Notes
.menu.navbar-text.navbar-right
.items .items
.item.account .item.account
%button.btn.dark-button.advanced-brand{"ng-click" => "ctrl.accountMenuPressed()"} %div{"ng-click" => "ctrl.accountMenuPressed()"}
%div{"ng-if" => "ctrl.user.email"} {{ctrl.user.email}} %div{"ng-if" => "ctrl.user.email"} Account
%div{"ng-if" => "!ctrl.user.email"} Sign in or Register %div{"ng-if" => "!ctrl.user.email"} Sign in or Register
.panel.panel-default.account-panel{"ng-if" => "ctrl.showAccountMenu"} .panel.panel-default.account-panel.panel-right{"ng-if" => "ctrl.showAccountMenu"}
.panel-body .panel-body
.account-items .account-items
.account-item.registration-login{"ng-if" => "!ctrl.user.email"} .account-item.registration-login{"ng-if" => "!ctrl.user.email"}
@@ -45,8 +40,6 @@
{{ctrl.resetData.response}} {{ctrl.resetData.response}}
.account-item{"ng-if" => "ctrl.user.email"} .account-item{"ng-if" => "ctrl.user.email"}
.icon-container
%img.icon{"lazy-img" => "assets/encryption.png"}
.meta-container .meta-container
.title Local Encryption .title Local Encryption
.desc Encrypt notes locally before sending to server. Neither the server owner nor an intruder can decrypt your locally encrypted notes. .desc Encrypt notes locally before sending to server. Neither the server owner nor an intruder can decrypt your locally encrypted notes.
@@ -54,8 +47,6 @@
%span.status-title Status: enabled. %span.status-title Status: enabled.
{{ctrl.encryptionStatusForNotes()}} (shared notes not encrypted) {{ctrl.encryptionStatusForNotes()}} (shared notes not encrypted)
.account-item{"ng-if" => "ctrl.user.email"} .account-item{"ng-if" => "ctrl.user.email"}
.icon-container
%img.icon.archive{"lazy-img" => "assets/archive.png"}
.meta-container .meta-container
.title Data Archives .title Data Archives
.desc Note: data archives that you download using the link below are decrypted before save. You should take care to store them in a safe location. .desc Note: data archives that you download using the link below are decrypted before save. You should take care to store them in a safe location.
@@ -96,4 +87,4 @@
.item .item
%a.menuItem{"href" => "https://standardnotes.org", "target" => "_blank"} %a.menuItem{"href" => "https://standardnotes.org", "target" => "_blank"}
about Help

2
app/assets/templates/frontend/tags.html.haml
View File

@@ -2,7 +2,7 @@
.content .content
.section-title-bar.tags-title-bar .section-title-bar.tags-title-bar
.title Tags .title Tags
.add-button{"ng-click" => "ctrl.clickedAddNewTag()"} + .add-button.tag-add-button{"ng-click" => "ctrl.clickedAddNewTag()"} +
{{ctrl.test}} {{ctrl.test}}
.tag{"ng-if" => "ctrl.allTag", "ng-click" => "ctrl.selectTag(ctrl.allTag)", "ng-class" => "{'selected' : ctrl.selectedTag == ctrl.allTag}", .tag{"ng-if" => "ctrl.allTag", "ng-click" => "ctrl.selectTag(ctrl.allTag)", "ng-class" => "{'selected' : ctrl.selectedTag == ctrl.allTag}",
"droppable" => true, "drop" => "ctrl.handleDrop", "tag" => "ctrl.allTag"} "droppable" => true, "drop" => "ctrl.handleDrop", "tag" => "ctrl.allTag"}