rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 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();
}
}, contextRequestHandler: (component) => {
return this.note;
if(component == this.selectedEditor || this.componentStack.includes(component)) {
return this.note;
}
}, focusHandler: (component, focused) => {
if(component.isEditor() && focused) {
this.closeAllMenus();

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

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

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

@@ -94,7 +94,6 @@ class ComponentView {
}
}, 3500);
iframe.onload = (event) => {
// console.log("iframe loaded for component", component.name, "cancelling load timeout", $scope.loadTimeout);
$timeout.cancel($scope.loadTimeout);
componentManager.registerComponentWindow(component, iframe.contentWindow);
@@ -141,7 +140,11 @@ class ComponentView {
$scope.reloadComponent = function() {
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) {
@@ -160,7 +163,11 @@ class ComponentView {
$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;
@@ -234,7 +241,6 @@ class ComponentView {
}
$scope.$on("$destroy", function() {
// console.log("Deregistering handler", $scope.identifier, $scope.component.name);
$scope.destroy();
});
}

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

@@ -13,7 +13,7 @@ class RevisionPreviewModal {
$scope.el = el;
}
controller($scope, modelManager, syncManager, componentManager) {
controller($scope, modelManager, syncManager, componentManager, $timeout) {
'ngInject';
$scope.dismiss = function() {
@@ -31,29 +31,32 @@ class RevisionPreviewModal {
// 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.
$scope.note.uuid = $scope.uuid;
let editor = componentManager.editorForNote($scope.note);
let editorForNote = componentManager.editorForNote($scope.note);
$scope.note.uuid = SFJS.crypto.generateUUIDSync();
if(editor) {
if(editorForNote) {
// 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
// top level editor object has non-copyable properties like .window, which cannot be transfered
$scope.editor = new SNComponent({content: editor.content});
$scope.editor.readonly = true;
$scope.identifier = $scope.editor.uuid;
let editorCopy = new SNComponent({content: editorForNote.content});
editorCopy.readonly = true;
editorCopy.lockReadonly = true;
$scope.identifier = editorCopy.uuid;
componentManager.registerHandler({identifier: $scope.identifier, areas: ["editor-editor"],
contextRequestHandler: (component) => {
if(component == $scope.editor) {
return $scope.note;
contextRequestHandler: (component) => {
if(component == $scope.editor) {
return $scope.note;
}
},
componentForSessionKeyHandler: (key) => {
if(key == $scope.editor.sessionKey) {
return $scope.editor;
}
}
},
componentForSessionKeyHandler: (key) => {
if(key == $scope.editor.sessionKey) {
return $scope.editor;
}
}
});
});
$scope.editor = editorCopy;
}

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

@@ -299,6 +299,9 @@ class ComponentManager {
for(let handler of this.handlers) {
if(handler.componentForSessionKeyHandler) {
component = handler.componentForSessionKeyHandler(key);
if(component) {
break;
}
}
}
}
@@ -881,25 +884,29 @@ class ComponentManager {
}
/* Performs func in timeout, but syncronously, if used `await waitTimeout` */
async waitTimeout(func) {
return new Promise((resolve, reject) => {
this.timeout(() => {
func();
resolve();
});
})
}
// No longer used. See comment in activateComponent.
// async waitTimeout(func) {
// return new Promise((resolve, reject) => {
// this.timeout(() => {
// func();
// resolve();
// });
// })
// }
async activateComponent(component, dontSync = false) {
var didChange = 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("*")) {
// 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.
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);
})
}
@@ -926,7 +933,8 @@ class ComponentManager {
for(let handler of this.handlers) {
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);
})
}
@@ -960,7 +968,8 @@ class ComponentManager {
for(let handler of this.handlers) {
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);
})
}
@@ -986,7 +995,8 @@ class ComponentManager {
component.active = true;
for(var handler of this.handlers) {
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);
})
}

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

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

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

@@ -22,7 +22,7 @@ body {
-webkit-font-smoothing: antialiased;
min-height: 100%;
height: 100%;
font-size: 14px;
font-size: var(--sn-stylekit-base-font-size);
margin: 0;
color: var(--sn-stylekit-foreground-color);
background-color: var(--sn-stylekit-background-color);
@@ -172,7 +172,6 @@ $footer-height: 32px;
padding-bottom: 0px;
height: 100%;
max-height: calc(100vh - #{$footer-height});
font-size: 17px;
position: relative;
overflow: hidden;
@@ -190,7 +189,6 @@ $footer-height: 32px;
.section-title-bar {
font-weight: bold;
font-size: 14px;
.padded {
padding: 0 14px;
@@ -200,7 +198,8 @@ $footer-height: 32px;
display: flex;
justify-content: space-between;
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 {
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-right: 1px solid var(--sn-stylekit-border-color);
font-size: var(--sn-stylekit-font-size-h2);
width: 350px;
flex-grow: 0;
user-select: none;

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

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

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

@@ -5,15 +5,15 @@
.sn-component
.sk-panel
.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
.sk-panel-content
.sk-panel-section
%p.sk-panel-row {{message}}
.sk-p.sk-panel-row {{message}}
.sk-panel-row
.sk-panel-column.stretch
%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
%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-p.sk-bold Remember For
%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}}
.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-title-bar.section-title-bar
.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-label +