diff --git a/app/assets/javascripts/app/services/directives/views/editorMenu.js b/app/assets/javascripts/app/services/directives/views/editorMenu.js index b800d7e98..292e090a4 100644 --- a/app/assets/javascripts/app/services/directives/views/editorMenu.js +++ b/app/assets/javascripts/app/services/directives/views/editorMenu.js @@ -9,7 +9,7 @@ class EditorMenu { }; } - controller($scope, componentManager) { + controller($scope, componentManager, syncManager) { 'ngInject'; $scope.formData = {}; @@ -18,6 +18,8 @@ class EditorMenu { $scope.isDesktop = isDesktopApplication(); + $scope.defaultEditor = $scope.editors.filter((e) => {return e.isDefaultEditor()})[0]; + $scope.selectEditor = function($event, editor) { if(editor) { editor.conflict_of = null; // clear conflict if applicable @@ -29,8 +31,34 @@ class EditorMenu { $scope.callback()(editor); } - $scope.moreEditors = function() { + $scope.toggleDefaultForEditor = function(editor) { + console.log("Toggling editor", editor); + if($scope.defaultEditor == editor) { + $scope.removeEditorDefault(editor); + } else { + $scope.makeEditorDefault(editor); + } + } + $scope.makeEditorDefault = function(component) { + var currentDefault = componentManager.componentsForArea("editor-editor").filter((e) => {return e.isDefaultEditor()})[0]; + if(currentDefault) { + currentDefault.setAppDataItem("defaultEditor", false); + currentDefault.setDirty(true); + } + component.setAppDataItem("defaultEditor", true); + component.setDirty(true); + syncManager.sync(); + + $scope.defaultEditor = component; + } + + $scope.removeEditorDefault = function(component) { + component.setAppDataItem("defaultEditor", false); + component.setDirty(true); + syncManager.sync(); + + $scope.defaultEditor = null; } } diff --git a/app/assets/javascripts/app/services/directives/views/globalExtensionsMenu.js b/app/assets/javascripts/app/services/directives/views/globalExtensionsMenu.js index c5780abfe..01653a67c 100644 --- a/app/assets/javascripts/app/services/directives/views/globalExtensionsMenu.js +++ b/app/assets/javascripts/app/services/directives/views/globalExtensionsMenu.js @@ -133,22 +133,6 @@ class GlobalExtensionsMenu { } } - $scope.makeEditorDefault = function(component) { - var currentDefault = componentManager.componentsForArea("editor-editor").filter((e) => {return e.isDefaultEditor()})[0]; - if(currentDefault) { - currentDefault.setAppDataItem("defaultEditor", false); - currentDefault.setDirty(true); - } - component.setAppDataItem("defaultEditor", true); - component.setDirty(true); - syncManager.sync(); - } - - $scope.removeEditorDefault = function(component) { - component.setAppDataItem("defaultEditor", false); - component.setDirty(true); - syncManager.sync(); - } // Installation diff --git a/app/assets/javascripts/app/services/directives/views/menuRow.js b/app/assets/javascripts/app/services/directives/views/menuRow.js index 40e3acbcd..c3a1061ef 100644 --- a/app/assets/javascripts/app/services/directives/views/menuRow.js +++ b/app/assets/javascripts/app/services/directives/views/menuRow.js @@ -7,13 +7,22 @@ class MenuRow { this.scope = { circle: "=", title: "=", - subtite: "=" + subtite: "=", + hasButton: "=", + buttonText: "=", + buttonClass: "=", + buttonAction: "&" }; } controller($scope, componentManager) { 'ngInject'; + $scope.clickButton = function($event) { + $event.stopPropagation(); + $scope.buttonAction(); + } + } } diff --git a/app/assets/templates/frontend/directives/editor-menu.html.haml b/app/assets/templates/frontend/directives/editor-menu.html.haml index 3dda51ef7..9209a4b0b 100644 --- a/app/assets/templates/frontend/directives/editor-menu.html.haml +++ b/app/assets/templates/frontend/directives/editor-menu.html.haml @@ -4,10 +4,18 @@ .header %h4.title Note Editor %menu-row{"title" => "'Plain Editor'", "circle" => "selectedEditor == null && 'success'", "ng-click" => "selectEditor($event, null)"} - %menu-row{"ng-repeat" => "editor in editors", "ng-click" => "selectEditor($event, editor)", "title" => "editor.name", "circle" => "selectedEditor === editor && 'success'"} - %strong.red.medium{"ng-if" => "editor.conflict_of"} Conflicted copy - .sublabel{"ng-if" => "editor.local"} - Locally Installed - .sublabel.faded{"ng-if" => "editor.local && !isDesktop"} Unavailable in Web Browser + + %menu-row{"ng-repeat" => "editor in editors", "ng-click" => "selectEditor($event, editor)", "title" => "editor.name", + "circle" => "selectedEditor === editor && 'success'", + "has-button" => "selectedEditor == editor || defaultEditor == editor", "button-text" => "defaultEditor == editor ? 'Undefault' : 'Set Default'", + "button-action" => "toggleDefaultForEditor(editor)", "button-class" => "defaultEditor == editor ? 'warning' : 'info'"} + .row + .column + %strong.red.medium{"ng-if" => "editor.conflict_of"} Conflicted copy + .sublabel{"ng-if" => "editor.local"} + Locally Installed + + .sublabel.faded{"ng-if" => "editor.local && !isDesktop"} Unavailable in Web Browser + %a.no-decoration{"ng-if" => "editors.length == 0", "href" => "https://standardnotes.org/extensions", "target" => "blank"} %menu-row{"title" => "'Download More Editors'", "ng-click" => "moreEditors()"} diff --git a/app/assets/templates/frontend/directives/menu-row.html.haml b/app/assets/templates/frontend/directives/menu-row.html.haml index 1bbc934b6..df8d0dea3 100644 --- a/app/assets/templates/frontend/directives/menu-row.html.haml +++ b/app/assets/templates/frontend/directives/menu-row.html.haml @@ -1,10 +1,14 @@ .row - .column{"ng-if" => "circle"} - .circle.small{"ng-class" => "circle"} .column - .label - {{title}} - .sublabel{"ng-if" => "subtitle"} - {{subtitle}} - - %ng-transclude + .left + .column{"ng-if" => "circle"} + .circle.small{"ng-class" => "circle"} + .column + .label + {{title}} + .sublabel{"ng-if" => "subtitle"} + {{subtitle}} + %ng-transclude + .column{"ng-if" => "hasButton"} + .button.info{"ng-click" => "clickButton($event)", "ng-class" => "buttonClass"} + {{buttonText}} diff --git a/vendor/assets/stylesheets/stylekit.css b/vendor/assets/stylesheets/stylekit.css index 2fb57a16b..c46bf1db7 100644 --- a/vendor/assets/stylesheets/stylekit.css +++ b/vendor/assets/stylesheets/stylekit.css @@ -111,16 +111,25 @@ cursor: pointer; display: flex; flex-direction: row; + justify-content: space-between; } .sn-component .menu-panel .row .column { display: flex; justify-content: center; flex-direction: column; + /* Nested row */ } .sn-component .menu-panel .row .column:not(:first-child) { padding-left: 1.0rem; padding-right: 0.15rem; } +.sn-component .menu-panel .row .column .row { + padding: 0; + border-bottom: none; +} +.sn-component .menu-panel .row .column .left { + display: flex; +} .sn-component .menu-panel .row .button .label, .sn-component .menu-panel .row .box .label, .sn-component .menu-panel .row .notification .label, .sn-component .menu-panel .row .circle .label, .sn-component .menu-panel .row .button .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .menu-panel .row .button .subtitle, .sn-component .menu-panel .row .box .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .menu-panel .row .box .subtitle, .sn-component .menu-panel .row .notification .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .menu-panel .row .notification .subtitle, .sn-component .menu-panel .row .circle .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .menu-panel .row .circle .subtitle { font-size: 0.8rem; font-weight: normal; @@ -365,8 +374,8 @@ border-radius: 50%; } .sn-component .circle.small { - width: 12px; - height: 12px; + width: 11px; + height: 11px; } .sn-component .spinner { border: 1px solid #515263; @@ -402,5 +411,34 @@ transform: rotate(360deg); } } +.sn-component .app-bar { + display: flex; + width: 100%; + height: 2rem; + padding: 0.1rem 0.8rem; + background-color: #F6F6F6; + justify-content: space-between; + align-items: center; + border: 1px solid #DDDDDD; +} +.sn-component .app-bar .left, .sn-component .app-bar .right { + display: flex; +} +.sn-component .app-bar .item { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} +.sn-component .app-bar .item:not(:first-child) { + margin-left: 1rem; +} +.sn-component .app-bar .item .label, .sn-component .app-bar .item .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .app-bar .item .subtitle { + font-weight: bold; + font-size: 0.9rem; +} +.sn-component .app-bar .item .label:hover, .sn-component .app-bar .item .panel .content .panel-section .subtitle:hover, .sn-component .panel .content .panel-section .app-bar .item .subtitle:hover { + color: #086DD6; +} /*# sourceMappingURL=stylekit.css.map */