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

Fixes issue with components in revision preview not iframe loading, misc css/html updates

Browse Source
This commit is contained in:
Mo Bitar
2018-12-17 09:52:25 -06:00
parent 363fb7bd7f
commit 2f20e92af1
12 changed files with 73 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/app/controllers/editor.js
View File

@@ -613,7 +613,9 @@ angular.module('app')
this.reloadComponentContext(); this.reloadComponentContext();
} }
}, contextRequestHandler: (component) => { }, contextRequestHandler: (component) => {
return this.note; if(component == this.selectedEditor || this.componentStack.includes(component)) {
return this.note;
}
}, focusHandler: (component, focused) => { }, focusHandler: (component, focused) => {
if(component.isEditor() && focused) { if(component.isEditor() && focused) {
this.closeAllMenus(); this.closeAllMenus();

6
app/assets/javascripts/app/controllers/home.js
View File

@@ -208,7 +208,7 @@ angular.module('app')
modelManager.setItemToBeDeleted(tag); modelManager.setItemToBeDeleted(tag);
syncManager.sync().then(() => { syncManager.sync().then(() => {
// force scope tags to update on sub directives // force scope tags to update on sub directives
$scope.safeApply(); $rootScope.safeApply();
}); });
} }
} }
@@ -230,7 +230,7 @@ angular.module('app')
Shared Callbacks Shared Callbacks
*/ */
$scope.safeApply = function(fn) { $rootScope.safeApply = function(fn) {
var phase = this.$root.$$phase; var phase = this.$root.$$phase;
if(phase == '$apply' || phase == '$digest') if(phase == '$apply' || phase == '$digest')
this.$eval(fn); this.$eval(fn);
@@ -262,7 +262,7 @@ angular.module('app')
// when deleting items while ofline, we need to explictly tell angular to refresh UI // when deleting items while ofline, we need to explictly tell angular to refresh UI
setTimeout(function () { setTimeout(function () {
$rootScope.notifyDelete(); $rootScope.notifyDelete();
$scope.safeApply(); $rootScope.safeApply();
}, 50); }, 50);
} else { } else {
$timeout(() => { $timeout(() => {

14
app/assets/javascripts/app/directives/views/componentView.js
View File

@@ -94,7 +94,6 @@ class ComponentView {
} }
}, 3500); }, 3500);
iframe.onload = (event) => { iframe.onload = (event) => {
// console.log("iframe loaded for component", component.name, "cancelling load timeout", $scope.loadTimeout);
$timeout.cancel($scope.loadTimeout); $timeout.cancel($scope.loadTimeout);
componentManager.registerComponentWindow(component, iframe.contentWindow); componentManager.registerComponentWindow(component, iframe.contentWindow);
@@ -141,7 +140,11 @@ class ComponentView {
$scope.reloadComponent = function() { $scope.reloadComponent = function() {
console.log("Reloading component", $scope.component); console.log("Reloading component", $scope.component);
componentManager.reloadComponent($scope.component); // force iFrame to deinit, allows new one to be created
$scope.componentValid = false;
componentManager.reloadComponent($scope.component).then(() => {
$scope.reloadStatus();
});
} }
$scope.reloadStatus = function(doManualReload = true) { $scope.reloadStatus = function(doManualReload = true) {
@@ -160,7 +163,11 @@ class ComponentView {
$scope.expired = component.valid_until && component.valid_until <= new Date(); $scope.expired = component.valid_until && component.valid_until <= new Date();
component.readonly = $scope.expired; // Here we choose our own readonly state based on custom logic. However, if a parent
// wants to implement their own readonly logic, they can lock it.
if(!component.lockReadonly) {
component.readonly = $scope.expired;
}
$scope.componentValid = !offlineRestricted && !urlError; $scope.componentValid = !offlineRestricted && !urlError;
@@ -234,7 +241,6 @@ class ComponentView {
} }
$scope.$on("$destroy", function() { $scope.$on("$destroy", function() {
// console.log("Deregistering handler", $scope.identifier, $scope.component.name);
$scope.destroy(); $scope.destroy();
}); });
} }

35
app/assets/javascripts/app/directives/views/revisionPreviewModal.js
View File

@@ -13,7 +13,7 @@ class RevisionPreviewModal {
$scope.el = el; $scope.el = el;
} }
controller($scope, modelManager, syncManager, componentManager) { controller($scope, modelManager, syncManager, componentManager, $timeout) {
'ngInject'; 'ngInject';
$scope.dismiss = function() { $scope.dismiss = function() {
@@ -31,29 +31,32 @@ class RevisionPreviewModal {
// Set UUID to editoForNote can find proper editor, // Set UUID to editoForNote can find proper editor,
// but then generate new uuid for note as not to save changes to original, if editor makes changes. // but then generate new uuid for note as not to save changes to original, if editor makes changes.
$scope.note.uuid = $scope.uuid; $scope.note.uuid = $scope.uuid;
let editor = componentManager.editorForNote($scope.note); let editorForNote = componentManager.editorForNote($scope.note);
$scope.note.uuid = SFJS.crypto.generateUUIDSync(); $scope.note.uuid = SFJS.crypto.generateUUIDSync();
if(editor) { if(editorForNote) {
// Create temporary copy, as a lot of componentManager is uuid based, // Create temporary copy, as a lot of componentManager is uuid based,
// so might interfere with active editor. Be sure to copy only the content, as the // so might interfere with active editor. Be sure to copy only the content, as the
// top level editor object has non-copyable properties like .window, which cannot be transfered // top level editor object has non-copyable properties like .window, which cannot be transfered
$scope.editor = new SNComponent({content: editor.content}); let editorCopy = new SNComponent({content: editorForNote.content});
$scope.editor.readonly = true; editorCopy.readonly = true;
$scope.identifier = $scope.editor.uuid; editorCopy.lockReadonly = true;
$scope.identifier = editorCopy.uuid;
componentManager.registerHandler({identifier: $scope.identifier, areas: ["editor-editor"], componentManager.registerHandler({identifier: $scope.identifier, areas: ["editor-editor"],
contextRequestHandler: (component) => { contextRequestHandler: (component) => {
if(component == $scope.editor) { if(component == $scope.editor) {
return $scope.note; return $scope.note;
}
},
componentForSessionKeyHandler: (key) => {
if(key == $scope.editor.sessionKey) {
return $scope.editor;
}
} }
}, });
componentForSessionKeyHandler: (key) => {
if(key == $scope.editor.sessionKey) { $scope.editor = editorCopy;
return $scope.editor;
}
}
});
} }

36
app/assets/javascripts/app/services/componentManager.js
View File

@@ -299,6 +299,9 @@ class ComponentManager {
for(let handler of this.handlers) { for(let handler of this.handlers) {
if(handler.componentForSessionKeyHandler) { if(handler.componentForSessionKeyHandler) {
component = handler.componentForSessionKeyHandler(key); component = handler.componentForSessionKeyHandler(key);
if(component) {
break;
}
} }
} }
} }
@@ -881,25 +884,29 @@ class ComponentManager {
} }
/* Performs func in timeout, but syncronously, if used `await waitTimeout` */ /* Performs func in timeout, but syncronously, if used `await waitTimeout` */
async waitTimeout(func) { // No longer used. See comment in activateComponent.
return new Promise((resolve, reject) => { // async waitTimeout(func) {
this.timeout(() => { // return new Promise((resolve, reject) => {
func(); // this.timeout(() => {
resolve(); // func();
}); // resolve();
}) // });
} // })
// }
async activateComponent(component, dontSync = false) { async activateComponent(component, dontSync = false) {
var didChange = component.active != true; var didChange = component.active != true;
component.active = true; component.active = true;
for(var handler of this.handlers) { for(let handler of this.handlers) {
if(handler.areas.includes(component.area) || handler.areas.includes("*")) { if(handler.areas.includes(component.area) || handler.areas.includes("*")) {
// We want to run the handler in a $timeout so the UI updates, but we also don't want it to run asyncronously // We want to run the handler in a $timeout so the UI updates, but we also don't want it to run asyncronously
// so that the steps below this one are run before the handler. So we run in a waitTimeout. // so that the steps below this one are run before the handler. So we run in a waitTimeout.
await this.waitTimeout(() => { // Update 12/18: We were using this.waitTimeout previously, however, that caused the iframe.onload callback to never be called
// for some reason for iframes on desktop inside the revision-preview-modal. So we'll use safeApply instead. I'm not quite sure
// where the original "so the UI updates" comment applies to, but we'll have to keep an eye out to see if this causes problems somewhere else.
this.$rootScope.safeApply(() => {
handler.activationHandler && handler.activationHandler(component); handler.activationHandler && handler.activationHandler(component);
}) })
} }
@@ -926,7 +933,8 @@ class ComponentManager {
for(let handler of this.handlers) { for(let handler of this.handlers) {
if(handler.areas.includes(component.area) || handler.areas.includes("*")) { if(handler.areas.includes(component.area) || handler.areas.includes("*")) {
await this.waitTimeout(() => { // See comment in activateComponent regarding safeApply and awaitTimeout
this.$rootScope.safeApply(() => {
handler.activationHandler && handler.activationHandler(component); handler.activationHandler && handler.activationHandler(component);
}) })
} }
@@ -960,7 +968,8 @@ class ComponentManager {
for(let handler of this.handlers) { for(let handler of this.handlers) {
if(handler.areas.includes(component.area) || handler.areas.includes("*")) { if(handler.areas.includes(component.area) || handler.areas.includes("*")) {
await this.waitTimeout(() => { // See comment in activateComponent regarding safeApply and awaitTimeout
this.$rootScope.safeApply(() => {
handler.activationHandler && handler.activationHandler(component); handler.activationHandler && handler.activationHandler(component);
}) })
} }
@@ -986,7 +995,8 @@ class ComponentManager {
component.active = true; component.active = true;
for(var handler of this.handlers) { for(var handler of this.handlers) {
if(handler.areas.includes(component.area) || handler.areas.includes("*")) { if(handler.areas.includes(component.area) || handler.areas.includes("*")) {
await this.waitTimeout(() => { // See comment in activateComponent regarding safeApply and awaitTimeout
this.$rootScope.safeApply(() => {
handler.activationHandler && handler.activationHandler(component); handler.activationHandler && handler.activationHandler(component);
}) })
} }

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

@@ -29,7 +29,7 @@ $heading-height: 75px;
overflow: visible; overflow: visible;
> .title { > .title {
font-size: 18px; font-size: var(--sn-stylekit-font-size-h1);
font-weight: bold; font-weight: bold;
padding-top: 0px; padding-top: 0px;
width: 100%; width: 100%;
@@ -58,7 +58,7 @@ $heading-height: 75px;
position: absolute; position: absolute;
right: 20px; right: 20px;
font-size: 12px; font-size: var(--sn-stylekit-font-size-h5);
text-transform: none; text-transform: none;
font-weight: normal; font-weight: normal;
margin-top: 4px; margin-top: 4px;

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

@@ -22,7 +22,7 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
min-height: 100%; min-height: 100%;
height: 100%; height: 100%;
font-size: 14px; font-size: var(--sn-stylekit-base-font-size);
margin: 0; margin: 0;
color: var(--sn-stylekit-foreground-color); color: var(--sn-stylekit-foreground-color);
background-color: var(--sn-stylekit-background-color); background-color: var(--sn-stylekit-background-color);
@@ -172,7 +172,6 @@ $footer-height: 32px;
padding-bottom: 0px; padding-bottom: 0px;
height: 100%; height: 100%;
max-height: calc(100vh - #{$footer-height}); max-height: calc(100vh - #{$footer-height});
font-size: 17px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@@ -190,7 +189,6 @@ $footer-height: 32px;
.section-title-bar { .section-title-bar {
font-weight: bold; font-weight: bold;
font-size: 14px;
.padded { .padded {
padding: 0 14px; padding: 0 14px;
@@ -200,7 +198,8 @@ $footer-height: 32px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
overflow: hidden; // This was causing problems with tags + button cutting off on right when the panel is a certain size
// overflow: hidden;
> .title { > .title {
white-space: nowrap; white-space: nowrap;

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

@@ -2,6 +2,8 @@
border-left: 1px solid var(--sn-stylekit-border-color); border-left: 1px solid var(--sn-stylekit-border-color);
border-right: 1px solid var(--sn-stylekit-border-color); border-right: 1px solid var(--sn-stylekit-border-color);
font-size: var(--sn-stylekit-font-size-h2);
width: 350px; width: 350px;
flex-grow: 0; flex-grow: 0;
user-select: none; user-select: none;

5
app/assets/stylesheets/app/_tags.scss
View File

@@ -13,8 +13,8 @@
#tags-title-bar { #tags-title-bar {
color: var(--sn-stylekit-secondary-foreground-color); color: var(--sn-stylekit-secondary-foreground-color);
padding-top: 14px; padding-top: 15px;
padding-bottom: 16px; padding-bottom: 8px;
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
font-size: 12px; font-size: 12px;
@@ -43,7 +43,6 @@
cursor: pointer; cursor: pointer;
transition: height .1s ease-in-out; transition: height .1s ease-in-out;
position: relative; position: relative;
font-size: 14px;
> .info { > .info {
height: 20px; height: 20px;

6
app/assets/templates/directives/input-modal.html.haml
View File

@@ -5,15 +5,15 @@
.sn-component .sn-component
.sk-panel .sk-panel
.sk-panel-header .sk-panel-header
%h1.sk-panel-header-title {{title}} .sk-h1.sk-panel-header-title {{title}}
%a.sk-a.info.close-button{"ng-click" => "dismiss()"} Close %a.sk-a.info.close-button{"ng-click" => "dismiss()"} Close
.sk-panel-content .sk-panel-content
.sk-panel-section .sk-panel-section
%p.sk-panel-row {{message}} .sk-p.sk-panel-row {{message}}
.sk-panel-row .sk-panel-row
.sk-panel-column.stretch .sk-panel-column.stretch
%form{"ng-submit" => "submit()"} %form{"ng-submit" => "submit()"}
%input.sk-input{:type => '{{type}}', "ng-model" => "formData.input", "placeholder" => "{{placeholder}}", "sn-autofocus" => "true", "should-focus" => "true"} %input.sk-input.contrast{:type => '{{type}}', "ng-model" => "formData.input", "placeholder" => "{{placeholder}}", "sn-autofocus" => "true", "should-focus" => "true"}
.sk-panel-footer .sk-panel-footer
%a.sk-a.info.right{"ng-click" => "submit()"} %a.sk-a.info.right{"ng-click" => "submit()"}

2
app/assets/templates/directives/privileges-auth-modal.html.haml
View File

@@ -21,7 +21,7 @@
.sk-horizontal-group .sk-horizontal-group
.sk-p.sk-bold Remember For .sk-p.sk-bold Remember For
%a.sk-a.info{"ng-repeat" => "option in sessionLengthOptions", "ng-click" => "selectSessionLength(option.value)", %a.sk-a.info{"ng-repeat" => "option in sessionLengthOptions", "ng-click" => "selectSessionLength(option.value)",
"ng-class" => "{'info boxed' : option.value == selectedSessionLength}"} "ng-class" => "{'boxed' : option.value == selectedSessionLength}"}
{{option.label}} {{option.label}}
.sk-panel-footer.extra-padding .sk-panel-footer.extra-padding

3
app/assets/templates/tags.html.haml
View File

@@ -6,7 +6,8 @@
#tags-content.content{"ng-if" => "!(ctrl.component && ctrl.component.active)"} #tags-content.content{"ng-if" => "!(ctrl.component && ctrl.component.active)"}
#tags-title-bar.section-title-bar #tags-title-bar.section-title-bar
.section-title-bar-header .section-title-bar-header
.title Tags .sk-h3.title
%span.sk-bold Tags
.sk-button.sk-secondary-contrast.wide{"ng-click" => "ctrl.clickedAddNewTag()", "title" => "Create a new tag"} .sk-button.sk-secondary-contrast.wide{"ng-click" => "ctrl.clickedAddNewTag()", "title" => "Create a new tag"}
.sk-label + .sk-label +