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

simplified menu css

Browse Source
This commit is contained in:
Mo Bitar
2017-05-05 01:35:45 -05:00
parent 9a5c170921
commit 776f6adbfe
15 changed files with 252 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/app/frontend/controllers/editor.js
View File

@@ -253,7 +253,7 @@ angular.module('app.frontend')
} }
} }
this.selectedMenuItem = function() { this.selectedMenuItem = function($event) {
this.showMenu = false; this.showMenu = false;
} }

2
app/assets/javascripts/app/frontend/controllers/notes.js
View File

@@ -114,7 +114,7 @@ angular.module('app.frontend')
}.bind(this), 100) }.bind(this), 100)
} }
this.selectedMenuItem = function() { this.selectedMenuItem = function($event) {
this.showMenu = false; this.showMenu = false;
} }

2
app/assets/javascripts/app/services/directives/views/editorMenu.js
View File

@@ -15,7 +15,7 @@ class EditorMenu {
$scope.formData = {}; $scope.formData = {};
$scope.editorManager = editorManager; $scope.editorManager = editorManager;
$scope.selectEditor = function(editor) { $scope.selectEditor = function($event, editor) {
editor.conflict_of = null; // clear conflict if applicable editor.conflict_of = null; // clear conflict if applicable
$scope.callback()(editor); $scope.callback()(editor);
} }

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

@@ -1,70 +0,0 @@
.nt-dropdown-menu {
border-radius: 0;
padding: 0 0;
margin-top: 15px;
border: none;
width: 280px;
li {
height: 35px;
overflow: hidden;
// padding-top: 2px;
.text {
padding: 10px;
padding-top: 7px;
height: 100%;
height: 100%;
float: left;
}
.shortcut {
float: right;
font-size: 12px;
font-weight: normal;
opacity: 0.5;
margin-top: 10px;
padding-right: 10px;
}
}
}
.nt-dropdown-menu.dark {
background-color: white;
color: $selected-text-color;
li {
&:hover {
background-color: #f5f5f5;
color: black;
}
a {
height: 100%;
font-weight: bold;
}
.text {
color: $selected-text-color;
}
}
}
.nt-dropdown-menu.light {
background-color: white;
color: black;
li {
&:hover {
background-color: $dark-gray;
color: white;
a {
color: white;
}
}
a {
color: black;
}
.text {
color: black;
}
}
}

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

@@ -16,7 +16,7 @@ $heading-height: 75px;
padding: 0; padding: 0;
} }
.section-menu { .section-menu-bar {
flex: 1 0 28px; flex: 1 0 28px;
max-height: 28px; max-height: 28px;
} }
@@ -125,19 +125,3 @@ $heading-height: 75px;
} }
} }
} }
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
ul {
font-weight: bold;
}
}
.nav>li>a {
position: relative;
display: block;
font-weight: bold;
user-select: none;
}

90
app/assets/stylesheets/app/_extensions.scss
View File

@@ -23,93 +23,3 @@
overflow-y: scroll; overflow-y: scroll;
} }
} }
.menu-section-footer {
background-color: #ededed;
border-top: 1px solid #d3d3d3;
position: relative;
padding: 10px;
}
.menu-section-header {
background-color: #ededed;
border-bottom: 1px solid #d3d3d3;
position: relative;
padding-top: 12px;
padding-left: 10px;
padding-bottom: 10px;
cursor: pointer;
user-select: none;
> .title {
font-size: 14px;
font-weight: bold;
}
> .subtitle {
font-size: 12px;
opacity: 0.5;
font-weight: normal;
margin-top: 2px;
}
> .loading {
position: absolute;
height: 15px;
width: 15px;
right: 10px;
top: 20px;
}
}
.dropdown-menu.editor-menu {
overflow-y: scroll;
max-height: calc(85vh - 90px);
&:not(:first-child) {
margin-top: 18px;
}
ul {
margin-top: 0px;
margin-bottom: 0px;
list-style:none;
padding-left:0;
li {
cursor: pointer;
height: auto;
&.menu-item {
padding: 10px;
border-bottom: 1px solid rgba(black, 0.1);
background-color: rgba(white, 0.9);
&:hover {
background-color: rgba(gray, 0.05);
}
&.nonactive {
cursor: default;
&:hover {
background-color: rgba(white, 0.9) !important;
}
}
.menu-item-title {
font-weight: bold;
font-size: 14px;
margin-bottom: 3px;
}
.menu-item-subtitle {
font-weight: normal;
opacity: 0.5;
margin-top: 1px;
font-size: 12px;
}
}
}
}
}

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

