Editor stack app bar, expired components enter readonly state

This commit is contained in:
Mo Bitar
2018-12-15 12:22:41 -06:00
parent f7dfec36f8
commit dcd44083ac
8 changed files with 64 additions and 90 deletions

View File

@@ -674,9 +674,14 @@ angular.module('app')
}
}});
this.reloadComponentContext = function() {
// componentStack is used by the template to ng-repeat
this.componentStack = componentManager.componentsForArea("editor-stack");
this.componentStack = componentManager.componentsForArea("editor-stack").sort((a, b) => {
// Careful here. For some reason, sorting by updated_at (or any other property that may always be changing)
// causes weird problems with ext communication when changing notes or activating/deactivating in quick succession
return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
});
/*
In the past, we were doing this looping code even if the note wasn't currently defined.
The problem is if an editor stack item loaded first, requested to stream items, and the note was undefined,

View File

@@ -149,7 +149,7 @@ class ComponentView {
$scope.reloading = true;
let previouslyValid = $scope.componentValid;
var expired, offlineRestricted, urlError;
var offlineRestricted, urlError;
offlineRestricted = component.offlineOnly && !isDesktopApplication();
@@ -158,13 +158,19 @@ class ComponentView {
||
(isDesktopApplication() && (!component.local_url && !component.hasValidHostedUrl()))
expired = component.valid_until && component.valid_until <= new Date();
$scope.expired = component.valid_until && component.valid_until <= new Date();
$scope.componentValid = !offlineRestricted && !urlError && !expired;
component.readonly = $scope.expired;
$scope.componentValid = !offlineRestricted && !urlError;
if(!$scope.componentValid) {
// required to disable overlay
$scope.loading = false;
}
if(offlineRestricted) $scope.error = 'offline-restricted';
else if(urlError) $scope.error = 'url-missing';
else if(expired) $scope.error = 'expired';
else $scope.error = null;
if($scope.componentValid !== previouslyValid) {
@@ -174,7 +180,7 @@ class ComponentView {
}
}
if(expired && doManualReload) {
if($scope.expired && doManualReload) {
// Try reloading, handled by footer, which will open Extensions window momentarily to pull in latest data
// Upon completion, this method, reloadStatus, will be called, upon where doManualReload will be false to prevent recursion.
$rootScope.$broadcast("reload-ext-data");

View File

@@ -19,10 +19,6 @@ class EditorMenu {
return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
});
$scope.stack = componentManager.componentsForArea("editor-stack").sort((a, b) => {
return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
});
$scope.isDesktop = isDesktopApplication();
$scope.defaultEditor = $scope.editors.filter((e) => {return e.isDefaultEditor()})[0];
@@ -77,17 +73,10 @@ class EditorMenu {
if(component == $scope.selectedEditor) {
return true;
} else if(component.area == "editor-stack") {
return $scope.stackComponentEnabled(component);
} else {
return false;
}
}
$scope.stackComponentEnabled = function(component) {
return component.active && !component.isExplicitlyDisabledForItem($scope.currentItem);
}
}
}

View File

@@ -313,6 +313,24 @@ class ComponentManager {
return;
}
// Actions that won't succeeed with readonly mode
let readwriteActions = [
"save-items",
"associate-item",
"deassociate-item",
"create-item",
"create-items",
"delete-items",
"set-component-data"
];
if(component.readonly && readwriteActions.includes(message.action)) {
// A component can be marked readonly if changes should not be saved.
// Particullary used for revision preview windows where the notes should not be savable.
alert(`The extension ${component.name} is trying to save, but it is in a locked state and cannot accept changes.`);
return;
}
/**
Possible Messages:
set-size
@@ -473,13 +491,6 @@ class ComponentManager {
}
handleSaveItemsMessage(component, message) {
if(component.readonly) {
// A component can be marked readonly if changes should not be saved.
// Particullary used for revision preview windows where the notes should not be savable.
alert(`The extension ${component.name} is trying to save, but it is in a locked state and cannot accept changes.`);
return;
}
var responseItems = message.data.items;
var requiredPermissions;

View File

@@ -132,7 +132,13 @@ $heading-height: 75px;
width: 100%;
// When two component stack items are expired and eat up full screen, this is required to scroll them.
overflow: auto;
// overflow: auto;
// When expired components, without this, requires scroll
overflow: visible;
#component-stack-menu-bar {
border-bottom: none;
}
.component-stack-item {
width: 100%;

View File

@@ -18,62 +18,20 @@
.sk-app-bar-item{"ng-click" => "disableActiveTheme()"}
.sk-label Disable Active Theme
.sn-component{"ng-if" => "error == 'expired'"}
.sk-panel.static
.sk-panel-content
.sk-panel-section.stretch
.sk-panel-sectin-title Unable to load Standard Notes Extended
%p Your Extended subscription expired on {{component.dateToLocalizedString(component.valid_until)}}.
%p
Please visit
%a{"href" => "https://dashboard.standardnotes.org", "target" => "_blank"} dashboard.standardnotes.org
to renew your subscription.
.sk-panel-row
.sk-panel-column
%p
%strong To reload your account status:
%p
%ol
%li
Open the
%strong Extensions
menu located in the lower left corner of the app to refresh your account status.
%li Click Reload below.
.sk-panel-row
.sk-button.info{"ng-if" => "!reloading", "ng-click" => "reloadStatus()"}
.sk-label Reload
.sk-spinner.info.small{"ng-if" => "reloading"}
.sk-panel-row
.sk-panel-section
%p{"ng-if" => "component.isEditor()"}
<strong>Otherwise</strong>, please follow the steps below to disable any external editors,
so you can edit your note using the plain text editor instead.
%p To temporarily disable this extension:
.sk-panel-row
.sk-button.info{"ng-click" => "destroy()"}
.sk-label Disable Extension
.sk-spinner.info.small{"ng-if" => "reloading"}
.sk-panel-row
%div{"ng-if" => "component.isEditor()"}
%p To disassociate this note from this editor:
%ol
%li Click the "Editor" menu item above (under the note title).
%li Select "Plain Editor".
%li Repeat this for every note you'd like to access. You can also delete the editor completely to disable it for all notes. To do so, click "Extensions" in the lower left corner of the app, then, for every editor, click "Uninstall".
%p
Need help? Please email us at
%a{"href" => "mailto:hello@standardnotes.org", "target" => "_blank"} hello@standardnotes.org
or check out the
%a{"href" => "https://standardnotes.org/help", "target" => "_blank"} Help
page.
.sn-component{"ng-if" => "expired"}
.sk-app-bar
.left
.sk-app-bar-item
.sk-app-bar-item-column
.sk-circle.danger.small
.sk-app-bar-item-column
%a.sk-label.sk-base{"href" => "https://dashboard.standardnotes.org", "target" => "_blank"}
Your Extended subscription expired on {{component.dateToLocalizedString(component.valid_until)}}.
Extensions are in a read-only state.
.right
.sk-app-bar-item
.sk-app-bar-item-column
%a.sk-label{"href" => "https://standardnotes.org/help", "target" => "_blank"} Help
.sn-component{"ng-if" => "error == 'offline-restricted'"}
.sk-panel.static

View File

@@ -15,12 +15,3 @@
%a.no-decoration{"ng-if" => "editors.length == 0", "href" => "https://standardnotes.org/extensions", "target" => "blank"}
%menu-row{"label" => "'Download More Editors'"}
.sk-menu-panel-section{"ng-if" => "stack.length > 0"}
.sk-menu-panel-header
.sk-menu-panel-header-title Editor Stack
%menu-row{"ng-repeat" => "component in stack", "action" => "selectComponent(component)", "label" => "component.name",
"circle" => "stackComponentEnabled(component) ? 'success' : 'danger'"}
.sk-menu-panel-column{"ng-if" => "component.conflict_of || shouldDisplayRunningLocallyLabel(component)"}
%strong.danger.medium-text{"ng-if" => "component.conflict_of"} Conflicted copy
.sk-sublabel{"ng-if" => "shouldDisplayRunningLocallyLabel(component)"} Running Locally

View File

@@ -82,6 +82,14 @@
%p.medium-padding{"style" => "padding-top: 0 !important;"} There was an error decrypting this item. Ensure you are running the latest version of this app, then sign out and sign back in to try again.
#editor-pane-component-stack
#component-stack-menu-bar.sk-app-bar
.left
.sk-app-bar-item{"ng-repeat" => "component in ctrl.componentStack", "ng-click" => "ctrl.toggleStackComponentForCurrentItem(component)"}
.sk-app-bar-item-column
.sk-circle.small{"ng-class" => "{'info' : !component.hidden && component.active, 'neutral' : component.hidden || !component.active}"}
.sk-app-bar-item-column
.sk-label {{component.name}}
.sn-component
%component-view.component-view.component-stack-item{"ng-repeat" => "component in ctrl.componentStack",
"ng-if" => "component.active", "ng-show" => "!component.hidden", "manual-dealloc" => "true", "component" => "component"}