Merge pull request #73 from standardnotes/preview-action
preview action, click outside panel handle
This commit is contained in:
@@ -231,10 +231,6 @@ angular.module('app.frontend')
|
||||
}
|
||||
}
|
||||
|
||||
this.clickedMenu = function() {
|
||||
this.showMenu = !this.showMenu;
|
||||
}
|
||||
|
||||
this.deleteNote = function() {
|
||||
if(confirm("Are you sure you want to delete this note?")) {
|
||||
this.remove()(this.note);
|
||||
|
||||
@@ -37,6 +37,7 @@ class Item {
|
||||
|
||||
updateFromJSON(json) {
|
||||
_.merge(this, json);
|
||||
|
||||
if(this.created_at) {
|
||||
this.created_at = new Date(this.created_at);
|
||||
this.updated_at = new Date(this.updated_at);
|
||||
|
||||
@@ -79,6 +79,7 @@ class Extension extends Item {
|
||||
super.mapContentToLocalProperties(contentObject)
|
||||
this.name = contentObject.name;
|
||||
this.url = contentObject.url;
|
||||
this.supported_types = contentObject.supported_types;
|
||||
this.actions = contentObject.actions.map(function(action){
|
||||
return new Action(action);
|
||||
})
|
||||
@@ -99,7 +100,8 @@ class Extension extends Item {
|
||||
var params = {
|
||||
name: this.name,
|
||||
url: this.url,
|
||||
actions: this.actions
|
||||
actions: this.actions,
|
||||
supported_types: this.supported_types
|
||||
};
|
||||
|
||||
_.merge(params, super.structureParams());
|
||||
|
||||
@@ -102,7 +102,6 @@ class DBManager {
|
||||
this.openDatabase((db) => {
|
||||
var request = db.transaction("items", "readwrite").objectStore("items").delete(item.uuid);
|
||||
request.onsuccess = function(event) {
|
||||
console.log("Successfully deleted item", item.uuid);
|
||||
if(callback) {
|
||||
callback(true);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
angular
|
||||
.module('app.frontend')
|
||||
.directive('clickOutside', ['$document', function($document) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
replace: false,
|
||||
link : function($scope, $element, attrs) {
|
||||
|
||||
var didApplyClickOutside = false;
|
||||
|
||||
$element.bind('click', function(e) {
|
||||
didApplyClickOutside = false;
|
||||
if (attrs.isOpen) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
});
|
||||
|
||||
$document.bind('click', function() {
|
||||
if(!didApplyClickOutside) {
|
||||
$scope.$apply(attrs.clickOutside);
|
||||
didApplyClickOutside = true;
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}]);
|
||||
@@ -11,6 +11,8 @@ class ContextualExtensionsMenu {
|
||||
controller($scope, modelManager, extensionManager) {
|
||||
'ngInject';
|
||||
|
||||
$scope.renderData = {};
|
||||
|
||||
$scope.extensions = _.map(extensionManager.extensionsInContextOfItem($scope.item), function(ext){
|
||||
return _.cloneDeep(ext);
|
||||
});
|
||||
@@ -27,12 +29,30 @@ class ContextualExtensionsMenu {
|
||||
}
|
||||
|
||||
$scope.executeAction = function(action, extension) {
|
||||
if(action.verb == "nested") {
|
||||
action.showNestedActions = !action.showNestedActions;
|
||||
return;
|
||||
}
|
||||
action.running = true;
|
||||
extensionManager.executeAction(action, extension, $scope.item, function(response){
|
||||
action.running = false;
|
||||
$scope.handleActionResponse(action, response);
|
||||
})
|
||||
}
|
||||
|
||||
$scope.handleActionResponse = function(action, response) {
|
||||
switch (action.verb) {
|
||||
case "render": {
|
||||
var item = response.item;
|
||||
if(item.content_type == "Note") {
|
||||
$scope.renderData.title = item.title;
|
||||
$scope.renderData.text = item.text;
|
||||
$scope.renderData.showRenderModal = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$scope.accessTypeForExtension = function(extension) {
|
||||
return extensionManager.extensionUsesEncryptedData(extension) ? "encrypted" : "decrypted";
|
||||
}
|
||||
|
||||
@@ -28,7 +28,7 @@ class ExtensionManager {
|
||||
|
||||
extensionsInContextOfItem(item) {
|
||||
return this.extensions.filter(function(ext){
|
||||
return ext.actionsWithContextForItem(item).length > 0;
|
||||
return _.includes(ext.supported_types, item.content_type) || ext.actionsWithContextForItem(item).length > 0;
|
||||
})
|
||||
}
|
||||
|
||||
@@ -152,9 +152,29 @@ class ExtensionManager {
|
||||
case "get": {
|
||||
this.Restangular.oneUrl(action.url, action.url).get().then(function(response){
|
||||
action.error = false;
|
||||
var items = response.items;
|
||||
this.modelManager.mapResponseItemsToLocalModels(items);
|
||||
customCallback(items);
|
||||
var items = response.items || [response.item];
|
||||
EncryptionHelper.decryptMultipleItems(items, localStorage.getItem("mk"));
|
||||
items = this.modelManager.mapResponseItemsToLocalModels(items);
|
||||
for(var item of items) {
|
||||
item.setDirty(true);
|
||||
}
|
||||
this.syncManager.sync(null);
|
||||
customCallback({items: items});
|
||||
}.bind(this))
|
||||
.catch(function(response){
|
||||
action.error = true;
|
||||
customCallback(null);
|
||||
})
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case "render": {
|
||||
this.Restangular.oneUrl(action.url, action.url).get().then(function(response){
|
||||
action.error = false;
|
||||
EncryptionHelper.decryptItem(response.item, localStorage.getItem("mk"));
|
||||
var item = this.modelManager.createItem(response.item);
|
||||
customCallback({item: item});
|
||||
}.bind(this))
|
||||
.catch(function(response){
|
||||
action.error = true;
|
||||
|
||||
@@ -64,10 +64,10 @@ class ModelManager {
|
||||
json_obj = _.omit(json_obj, omitFields || [])
|
||||
var item = this.findItem(json_obj["uuid"]);
|
||||
if(json_obj["deleted"] == true || !_.includes(this.acceptableContentTypes, json_obj["content_type"])) {
|
||||
if(item) {
|
||||
this.removeItemLocally(item)
|
||||
}
|
||||
continue;
|
||||
if(item) {
|
||||
this.removeItemLocally(item)
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
_.omit(json_obj, omitFields);
|
||||
|
||||
@@ -1,4 +1,33 @@
|
||||
.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);
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu.contextual-menu {
|
||||
overflow-y: scroll;
|
||||
max-height: 85vh;
|
||||
|
||||
.extension {
|
||||
|
||||
&:not(:first-child) {
|
||||
|
||||
@@ -177,15 +177,6 @@
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.full-screen-button {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 20px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
list-style-position: inside;
|
||||
@@ -196,8 +187,6 @@ ol {
|
||||
-webkit-padding-start: 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nav-tabs {
|
||||
a {
|
||||
color: black;
|
||||
|
||||
@@ -150,6 +150,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.footer-bar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@@ -194,10 +199,6 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 14px !important;
|
||||
|
||||
@@ -10,5 +10,19 @@
|
||||
%li.action{"ng-repeat" => "action in extension.actionsWithContextForItem(item)", "ng-click" => "executeAction(action, extension)"}
|
||||
.name {{action.label}}
|
||||
.desc {{action.desc}}
|
||||
|
||||
%div{"ng-if" => "action.showNestedActions"}
|
||||
%ul.mt-10
|
||||
%li.action.white-bg{"ng-repeat" => "subaction in action.subactions", "ng-click" => "executeAction(subaction, extension); $event.stopPropagation()", "style" => "margin-top: -1px;"}
|
||||
.name {{subaction.label}}
|
||||
.desc {{subaction.desc}}
|
||||
%span{"ng-if" => "subaction.running"}
|
||||
.spinner{"style" => "margin-top: 3px;"}
|
||||
|
||||
%span{"ng-if" => "action.running"}
|
||||
.spinner{"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}}
|
||||
|
||||
@@ -11,8 +11,8 @@
|
||||
"ng-model" => "ctrl.tagsString", "placeholder" => "#tags", "ng-blur" => "ctrl.updateTagsFromTagsString($event, ctrl.tagsString)"}
|
||||
.section-menu
|
||||
%ul.nav.nav-pills
|
||||
%li.dropdown
|
||||
%a.dropdown-toggle{"ng-click" => "ctrl.clickedMenu(); ctrl.showExtensions = false"}
|
||||
%li.dropdown{"click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"}
|
||||
%a.dropdown-toggle{"ng-click" => "ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false;"}
|
||||
File
|
||||
%span.caret
|
||||
%span.sr-only
|
||||
@@ -27,8 +27,8 @@
|
||||
%li{"ng-click" => "ctrl.deleteNote()"}
|
||||
.text Delete
|
||||
%li.sep
|
||||
%li.dropdown{"ng-if" => "ctrl.hasAvailableExtensions()"}
|
||||
%a.dropdown-toggle{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false"}
|
||||
%li.dropdown{"ng-if" => "ctrl.hasAvailableExtensions()", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"}
|
||||
%a.dropdown-toggle{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false;"}
|
||||
Extensions
|
||||
%span.caret
|
||||
%span.sr-only
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
.footer-bar
|
||||
.pull-left
|
||||
.footer-bar-link
|
||||
.footer-bar-link{"click-outside" => "ctrl.showAccountMenu = false;", "is-open" => "ctrl.showAccountMenu"}
|
||||
%a{"ng-click" => "ctrl.accountMenuPressed()", "ng-class" => "{red: ctrl.error}"} Account
|
||||
%account-menu{"ng-if" => "ctrl.showAccountMenu"}
|
||||
|
||||
.footer-bar-link
|
||||
.footer-bar-link{"click-outside" => "ctrl.showExtensionsMenu = false;", "is-open" => "ctrl.showExtensionsMenu"}
|
||||
%a{"ng-click" => "ctrl.toggleExtensions()"} Extensions
|
||||
%global-extensions-menu{"ng-if" => "ctrl.showExtensionsMenu"}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user