@@ -164,41 +164,3 @@ $section-header-height: 70px;
} }
} }
} }
.section-menu {
width: 100%;
padding-top: 0px;
padding-left: 21px;
padding-right: 21px;
background-color: #f1f1f1;
color: $selected-text-color;
height: 28px;
cursor: default;
ol, ul {
margin-top: 5px;
margin-bottom: 10px;
&.dropdown-menu {
margin-top: 10px;
}
}
ul {
li {
text-align: left;
&.sep {
margin: 6px;
display: block;
}
a {
font-size: 13px;
font-weight: bold;
padding: 0 0;
}
}
}
}

203
app/assets/stylesheets/app/_menus.scss Normal file
View File

@@ -0,0 +1,203 @@
ul.section-menu-bar {
width: 100%;
padding-top: 0px;
padding-left: 15px;
padding-right: 21px;
background-color: #f1f1f1;
color: $selected-text-color;
height: 28px;
cursor: default;
margin-top: 0px;
margin-bottom: 0;
list-style: none;
font-weight: bold;
font-size: 0; /* trick to remove gaps between li inline-block elements */
> li {
padding: 6px 8px;
text-align: left;
display: inline-block;
position: relative;
font-size: 13px;
font-weight: bold;
user-select: none;
&.selected {
background-color: $blue-color;
border-radius: 1px;
color: white;
}
}
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
float: left;
min-width: 160px;
z-index: 100;
list-style: none;
font-size: 14px;
text-align: left;
padding: 0 0;
border: none;
width: 280px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
background-color: white;
color: $selected-text-color;
li:hover {
background-color: $blue-color;
color: white;
}
> li {
width: 100%;
height: 35px;
overflow: hidden;
cursor: pointer;
color: $selected-text-color;
float: left;
label {
padding: 10px;
padding-top: 8px;
width: 100%;
height: 100%;
display: block;
cursor: pointer;
}
.shortcut {
float: right;
font-size: 12px;
font-weight: normal;
opacity: 0.5;
margin-top: 10px;
padding-right: 10px;
}
}
}
.dropdown-menu.sectioned-menu {
overflow-y: scroll;
max-height: calc(85vh - 90px);
&:not(:first-child) {
margin-top: 18px;
}
ul {
margin-top: 0px;
margin-bottom: 0px;
padding-left:0;
position: relative;
li {
cursor: pointer;
height: auto;
padding: 10px;
border-bottom: 1px solid rgba(black, 0.1);
background-color: rgba(white, 0.9);
height: auto;
.left-side {
left: 0;
width: 60%;
display: inline-block;
vertical-align: top;
user-select: text;
}
.right-side {
right: 12px;
width: 30%;
display: inline-block;
vertical-align: top;
text-align: right;
position: absolute;
}
&:hover {
background-color: $blue-color;
.blue {
color: white;
}
}
.menu-item-title {
font-weight: bold;
font-size: 14px;
margin-bottom: 3px;
}
.menu-item-subtitle {
font-weight: normal;
opacity: 0.5;
margin-top: 1px;
font-size: 12px;
}
}
}
.header {
background-color: #ededed;
border-bottom: 1px solid #d3d3d3;
position: relative;
padding-top: 12px;
padding-left: 10px;
padding-bottom: 10px;
cursor: pointer;
user-select: none;
> .title {
font-size: 14px;
font-weight: bold;
}
> .subtitle {
font-size: 12px;
opacity: 0.5;
font-weight: normal;
margin-top: 2px;
}
> .loading {
position: absolute;
height: 15px;
width: 15px;
right: 10px;
top: 20px;
}
}
.footer {
background-color: #ededed;
border-top: 1px solid #d3d3d3;
position: relative;
padding: 10px;
}
}

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

