Action menu updates, ionicons minimal

This commit is contained in:
Mo Bitar
2018-01-19 12:22:17 -06:00
parent 59fb649bd4
commit 5be2402f65
25 changed files with 185 additions and 5642 deletions

View File

@@ -8,55 +8,12 @@ class Action {
this.lastExecuted = new Date(this.lastExecuted);
}
}
permissionsString() {
if(!this.permissions) {
return "";
}
var permission = this.permissions.charAt(0).toUpperCase() + this.permissions.slice(1); // capitalize first letter
permission += ": ";
for(var contentType of this.content_types) {
if(contentType == "*") {
permission += "All items";
} else {
permission += contentType;
}
permission += " ";
}
return permission;
}
encryptionModeString() {
if(this.verb != "post") {
return null;
}
var encryptionMode = "This action accepts data ";
if(this.accepts_encrypted && this.accepts_decrypted) {
encryptionMode += "encrypted or decrypted.";
} else {
if(this.accepts_encrypted) {
encryptionMode += "encrypted.";
} else {
encryptionMode += "decrypted.";
}
}
return encryptionMode;
}
}
class Extension extends Item {
constructor(json) {
super(json);
if(this.encrypted === null || this.encrypted === undefined) {
// Default to encrypted on creation.
this.encrypted = true;
}
if(json.actions) {
this.actions = json.actions.map(function(action){
return new Action(action);
@@ -68,12 +25,6 @@ class Extension extends Item {
}
}
actionsInGlobalContext() {
return this.actions.filter(function(action){
return action.context == "global";
})
}
actionsWithContextForItem(item) {
return this.actions.filter(function(action){
return action.context == item.content_type || action.context == "Item";
@@ -86,12 +37,6 @@ class Extension extends Item {
this.description = content.description;
this.url = content.url;
if(content.encrypted !== null && content.encrypted !== undefined) {
this.encrypted = content.encrypted;
} else {
this.encrypted = true;
}
this.supported_types = content.supported_types;
if(content.actions) {
this.actions = content.actions.map(function(action){
@@ -114,8 +59,7 @@ class Extension extends Item {
url: this.url,
description: this.description,
actions: this.actions,
supported_types: this.supported_types,
encrypted: this.encrypted
supported_types: this.supported_types
};
_.merge(params, super.structureParams());

View File

@@ -7,16 +7,6 @@ class ActionsManager {
this.enabledRepeatActionUrls = JSON.parse(storageManager.getItem("enabledRepeatActionUrls")) || [];
this.syncManager = syncManager;
this.storageManager = storageManager;
modelManager.addItemSyncObserver("actionsManager", "Extension", function(allItems, validItems, deletedItems){
for (var ext of validItems) {
for (var action of ext.actions) {
if(_.includes(this.enabledRepeatActionUrls, action.url)) {
this.enableRepeatAction(action, ext);
}
}
}
}.bind(this))
}
get extensions() {
@@ -40,14 +30,6 @@ class ActionsManager {
}
deleteExtension(extension) {
for(var action of extension.actions) {
if(action.repeat_mode) {
if(this.isRepeatActionEnabled(action)) {
this.disableRepeatAction(action);
}
}
}
this.modelManager.setItemToBeDeleted(extension);
this.syncManager.sync(null);
}
@@ -90,7 +72,6 @@ class ActionsManager {
handleExtensionLoadExternalResponseItem(url, externalResponseItem) {
// Don't allow remote response to set these flags
delete externalResponseItem.encrypted;
delete externalResponseItem.uuid;
var extension = _.find(this.extensions, {url: url});
@@ -125,13 +106,6 @@ class ActionsManager {
}
refreshExtensionsFromServer() {
for (var url of this.enabledRepeatActionUrls) {
var action = this.actionWithURL(url);
if(action) {
this.disableRepeatAction(action);
}
}
for(var ext of this.extensions) {
this.retrieveExtensionFromServer(ext.url, function(extension){
extension.setDirty(true);
@@ -141,12 +115,6 @@ class ActionsManager {
executeAction(action, extension, item, callback) {
if(extension.encrypted && this.authManager.offline()) {
alert("To send data encrypted, you must have an encryption key, and must therefore be signed in.");
callback(null);
return;
}
var customCallback = function(response) {
action.running = false;
callback(response);
@@ -154,6 +122,8 @@ class ActionsManager {
action.running = true;
let decrypted = action.access_type == "decrypted";
switch (action.verb) {
case "get": {
@@ -204,12 +174,12 @@ class ActionsManager {
if(action.all) {
var items = this.modelManager.allItemsMatchingTypes(action.content_types);
params.items = items.map(function(item){
var params = this.outgoingParamsForItem(item, extension);
var params = this.outgoingParamsForItem(item, extension, decrypted);
return params;
}.bind(this))
} else {
params.items = [this.outgoingParamsForItem(item, extension)];
params.items = [this.outgoingParamsForItem(item, extension, decrypted)];
}
this.performPost(action, extension, params, function(response){
@@ -231,35 +201,6 @@ class ActionsManager {
return _.includes(this.enabledRepeatActionUrls, action.url);
}
disableRepeatAction(action, extension) {
_.pull(this.enabledRepeatActionUrls, action.url);
this.storageManager.setItem("enabledRepeatActionUrls", JSON.stringify(this.enabledRepeatActionUrls));
this.modelManager.removeItemChangeObserver(action.url);
console.assert(this.isRepeatActionEnabled(action) == false);
}
enableRepeatAction(action, extension) {
if(!_.find(this.enabledRepeatActionUrls, action.url)) {
this.enabledRepeatActionUrls.push(action.url);
this.storageManager.setItem("enabledRepeatActionUrls", JSON.stringify(this.enabledRepeatActionUrls));
}
if(action.repeat_mode) {
if(action.repeat_mode == "watch") {
this.modelManager.addItemChangeObserver(action.url, action.content_types, function(changedItems){
this.triggerWatchAction(action, extension, changedItems);
}.bind(this))
}
if(action.repeat_mode == "loop") {
// todo
}
}
}
queueAction(action, extension, delay, changedItems) {
this.actionQueue = this.actionQueue || [];
if(_.find(this.actionQueue, {url: action.url})) {
@@ -274,38 +215,9 @@ class ActionsManager {
}.bind(this), delay * 1000);
}
triggerWatchAction(action, extension, changedItems) {
if(action.repeat_timeout > 0) {
var lastExecuted = action.lastExecuted;
var diffInSeconds = (new Date() - lastExecuted)/1000;
if(diffInSeconds < action.repeat_timeout) {
var delay = action.repeat_timeout - diffInSeconds;
this.queueAction(action, extension, delay, changedItems);
return;
}
}
action.lastExecuted = new Date();
if(action.verb == "post") {
var params = {};
params.items = changedItems.map(function(item){
var params = this.outgoingParamsForItem(item, extension);
return params;
}.bind(this))
action.running = true;
this.performPost(action, extension, params, function(){
action.running = false;
});
} else {
// todo
}
}
outgoingParamsForItem(item, extension) {
outgoingParamsForItem(item, extension, decrypted = false) {
var keys = this.authManager.keys();
if(!extension.encrypted) {
if(decrypted) {
keys = null;
}
var itemParams = new ItemParams(item, keys, this.authManager.protocolVersion());
@@ -313,11 +225,6 @@ class ActionsManager {
}
performPost(action, extension, params, callback) {
if(extension.encrypted) {
params.auth_params = this.authManager.getAuthParams();
}
this.httpManager.postAbsolute(action.url, params, function(response){
action.error = false;
if(callback) {

View File

@@ -23,12 +23,12 @@ class ActionsMenu {
}
$scope.executeAction = function(action, extension, parentAction) {
if(!$scope.isActionEnabled(action, extension)) {
alert("This action requires " + action.access_type + " access to this note. You can change this setting in the Extensions menu on the bottom of the app.");
return;
}
if(action.verb == "nested") {
action.showNestedActions = !action.showNestedActions;
if(!action.subrows) {
action.subrows = $scope.subRowsForAction(action, extension);
} else {
action.subrows = null;
}
return;
}
action.running = true;
@@ -41,7 +41,7 @@ class ActionsMenu {
// keep nested state
if(parentAction) {
var matchingAction = _.find(ext.actions, {label: parentAction.label});
matchingAction.showNestedActions = true;
matchingAction.subrows = $scope.subRowsForAction(parentAction, extension);
}
});
})
@@ -60,21 +60,25 @@ class ActionsMenu {
}
}
$scope.isActionEnabled = function(action, extension) {
if(action.access_type) {
var extEncryptedAccess = extension.encrypted;
if(action.access_type == "decrypted" && extEncryptedAccess) {
return false;
} else if(action.access_type == "encrypted" && !extEncryptedAccess) {
return false;
}
$scope.subRowsForAction = function(parentAction, extension) {
if(!parentAction.subactions) {
return null;
}
return true;
return parentAction.subactions.map((subaction) => {
return {
onClick: ($event) => {
this.executeAction(subaction, extension, parentAction);
$event.stopPropagation();
},
title: subaction.label,
subtitle: subaction.desc,
spinnerClass: subaction.running ? 'info' : null
}
})
}
$scope.accessTypeForExtension = function(extension) {
return extension.encrypted ? "encrypted" : "decrypted";
}
}
}

View File

@@ -11,7 +11,9 @@ class MenuRow {
hasButton: "=",
buttonText: "=",
buttonClass: "=",
buttonAction: "&"
buttonAction: "&",
spinnerClass: "=",
subRows: "="
};
}

File diff suppressed because one or more lines are too long

View File

@@ -1,97 +0,0 @@
.extension-render-modal {
position: fixed;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10000;
width: 100vw;
height: 100vh;
background-color: rgba(gray, 0.3);
color: black;
.content {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-color: white;
width: 700px;
height: 500px;
margin: auto;
padding: 25px;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
overflow-y: scroll;
}
}
#global-ext-menu {
color: black;
.panel-body {
padding: 0;
}
.container {
padding: 13px 18px;
&.no-bottom {
padding-bottom: 0;
}
}
p {
font-size: 14px;
&.small {
font-size: 12px;
}
}
.link-group {
a {
margin-right: 2px;
}
}
.dashboard-link {
padding-top: 12px;
font-weight: normal;
}
.section-margin {
margin-top: 20px;
}
input {
border: 1px solid $blue-color;
border-radius: 2px;
}
.header {
padding-bottom: 12px;
}
ul {
border-top: 1px solid $light-bg-color;
border-bottom: 1px solid $light-bg-color;
margin: 0;
padding: 0;
li {
cursor: pointer;
background-color: rgba($light-bg-color, 0.2);
&:hover {
background-color: rgba($light-bg-color, 0.4);
}
&:not(:last-child) {
border-bottom: 1px solid $light-bg-color;
}
}
}
}
ul {
margin: 0;
padding: 0;
}

View File

@@ -21,12 +21,6 @@
z-index: 1000;
margin-top: 15px;
background-color: white;
.close-button {
&:hover {
text-decoration: none;
}
}
}
}
@@ -43,58 +37,8 @@ a.disabled {
pointer-events: none;
}
.icon.ion-locked {
margin-left: 5px;
border-left: 1px solid gray;
padding-left: 8px;
}
/* Global Ext Menu */
.ext-section {
min-height: 50px;
h1 {
margin: 0;
padding: 0;
padding-top: 5px;
}
&.opened {
h1 {
padding-top: 0px;
// padding-bottom: 6px;
}
}
}
.room-iframe {
width: 100%;
height: 100%;
}
// .spinner {
// height: 10px;
// width: 10px;
// animation: rotate 0.8s infinite linear;
// border: 1px solid #515263;
// border-right-color: transparent;
// border-radius: 50%;
//
// &.tinted {
// border: 1px solid $blue-color;
// border-right-color: transparent;
// }
// }
//
// @keyframes rotate {
// 0% { transform: rotate(0deg); }
// 100% { transform: rotate(360deg); }
// }

View File

@@ -22,7 +22,15 @@ body {
}
* {
box-sizing: border-box;
box-sizing: border-box;
}
.tinted {
color: $blue-color;
}
.tinted-selected {
color: white;
}
*:focus {outline:0;}
@@ -37,51 +45,6 @@ input, button, select, textarea {
line-height: inherit;
}
.tinted {
color: $blue-color;
}
.tinted-selected {
color: white;
}
.tinted-box {
background-color: $blue-color;
color: white;
border-radius: 4px;
padding: 16px 20px;
button {
background-color: white;
color: $blue-color;
border-radius: 3px;
font-weight: bold;
padding: 6px 20px;
width: 100%;
&:hover {
text-decoration: underline;
}
}
}
.dark-button {
background-color: #2e2e2e;
border: 0;
padding: 6px 18px;
font-size: 16px;
cursor: pointer;
color: #fff;
border-radius: 2px;
border: 1px solid transparent;
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
&:hover {
background-color: black;
}
}
a {
color: $blue-color;
text-decoration: none;
@@ -120,21 +83,6 @@ $footer-height: 32px;
overflow: hidden;
position: relative;
.light-button {
background-color: $bg-color;
font-weight: bold;
color: $main-text-color;
font-size: 16px;
text-align: center;
height: 35px;
border-radius: 4px;
padding-top: 6px;
&:hover {
background-color: #cdcdcd;
}
}
panel-resizer {
top: 0;
right: 0;

View File

@@ -5,19 +5,16 @@
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
float: left;
min-width: 160px;
z-index: 100;
position: absolute;
top: 100%;
left: 0;
float: left;
min-width: 160px;
z-index: 100;
margin-top: 5px;
width: 280px;
max-height: calc(85vh - 90px);
background-color: white;
color: $selected-text-color;
margin-top: 5px;
width: 280px;
max-height: calc(85vh - 90px);
background-color: white;
color: $selected-text-color;
}

View File

@@ -37,6 +37,20 @@
align-items: center;
justify-content: center;
.sn-component {
height: 100%;
.panel {
height: 100%;
}
}
&.medium {
> .content {
width: 700px;
height: 500px;
}
}
.background {
position: absolute;
z-index: -1;

View File

@@ -1,48 +0,0 @@
.mt-5 {
margin-top: 5px !important;
}
.mt-10 {
margin-top: 10px !important;
}
.faded {
opacity: 0.5;
}
.center-align {
text-align: center !important;
}
.block {
display: block !important;
}
.wrap {
word-wrap: break-word;
word-break: break-all;
}
.medium-padding {
padding: 10px !important;
}
.red {
color: red !important;
}
.bold {
font-weight: bold !important;
}
.normal {
font-weight: normal !important;
}
.small {
font-size: 10px;
}
.medium {
font-size: 14px !important;
}

View File

@@ -1,6 +1,18 @@
.sn-component {
}
.panel {
color: black;
.header {
.close-button {
&:hover {
text-decoration: none;
}
}
}
input {
min-height: 39px;
}

View File

@@ -56,3 +56,57 @@ $screen-md-max: ($screen-lg-min - 1) !default;
@content;
}
}
.selectable {
user-select: text !important;
cursor: text;
}
.mt-5 {
margin-top: 5px !important;
}
.mt-10 {
margin-top: 10px !important;
}
.faded {
opacity: 0.5;
}
.center-align {
text-align: center !important;
}
.block {
display: block !important;
}
.wrap {
word-wrap: break-word;
word-break: break-all;
}
.medium-padding {
padding: 10px !important;
}
.red {
color: red !important;
}
.bold {
font-weight: bold !important;
}
.normal {
font-weight: normal !important;
}
.small {
font-size: 10px;
}
.medium {
font-size: 14px !important;
}

View File

@@ -1,13 +1,9 @@
$dark-gray: #2e2e2e;
@import "app/standard";
@import "app/main";
@import "app/ui";
@import "app/footer";
@import "app/tags";
@import "app/notes";
@import "app/editor";
@import "app/extensions";
@import "app/menus";
@import "app/modals";
@import "app/lock-screen";

View File

@@ -4,33 +4,29 @@
%a.no-decoration{"ng-if" => "extensions.length == 0", "href" => "https://standardnotes.org/extensions", "target" => "blank"}
%menu-row{"title" => "'Download Actions'"}
.section{"ng-repeat" => "extension in extensions"}
%div{"ng-repeat" => "extension in extensions"}
.header{"ng-click" => "extension.hide = !extension.hide; $event.stopPropagation();"}
.column
%h4.title {{extension.name}}
.subtitle
Will submit your note
%strong {{accessTypeForExtension(extension)}}
.spinner.small.loading{"ng-if" => "extension.loading"}
%div{"ng-if" => "extension.hide"} …
%menu-row{"ng-if" => "!extension.hide", "ng-repeat" => "action in extension.actionsWithContextForItem(item)", "ng-click" => "executeAction(action, extension); $event.stopPropagation();",
"ng-class" => "{'faded' : !isActionEnabled(action, extension)}", "title" => "action.label", "subtitle" => "action.desc"}
.small.normal{"ng-if" => "!isActionEnabled(action, extension)"}
Requires {{action.access_type}} access to this note.
%menu-row{"ng-if" => "!extension.hide", "ng-repeat" => "action in extension.actionsWithContextForItem(item)",
"ng-click" => "executeAction(action, extension); $event.stopPropagation();", "title" => "action.label", "subtitle" => "action.desc",
"spinner-class" => "action.running ? 'info' : null", "sub-rows" => "action.subrows"}
.sublabel{"ng-if" => "action.access_type"}
Uses
%strong {{action.access_type}}
access to this note.
%div{"ng-if" => "action.showNestedActions"}
%ul.mt-10
%li.menu-item.white-bg.nested-hover{"ng-repeat" => "subaction in action.subactions", "ng-click" => "executeAction(subaction, extension, action); $event.stopPropagation();", "style" => "margin-top: -1px;"}
%label.menu-item-title {{subaction.label}}
.menu-item-subtitle {{subaction.desc}}
%span{"ng-if" => "subaction.running"}
.spinner.small{"style" => "margin-top: 3px;"}
%span{"ng-if" => "action.running"}
.spinner.small{"style" => "margin-top: 3px;"}
.extension-render-modal{"ng-if" => "renderData.showRenderModal", "ng-click" => "renderData.showRenderModal = false"}
.content
%h2 {{renderData.title}}
%p.normal{"style" => "white-space: pre-wrap; font-family: monospace; font-size: 16px;"} {{renderData.text}}
.modal.medium{"ng-if" => "renderData.showRenderModal", "ng-click" => "$event.stopPropagation();"}
.content
.sn-component
.panel
.header
%h1.title Preview
%a.close-button.info{"ng-click" => "renderData.showRenderModal = false; $event.stopPropagation();"} Close
.content.selectable
%h2 {{renderData.title}}
%p.normal{"style" => "white-space: pre-wrap; font-family: monospace; font-size: 16px;"} {{renderData.text}}

View File

@@ -9,7 +9,7 @@
"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
.row{"ng-if" => "component.conflict_of || offlineAvailableForComponent(editor)"}
.column
%strong.red.medium{"ng-if" => "editor.conflict_of"} Conflicted copy
.sublabel{"ng-if" => "offlineAvailableForComponent(editor)"}
@@ -22,8 +22,8 @@
%h4.title Editor Stack
%menu-row{"ng-repeat" => "component in stack", "ng-click" => "selectComponent($event, component)", "title" => "component.name",
"circle" => "component.active ? 'success' : 'danger'"}
.row
.row{"ng-if" => "component.conflict_of || offlineAvailableForComponent(component)"}
.column
%strong.red.medium{"ng-if" => "component.conflict_of"} Conflicted copy
.sublabel{"ng-if" => "component.local_url"}
.sublabel{"ng-if" => "offlineAvailableForComponent(component)"}
Available Offline

View File

@@ -9,6 +9,13 @@
.sublabel{"ng-if" => "subtitle"}
{{subtitle}}
%ng-transclude
.subrows{"ng-if" => "subRows && subRows.length > 0"}
%menu-row{"ng-repeat" => "row in subRows", "ng-click" => "row.onClick($event); $event.stopPropagation();",
"title" => "row.title", "subtitle" => "row.subtitle", "spinner-class" => "row.spinnerClass"}
.column{"ng-if" => "hasButton"}
.button.info{"ng-click" => "clickButton($event)", "ng-class" => "buttonClass"}
{{buttonText}}
.column{"ng-if" => "spinnerClass"}
.spinner.small{"ng-class" => "spinnerClass"}

View File

@@ -28,7 +28,7 @@
.right
.item{"ng-if" => "ctrl.newUpdateAvailable", "ng-click" => "ctrl.clickedNewUpdateAnnouncement()"}
%span.tinted.normal New update downloaded. Installs on app restart.
%span.info.normal New update downloaded. Installs on app restart.
.item.no-pointer{"ng-if" => "ctrl.lastSyncDate && !ctrl.isRefreshing"}
.label.subtle

View File

@@ -48,7 +48,7 @@
%strong.red.medium{"ng-if" => "note.errorDecrypting"} Error decrypting
.pinned.tinted{"ng-if" => "note.pinned", "ng-class" => "{'tinted-selected' : ctrl.selectedNote == note}"}
%i.icon.ion-ios-flag
%i.icon.ion-bookmark
%strong.medium Pinned
.archived.tinted{"ng-if" => "note.archived && !ctrl.tag.archiveTag", "ng-class" => "{'tinted-selected' : ctrl.selectedNote == note}"}

7
package-lock.json generated
View File

@@ -5781,9 +5781,10 @@
"dev": true
},
"sn-stylekit": {
"version": "1.0.115",
"resolved": "https://registry.npmjs.org/sn-stylekit/-/sn-stylekit-1.0.115.tgz",
"integrity": "sha512-NsOS+sJoLBexantCSU/kwFWoRquAVDWs/+lxPQ1UHhEFh2Gj8G7q3omZmmbesTnHvL0vf+XK55Ne8sr50ZWJag=="
"version": "1.0.1191",
"resolved": "https://registry.npmjs.org/sn-stylekit/-/sn-stylekit-1.0.1191.tgz",
"integrity": "sha512-Xez1FNz822zw7NsG9krfxiSXklYZQNwQRSaTbxnYXmOjqCvcsGiWAgEyUzSo5p3g2nVIC/8LzKIrQw4/b3ORXw==",
"dev": true
},
"snake-case": {
"version": "https://registry.npmjs.org/snake-case/-/snake-case-2.1.0.tgz",

View File

@@ -32,10 +32,8 @@
"karma": "^1.4.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.2"
"karma-phantomjs-launcher": "^1.0.2",
"sn-stylekit": "^1.0.1191"
},
"license": "GPL-3.0",
"dependencies": {
"sn-stylekit": "^1.0.115"
}
"license": "GPL-3.0"
}

Binary file not shown.

File diff suppressed because it is too large Load Diff

Before

Width:  |  Height:  |  Size: 326 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Binary file not shown.