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 {
background-color: $dark-gray;
color: white;
background-color: $selection-color;
color: $selected-text-color;
li {
&:hover {
@@ -42,12 +42,12 @@
}
}
a {
color: white !important;
color: $selected-text-color !important;
height: 100%;
font-weight: bold !important;
}
.text {
color: white;
color: $selected-text-color;
}
}
}

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

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

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

@@ -1,14 +1,13 @@
.header {
position: relative;
width: 100%;
background-color: $bg-color;
background-color: #f1f1f1;
height: $header-height;
max-height: $header-height;
z-index: 100;
font-size: 14px;
font-size: 10px;
color: $dark-gray;
// padding-top: 5px;
margin-top: 4px;
border-bottom: 1px solid #dddddd;
a {
color: $dark-gray;
@@ -22,26 +21,6 @@
left: 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 {
@@ -51,14 +30,14 @@
}
.menu {
float: right;
padding-top: 5px;
margin-top: 10px;
// float: right;
margin-left: 15px;
padding-top: 9px;
margin-top: 0px;
color: black;
z-index: 1000;
margin-bottom: 0px;
font-size: 18px;
font-size: 12px;
.login-panel .login-input {
border-radius: 0px;
@@ -66,37 +45,13 @@
.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 {
display: inline-block;
margin-right: 7px;
position: relative;
cursor: pointer;
font-weight: bold;
a {
color: $dark-gray;
@@ -114,6 +69,7 @@
max-height: 85vh;
overflow: scroll;
background-color: white;
font-weight: normal;
.storage-text {
@@ -141,7 +97,6 @@
.item.account {
.link-item {
margin-bottom: 8px;
a {
@@ -181,17 +136,18 @@
> .meta-container {
display: block;
font-size: 10px;
}
> .action-container {
font-size: 14px;
font-size: 12px;
margin-top: 6px;
.status-title {
font-weight: bold;
}
.subtext {
font-size: 12px;
font-size: 10px;
margin-top: 2px;
}
}
@@ -222,14 +178,14 @@
.meta-container {
> .title {
font-size: 16px;
font-size: 13px;
font-weight: bold;
}
> .desc {
font-size: 14px;
font-size: 12px;
margin-top: 3px;
line-height: 18px;
// line-height: 18px;
}
}
}
@@ -262,31 +218,3 @@
.account-menu {
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;
$secondary-text-color: rgba($main-text-color, 0.8);
$bg-color: #e3e3e3;
$selection-color: $bg-color;
$selected-text-color: black;
@mixin MQ-Small() {
@media (max-width: $screen-xs-max) {
@@ -99,14 +101,13 @@ p {
min-width: 900px;
}
$header-height: 50px;
$header-height: 35px;
.app-container {
display: table;
background-color: $bg-color;
width: 100%;
height: calc(100% - #{$header-height});
padding: 15px;
padding-top: 0px;
font-size: 0;
margin-top: 0;
@@ -136,7 +137,6 @@ $section-header-height: 70px;
}
.section {
padding: 8px;
padding-bottom: 0px;
display: block;
@@ -159,22 +159,30 @@ $section-header-height: 70px;
padding: 20px;
height: $section-header-height;
font-weight: bold;
border-bottom: 1px solid $bg-color;
font-size: 14px;
> .title {
float: left;
text-transform: uppercase;
white-space: nowrap;
text-overflow: ellipsis;
width: 85%;
width: 80%;
overflow: hidden;
}
> .add-button {
float: right;
font-size: 30px;
margin-top: -10px;
font-size: 22px;
width: 30px;
height: 30px;
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) {
.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) {
.container > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-header, .container-fluid > .navbar-collapse {
margin-right: 0;
margin-left: 0;
// margin-right: 0;
// margin-left: 0;
}
}
.container > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-header, .container-fluid > .navbar-collapse {
margin-right: -15px;
margin-left: -15px;
// margin-right: -15px;
// margin-left: -15px;
}
@media (min-width: 768px) {
@@ -157,7 +157,7 @@ $screen-md-max: ($screen-lg-min - 1) !default;
@media (min-width: 768px) {
.navbar-right {
float: right !important;
margin-right: -15px;
// margin-right: -15px;
}
}
@media (min-width: 768px) {
@@ -298,6 +298,10 @@ button:focus {outline:0;}
left: -50px;
}
.panel-right {
left: 0px;
}
.panel-centered {
position: relative;
width: 400px;

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

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

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

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

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

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

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

@@ -1,99 +1,90 @@
.header
.header-content
%nav.animated-fast.fadeInDown
%a.navbar-brand{"ui-sref" => "home"}
.header-name
Standard Notes
.menu
.items
.item.account
%div{"ng-click" => "ctrl.accountMenuPressed()"}
%div{"ng-if" => "ctrl.user.email"} Account
%div{"ng-if" => "!ctrl.user.email"} Sign in or Register
.panel.panel-default.account-panel.panel-right{"ng-if" => "ctrl.showAccountMenu"}
.panel-body
.account-items
.account-item.registration-login{"ng-if" => "!ctrl.user.email"}
.meta-container
.title Sign in or Register
.desc
%form.account-form{'name' => "loginForm"}
.form-tag.has-feedback
%input.form-control.login-input{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'ctrl.loginData.email'}
.form-tag.has-feedback
%input.form-control.login-input{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'ctrl.loginData.user_password'}
.checkbox{"ng-if" => "ctrl.hasLocalData()"}
%label
%input{"type" => "checkbox", "ng-model" => "ctrl.user.shouldMerge", "ng-bind" => "true", "ng-change" => "ctrl.mergeLocalChanged()"}
Merge local notes
%button.btn.dark-button.half-button{"ng-click" => "ctrl.loginSubmitPressed()", "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
%span Sign In
%button.btn.dark-button.half-button{"ng-click" => "ctrl.submitRegistrationForm()", "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
%span Register
%br
.login-forgot
%a.btn.btn-link{"ng-click" => "ctrl.showResetForm = !ctrl.showResetForm"} I forgot my password
.panel-status-text{"ng-if" => "ctrl.loginData.status", "style" => "font-size: 14px;"} {{ctrl.loginData.status}}
.menu.navbar-text.navbar-right
.items
.item.account
%button.btn.dark-button.advanced-brand{"ng-click" => "ctrl.accountMenuPressed()"}
%div{"ng-if" => "ctrl.user.email"} {{ctrl.user.email}}
%div{"ng-if" => "!ctrl.user.email"} Sign in or Register
.panel.panel-default.account-panel{"ng-if" => "ctrl.showAccountMenu"}
.panel-body
.account-items
.account-item.registration-login{"ng-if" => "!ctrl.user.email"}
.meta-container
.title Sign in or Register
.desc
%form.account-form{'name' => "loginForm"}
.form-tag.has-feedback
%input.form-control.login-input{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'ctrl.loginData.email'}
.form-tag.has-feedback
%input.form-control.login-input{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'ctrl.loginData.user_password'}
.checkbox{"ng-if" => "ctrl.hasLocalData()"}
%label
%input{"type" => "checkbox", "ng-model" => "ctrl.user.shouldMerge", "ng-bind" => "true", "ng-change" => "ctrl.mergeLocalChanged()"}
Merge local notes
%button.btn.dark-button.half-button{"ng-click" => "ctrl.loginSubmitPressed()", "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
%span Sign In
%button.btn.dark-button.half-button{"ng-click" => "ctrl.submitRegistrationForm()", "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
%span Register
%br
.login-forgot
%a.btn.btn-link{"ng-click" => "ctrl.showResetForm = !ctrl.showResetForm"} I forgot my password
.panel-status-text{"ng-if" => "ctrl.loginData.status", "style" => "font-size: 14px;"} {{ctrl.loginData.status}}
%form{"style" => "margin-top: 20px;", "ng-if" => "ctrl.showResetForm", "ng-init" => "ctrl.resetData = {}", 'ng-submit' => 'ctrl.forgotPasswordSubmit()', 'name' => "resetForm"}
.form-tag.has-feedback
%input.form-control.login-input{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'ctrl.resetData.email'}
%button.btn.dark-button.btn-block{:type => 'submit', "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
%span Send Reset Email
.panel-status-text{"ng-if" => "ctrl.resetData.response", "style" => "font-size: 14px;"}
{{ctrl.resetData.response}}
%form{"style" => "margin-top: 20px;", "ng-if" => "ctrl.showResetForm", "ng-init" => "ctrl.resetData = {}", 'ng-submit' => 'ctrl.forgotPasswordSubmit()', 'name' => "resetForm"}
.account-item{"ng-if" => "ctrl.user.email"}
.meta-container
.title Local Encryption
.desc Encrypt notes locally before sending to server. Neither the server owner nor an intruder can decrypt your locally encrypted notes.
.action-container
%span.status-title Status: enabled.
{{ctrl.encryptionStatusForNotes()}} (shared notes not encrypted)
.account-item{"ng-if" => "ctrl.user.email"}
.meta-container
.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.
.action-container
%a#download-archive{"ng-click" => "ctrl.downloadDataArchive()"} Download Latest Data Archive
%label#import-archive
%input{"type" => "file", "style" => "display: none;", "file-change" => "", "handler" => "ctrl.importFileSelected(files)"}
%span
Import Data from Archive
.account-item
.meta-container
.title Server
.desc Use a custom Standard Notes server to store and retrieve your account data.
.action-container
%form.account-form{'ng-submit' => 'ctrl.changeServer()', 'name' => "serverChangeForm"}
.form-tag.has-feedback
%input.form-control.login-input{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'ctrl.resetData.email'}
%input.form-control{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'ctrl.serverData.url'}
%button.btn.dark-button.btn-block{:type => 'submit', "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
%span Send Reset Email
.panel-status-text{"ng-if" => "ctrl.resetData.response", "style" => "font-size: 14px;"}
{{ctrl.resetData.response}}
%span.ladda-label Change Server
.account-item{"ng-if" => "ctrl.user.email"}
.icon-container
%img.icon{"lazy-img" => "assets/encryption.png"}
.meta-container
.title Local Encryption
.desc Encrypt notes locally before sending to server. Neither the server owner nor an intruder can decrypt your locally encrypted notes.
.action-container
%span.status-title Status: enabled.
{{ctrl.encryptionStatusForNotes()}} (shared notes not encrypted)
.account-item{"ng-if" => "ctrl.user.email"}
.icon-container
%img.icon.archive{"lazy-img" => "assets/archive.png"}
.meta-container
.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.
.action-container
%a#download-archive{"ng-click" => "ctrl.downloadDataArchive()"} Download Latest Data Archive
%label#import-archive
%input{"type" => "file", "style" => "display: none;", "file-change" => "", "handler" => "ctrl.importFileSelected(files)"}
%span
Import Data from Archive
.links{"ng-if" => "ctrl.user.email"}
.link-item
%a{"ng-click" => "ctrl.changePasswordPressed()"} Change Password
%form.account-form{"ng-if" => "ctrl.showNewPasswordForm", 'ng-submit' => 'ctrl.submitPasswordChange()', 'name' => "passwordChangeForm"}
.form-tag.has-feedback
%input.form-control.login-input{:autofocus => 'autofocus', :name => 'current', :placeholder => 'Current password', :required => true, :type => 'password', 'ng-model' => 'ctrl.passwordChangeData.current_password'}
.form-tag.has-feedback
%input.form-control.login-input{:placeholder => 'New password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'ctrl.passwordChangeData.new_password', "autocomplete" => "new-password"}
.form-tag.has-feedback
%input.form-control.login-input{:placeholder => 'Confirm password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'ctrl.passwordChangeData.new_password_confirmation', "autocomplete" => "new-password"}
%button.btn.dark-button.btn-block{:type => 'submit', "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
%span.ladda-label Change Password
.panel-status-text{"ng-if" => "ctrl.passwordChangeData.status", "style" => "font-size: 14px;"}
{{ctrl.passwordChangeData.status}}
.link-item
%a{"ng-click" => "ctrl.signOutPressed()"} Sign Out
.account-item
.meta-container
.title Server
.desc Use a custom Standard Notes server to store and retrieve your account data.
.action-container
%form.account-form{'ng-submit' => 'ctrl.changeServer()', 'name' => "serverChangeForm"}
.form-tag.has-feedback
%input.form-control{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'ctrl.serverData.url'}
%button.btn.dark-button.btn-block{:type => 'submit', "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
%span.ladda-label Change Server
.links{"ng-if" => "ctrl.user.email"}
.link-item
%a{"ng-click" => "ctrl.changePasswordPressed()"} Change Password
%form.account-form{"ng-if" => "ctrl.showNewPasswordForm", 'ng-submit' => 'ctrl.submitPasswordChange()', 'name' => "passwordChangeForm"}
.form-tag.has-feedback
%input.form-control.login-input{:autofocus => 'autofocus', :name => 'current', :placeholder => 'Current password', :required => true, :type => 'password', 'ng-model' => 'ctrl.passwordChangeData.current_password'}
.form-tag.has-feedback
%input.form-control.login-input{:placeholder => 'New password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'ctrl.passwordChangeData.new_password', "autocomplete" => "new-password"}
.form-tag.has-feedback
%input.form-control.login-input{:placeholder => 'Confirm password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'ctrl.passwordChangeData.new_password_confirmation', "autocomplete" => "new-password"}
%button.btn.dark-button.btn-block{:type => 'submit', "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
%span.ladda-label Change Password
.panel-status-text{"ng-if" => "ctrl.passwordChangeData.status", "style" => "font-size: 14px;"}
{{ctrl.passwordChangeData.status}}
.link-item
%a{"ng-click" => "ctrl.signOutPressed()"} Sign Out
.item
%a.menuItem{"href" => "https://standardnotes.org", "target" => "_blank"}
about
.item
%a.menuItem{"href" => "https://standardnotes.org", "target" => "_blank"}
Help

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

@@ -2,7 +2,7 @@
.content
.section-title-bar.tags-title-bar
.title Tags
.add-button{"ng-click" => "ctrl.clickedAddNewTag()"} +
.add-button.tag-add-button{"ng-click" => "ctrl.clickedAddNewTag()"} +
{{ctrl.test}}
.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"}