@@ -63,54 +63,8 @@ $screen-md-max: ($screen-lg-min - 1) !default;
*:focus {outline:0;} *:focus {outline:0;}
.dropup, .dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
// display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
text-align: left;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
}
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
text-decoration: none;
cursor: pointer;
}
button:focus {outline:0;} button:focus {outline:0;}
.dropdown-menu-right {
left: auto;
right: 0;
}
.btn { .btn {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;

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

@@ -24,11 +24,10 @@
right: 20px; right: 20px;
} }
.tag-menu-bar { #tag-menu-bar {
position: relative; position: relative;
margin: 0 -20px; margin: 0 -20px;
width: auto; width: auto;
padding-top: 1px;
margin-top: 14px; margin-top: 14px;
} }

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

@@ -3,9 +3,9 @@ $dark-gray: #2e2e2e;
@import "app/standard"; @import "app/standard";
@import "app/mostrap"; @import "app/mostrap";
@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";
@import "app/editor"; @import "app/editor";
@import "app/extensions"; @import "app/extensions";
@import "app/menus";

8
app/assets/templates/frontend/directives/contextual-menu.html.haml
View File

@@ -1,6 +1,6 @@
%ul.dropdown-menu.dropdown-menu-left.nt-dropdown-menu.dark.editor-menu %ul.dropdown-menu.sectioned-menu
.extension{"ng-repeat" => "extension in extensions"} .extension{"ng-repeat" => "extension in extensions"}
.menu-section-header{"ng-click" => "extension.hide = !extension.hide"} .header{"ng-click" => "extension.hide = !extension.hide"}
.title {{extension.name}} .title {{extension.name}}
.subtitle .subtitle
Will submit your note Will submit your note
@@ -8,7 +8,7 @@
.spinner.loading{"ng-if" => "extension.loading"} .spinner.loading{"ng-if" => "extension.loading"}
%div{"ng-if" => "extension.hide"} … %div{"ng-if" => "extension.hide"} …
%ul{"ng-if" => "!extension.hide"} %ul{"ng-if" => "!extension.hide"}
%li.menu-item{"ng-repeat" => "action in extension.actionsWithContextForItem(item)", "ng-click" => "executeAction(action, extension)", %li.menu-item{"ng-repeat" => "action in extension.actionsWithContextForItem(item)", "ng-click" => "executeAction(action, extension);",
"ng-class" => "{'faded' : !isActionEnabled(action, extension)}"} "ng-class" => "{'faded' : !isActionEnabled(action, extension)}"}
.menu-item-title {{action.label}} .menu-item-title {{action.label}}
.menu-item-subtitle {{action.desc}} .menu-item-subtitle {{action.desc}}
@@ -18,7 +18,7 @@
%div{"ng-if" => "action.showNestedActions"} %div{"ng-if" => "action.showNestedActions"}
%ul.mt-10 %ul.mt-10
%li.menu-item.white-bg{"ng-repeat" => "subaction in action.subactions", "ng-click" => "executeAction(subaction, extension); $event.stopPropagation()", "style" => "margin-top: -1px;"} %li.menu-item.white-bg{"ng-repeat" => "subaction in action.subactions", "ng-click" => "executeAction(subaction, extension);", "style" => "margin-top: -1px;"}
.menu-item-title {{subaction.label}} .menu-item-title {{subaction.label}}
.menu-item-subtitle {{subaction.desc}} .menu-item-subtitle {{subaction.desc}}
%span{"ng-if" => "subaction.running"} %span{"ng-if" => "subaction.running"}

25
app/assets/templates/frontend/directives/editor-menu.html.haml
View File

@@ -1,28 +1,29 @@
%ul.dropdown-menu.dropdown-menu-left.nt-dropdown-menu.dark.editor-menu %ul.dropdown-menu.sectioned-menu
.menu-section-header .header
.title System Editors .title System Editors
%ul %ul
%li.menu-item{"ng-repeat" => "editor in editorManager.systemEditors", "ng-click" => "selectEditor(editor)"} %li.menu-item{"ng-repeat" => "editor in editorManager.systemEditors", "ng-click" => "selectEditor($event, editor)"}
%span.pull-left.mr-10{"ng-if" => "selectedEditor === editor"} ✓ %span.pull-left.mr-10{"ng-if" => "selectedEditor === editor"} ✓
.menu-item-title.pull-left {{editor.name}} .menu-item-title.pull-left {{editor.name}}
%div{"ng-if" => "editorManager.externalEditors.length > 0"} %div{"ng-if" => "editorManager.externalEditors.length > 0"}
.menu-section-header .header
.title External Editors .title External Editors
.subtitle Can access your current note decrypted. .subtitle Can access your current note decrypted.
%ul %ul
%li.menu-item{"ng-repeat" => "editor in editorManager.externalEditors", "ng-click" => "selectEditor(editor)"} %li.menu-item{"ng-repeat" => "editor in editorManager.externalEditors", "ng-click" => "selectEditor($event, editor)"}
.pull-left{"style" => "width: 60%"} .left-side
%strong.red.medium{"ng-if" => "editor.conflict_of"} Conflicted copy %strong.red.medium{"ng-if" => "editor.conflict_of"} Conflicted copy
.menu-item-title {{editor.name}} .menu-item-title {{editor.name}}
%a.faded{"ng-if" => "!editor.default", "ng-click" => "setDefaultEditor(editor); $event.stopPropagation();"} Set Default %a.faded{"ng-if" => "!editor.default", "ng-click" => "setDefaultEditor(editor); $event.stopPropagation();"} Set Default
%a.red{"ng-if" => "editor.default", "ng-click" => "removeDefaultEditor(editor); $event.stopPropagation();"} Remove Default %a.blue{"ng-if" => "editor.default", "ng-click" => "removeDefaultEditor(editor); $event.stopPropagation();"} Remove Default
%a.faded{"ng-click" => "editor.showUrl = !editor.showUrl; $event.stopPropagation();"} Show URL %a.faded{"ng-click" => "editor.showUrl = !editor.showUrl; $event.stopPropagation();"} Show URL
.menu-item-subtitle.wrap{"ng-if" => "editor.showUrl"} {{editor.url}} .menu-item-subtitle.wrap.mt-5{"ng-if" => "editor.showUrl"} {{editor.url}}
%span.pull-left.ml-10{"ng-if" => "selectedEditor === editor"} ✓
.pull-right %span.inline.ml-10{"ng-if" => "selectedEditor === editor"} ✓
%button.white.medium.inline.top{"style" => "width: 50px; height: 40px;", "ng-click" => "deleteEditor(editor); $event.stopPropagation();"} ☓ .right-side
.menu-section-footer.mt-10 %button.white.medium{"style" => "width: 50px; height: 40px;", "ng-click" => "deleteEditor(editor); $event.stopPropagation();"} ☓
.footer.mt-10
%input.form-control{"ng-model" => "formData.url", "placeholder" => "Add new editor via URL", "ng-keyup" => "$event.keyCode == 13 && submitNewEditorRequest()"} %input.form-control{"ng-model" => "formData.url", "placeholder" => "Add new editor via URL", "ng-keyup" => "$event.keyCode == 13 && submitNewEditorRequest()"}
%a.block.blue{"href" => "https://standardnotes.org/extensions", "target" => "_blank"} Available Editors %a.block.blue{"href" => "https://standardnotes.org/extensions", "target" => "_blank"} Available Editors

34
app/assets/templates/frontend/editor.html.haml
View File

@@ -10,29 +10,23 @@
.editor-tags .editor-tags
%input.tags-input{"type" => "text", "ng-keyup" => "$event.keyCode == 13 && $event.target.blur();", %input.tags-input{"type" => "text", "ng-keyup" => "$event.keyCode == 13 && $event.target.blur();",
"ng-model" => "ctrl.tagsString", "placeholder" => "#tags", "ng-blur" => "ctrl.updateTagsFromTagsString($event, ctrl.tagsString)"} "ng-model" => "ctrl.tagsString", "placeholder" => "#tags", "ng-blur" => "ctrl.updateTagsFromTagsString($event, ctrl.tagsString)"}
.section-menu{"ng-if" => "ctrl.note"} %ul.section-menu-bar{"ng-if" => "ctrl.note"}
%ul.nav %li{"ng-class" => "{'selected' : ctrl.showMenu}", "click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"}
%li.dropdown.pull-left.mr-15{"click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"} %label{"ng-click" => "ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false; ctrl.showEditorMenu = false;"} Menu
%a.dropdown-toggle{"ng-click" => "ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false; ctrl.showEditorMenu = false;"}
Menu
%ul.dropdown-menu.dropdown-menu-left.nt-dropdown-menu.dark{"ng-if" => "ctrl.showMenu"} %ul.dropdown-menu{"ng-if" => "ctrl.showMenu"}
%li{"ng-click" => "ctrl.selectedMenuItem(); ctrl.toggleFullScreen()"} %li
.text Toggle Fullscreen %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleFullScreen()"} Toggle Fullscreen
%li{"ng-click" => "ctrl.deleteNote()"} %li
.text Delete Note %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()"} Delete Note
%li.sep %li{"ng-class" => "{'selected' : ctrl.showEditorMenu}", "click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"}
%li.dropdown.pull-left.mr-15{"click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"} %label{"ng-click" => "ctrl.showEditorMenu = !ctrl.showEditorMenu; ctrl.showMenu = false; ctrl.showExtensions = false;"} Editor
%a.dropdown-toggle{"ng-click" => "ctrl.showEditorMenu = !ctrl.showEditorMenu; ctrl.showMenu = false; ctrl.showExtensions = false;"} %editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.selectedEditor", "selected-editor" => "ctrl.editor"}
Editor
%editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.selectedEditor", "selected-editor" => "ctrl.editor"}
%li.sep %li{"ng-class" => "{'selected' : ctrl.showExtensions}", "ng-if" => "ctrl.hasAvailableExtensions()", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"}
%li.dropdown.pull-left{"ng-if" => "ctrl.hasAvailableExtensions()", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"} %label{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false; ctrl.showEditorMenu = false;"} Actions
%a.dropdown-toggle{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false; ctrl.showEditorMenu = false;"} %contextual-extensions-menu{"ng-if" => "ctrl.showExtensions", "item" => "ctrl.note"}
Actions
%contextual-extensions-menu{"ng-if" => "ctrl.showExtensions", "item" => "ctrl.note"}
.editor-content{"ng-if" => "ctrl.noteReady", "ng-class" => "{'fullscreen' : ctrl.fullscreen }"} .editor-content{"ng-if" => "ctrl.noteReady", "ng-class" => "{'fullscreen' : ctrl.fullscreen }"}
%iframe#editor-iframe{"ng-if" => "ctrl.editor && !ctrl.editor.systemEditor", "ng-src" => "{{ctrl.editor.url | trusted}}", "frameBorder" => "0", "style" => "width: 100%;"} %iframe#editor-iframe{"ng-if" => "ctrl.editor && !ctrl.editor.systemEditor", "ng-src" => "{{ctrl.editor.url | trusted}}", "frameBorder" => "0", "style" => "width: 100%;"}

26
app/assets/templates/frontend/notes.html.haml
View File

@@ -6,21 +6,19 @@
%br %br
.filter-section .filter-section
%input.filter-bar{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search", "ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true"} %input.filter-bar{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search", "ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true"}
.section-menu.tag-menu-bar %ul.section-menu-bar#tag-menu-bar
%ul.nav.nav-pills %li{"ng-class" => "{'selected' : ctrl.showMenu}"}
%li.dropdown %label{"ng-click" => "ctrl.showMenu = !ctrl.showMenu"} Sort
%a.dropdown-toggle{"ng-click" => "ctrl.showMenu = !ctrl.showMenu"}
Sort
%ul.dropdown-menu.dropdown-menu-left.nt-dropdown-menu.dark{"ng-if" => "ctrl.showMenu"} %ul.dropdown-menu{"ng-if" => "ctrl.showMenu"}
%li %li
%a.text{"ng-click" => "ctrl.selectedMenuItem(); ctrl.selectedSortByCreated()"} %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByCreated()"}
%span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'created_at'"} ✓ %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'created_at'"} ✓
By date added By date added
%li %li
%a.text{"ng-click" => "ctrl.selectedMenuItem(); ctrl.selectedSortByUpdated()"} %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByUpdated()"}
%span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'updated_at'"} ✓ %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'updated_at'"} ✓
By date modified By date modified
.scrollable .scrollable
.infinite-scroll{"infinite-scroll" => "ctrl.paginate()", "can-load" => "true", "threshold" => "200"} .infinite-scroll{"infinite-scroll" => "ctrl.paginate()", "can-load" => "true", "threshold" => "200"}