diff --git a/CHANGELOG.md b/CHANGELOG.md index acda59af..09e81463 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # Changelog +## v2.1.2 (2020-09-16) +- fixed a bug that caused discard & save buttons to remain active after loading a new script +- update styling code +- improve web demo experience + ## v2.1.1 (2020-09-14) - fixed an issue that caused extension to crash when text preceded opening userscript tag - #69 #68 #58 - improve sidebar tag filtering diff --git a/README.md b/README.md index 7ca24d1c..018d894b 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Userscripts Safari -An open-source userscript editor for Safari +An open-source userscript editor for Safari - https://quoid.github.io/userscripts/ ![Userscripts Safari](/etc/screenshot.png) diff --git a/extension/Userscripts Extension/index.html b/extension/Userscripts Extension/index.html index 97c35348..84f3755c 100644 --- a/extension/Userscripts Extension/index.html +++ b/extension/Userscripts Extension/index.html @@ -1,4 +1,4 @@ -Userscripts Safari
css
js
init
init
+Userscripts Safari
css
js
init
init
@@ -19,4 +19,4 @@ --> - \ No newline at end of file + \ No newline at end of file diff --git a/extension/Userscripts.xcodeproj/project.pbxproj b/extension/Userscripts.xcodeproj/project.pbxproj index 2779e1f3..bb00442f 100644 --- a/extension/Userscripts.xcodeproj/project.pbxproj +++ b/extension/Userscripts.xcodeproj/project.pbxproj @@ -409,7 +409,7 @@ CODE_SIGN_ENTITLEMENTS = "Userscripts Extension/Userscripts Extension.entitlements"; CODE_SIGN_IDENTITY = "Apple Development"; CODE_SIGN_STYLE = Automatic; - CURRENT_PROJECT_VERSION = 18; + CURRENT_PROJECT_VERSION = 19; DEVELOPMENT_TEAM = J74Q8V8V8N; ENABLE_HARDENED_RUNTIME = YES; INFOPLIST_FILE = "Userscripts Extension/Info.plist"; @@ -418,7 +418,7 @@ "@executable_path/../Frameworks", "@executable_path/../../../../Frameworks", ); - MARKETING_VERSION = 2.1.1; + MARKETING_VERSION = 2.1.2; PRODUCT_BUNDLE_IDENTIFIER = "com.userscripts.macos.Userscripts-Extension"; PRODUCT_NAME = "$(TARGET_NAME)"; SKIP_INSTALL = YES; @@ -432,7 +432,7 @@ CODE_SIGN_ENTITLEMENTS = "Userscripts Extension/Userscripts Extension.entitlements"; CODE_SIGN_IDENTITY = "Apple Development"; CODE_SIGN_STYLE = Automatic; - CURRENT_PROJECT_VERSION = 18; + CURRENT_PROJECT_VERSION = 19; DEVELOPMENT_TEAM = J74Q8V8V8N; ENABLE_HARDENED_RUNTIME = YES; INFOPLIST_FILE = "Userscripts Extension/Info.plist"; @@ -441,7 +441,7 @@ "@executable_path/../Frameworks", "@executable_path/../../../../Frameworks", ); - MARKETING_VERSION = 2.1.1; + MARKETING_VERSION = 2.1.2; PRODUCT_BUNDLE_IDENTIFIER = "com.userscripts.macos.Userscripts-Extension"; PRODUCT_NAME = "$(TARGET_NAME)"; SKIP_INSTALL = YES; @@ -458,7 +458,7 @@ CODE_SIGN_IDENTITY = "Apple Development"; CODE_SIGN_STYLE = Automatic; COMBINE_HIDPI_IMAGES = YES; - CURRENT_PROJECT_VERSION = 18; + CURRENT_PROJECT_VERSION = 19; DEVELOPMENT_TEAM = J74Q8V8V8N; ENABLE_HARDENED_RUNTIME = YES; INFOPLIST_FILE = Userscripts/Info.plist; @@ -466,7 +466,7 @@ "$(inherited)", "@executable_path/../Frameworks", ); - MARKETING_VERSION = 2.1.1; + MARKETING_VERSION = 2.1.2; PRODUCT_BUNDLE_IDENTIFIER = com.userscripts.macos; PRODUCT_NAME = "$(TARGET_NAME)"; SWIFT_VERSION = 5.0; @@ -482,7 +482,7 @@ CODE_SIGN_IDENTITY = "Apple Development"; CODE_SIGN_STYLE = Automatic; COMBINE_HIDPI_IMAGES = YES; - CURRENT_PROJECT_VERSION = 18; + CURRENT_PROJECT_VERSION = 19; DEVELOPMENT_TEAM = J74Q8V8V8N; ENABLE_HARDENED_RUNTIME = YES; INFOPLIST_FILE = Userscripts/Info.plist; @@ -490,7 +490,7 @@ "$(inherited)", "@executable_path/../Frameworks", ); - MARKETING_VERSION = 2.1.1; + MARKETING_VERSION = 2.1.2; PRODUCT_BUNDLE_IDENTIFIER = com.userscripts.macos; PRODUCT_NAME = "$(TARGET_NAME)"; SWIFT_VERSION = 5.0; diff --git a/index.html b/index.html index 5f9befb1..d0ae5274 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ -Userscripts Safari
css
js
init
init
+Userscripts Safari
App optimized for Safari - other browser support limited
css
js
init
init
@@ -19,4 +19,4 @@ --> - \ No newline at end of file + \ No newline at end of file diff --git a/src/index.html b/src/index.html index b921eabf..7dfb3a36 100644 --- a/src/index.html +++ b/src/index.html @@ -18,8 +18,10 @@ + {% if demo %} +
App optimized for Safari - other browser support limited
+ {% endif %}
-
{% include "sidebar.html" %} {% include "editor.html" %} diff --git a/src/js/dev.js b/src/js/dev.js index 158ac325..962d82eb 100644 --- a/src/js/dev.js +++ b/src/js/dev.js @@ -195,7 +195,7 @@ const ___settings = { showInvisibles: "true", tabSize: "4", verbose: "true", - version: "2.1.1" + version: "2.1.2" }; const ___parse = { diff --git a/src/js/main.js b/src/js/main.js index 3c05f36c..9ef9fc83 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -562,6 +562,8 @@ const ___e = { // enable the save button for temp scripts this.buttonSave.removeAttribute("disabled"); } else { + // ensure discard and save button are disabled after loading + this.toggleButtonState("disable"); status = ___a.getString("lastModified") + " " + lastModified; } this.setStatus(status); @@ -696,6 +698,11 @@ const ___s = { buttonSettingsHide: document.getElementById("settingsHide"), filterBar: document.querySelector("#filter input"), scriptsContainer: document.getElementById("scripts"), + scrollOptions: { // options description: https://stackoverflow.com/a/48635751 + behavior: "auto", + block: "nearest", + inline: "start" + }, settingsOverlay: document.getElementById("settings"), createNewScript: function(type) { // check if editor has unsaved changed OR there's an unsaved temp script @@ -731,7 +738,7 @@ const ___s = { el.classList.add("temp"); loc.insertAdjacentElement("afterend", el); this.updateScriptCount(); - el.scrollIntoViewIfNeeded(); + el.scrollIntoView(this.scrollOptions); ___a.log(`Created temporary script, ${filename}`, "darkorchid"); ___e.loadScript(loadData); }, @@ -907,7 +914,7 @@ const ___s = { document.querySelector(".active").classList.remove("active"); } el.classList.add("active"); - el.scrollIntoViewIfNeeded(); + el.scrollIntoView(this.scrollOptions); }, scriptToggle: function(e) { // prevent default checkbox behaviour, checking happens programatically @@ -948,7 +955,7 @@ const ___s = { }); // scroll to activ script if (document.querySelector(".active")) { - document.querySelector(".active").scrollIntoViewIfNeeded(); + document.querySelector(".active").scrollIntoView(this.scrollOptions); } }, updateScriptCount: function() { diff --git a/src/macros/toggle.css b/src/macros/toggle.css index 9603c0c7..c71815c8 100644 --- a/src/macros/toggle.css +++ b/src/macros/toggle.css @@ -11,9 +11,8 @@ .toggle input[type=checkbox] { display: block; - height: 0; + position: absolute; visibility: hidden; - width: 0; } .toggle span { diff --git a/src/partials/editor.css b/src/partials/editor.css index 88c9da22..5eff5511 100644 --- a/src/partials/editor.css +++ b/src/partials/editor.css @@ -9,8 +9,10 @@ #code { display: flex; - flex: 1; + flex-basis: calc(100% - 112px); /* .editor-header @ 56px .editor-footer @ 56px */ + flex-grow: 1; flex-direction: column; + overflow: hidden; } .editor-header { diff --git a/src/partials/sidebar.css b/src/partials/sidebar.css index dd5db7ae..4f427348 100644 --- a/src/partials/sidebar.css +++ b/src/partials/sidebar.css @@ -106,7 +106,7 @@ #scripts { border-top: 1px solid var(--border-dark); - flex: 1; + flex-basis: calc(100vh - 162px); /* .sidebar-header @ 106px and .sidebar-footer @ 56px */ overflow-y: auto; position: relative; } @@ -141,7 +141,7 @@ } .script-header .title { - flex: 1; + flex-grow: 1; font: var(--fs3); letter-spacing: var(--ls3); padding-right: 8px; @@ -228,13 +228,25 @@ body.saving #sidebar .script { } /* show disabled css scripts */ -#scripts.show-css.show-disabled .script:not([data-type="css"].disabled), +/* #scripts.show-css.show-disabled .script:not([data-type="css"].disabled), */ +#scripts.show-css.show-disabled .script[data-type="css"].enabled, +#scripts.show-css.show-disabled .script[data-type="js"].enabled, +#scripts.show-css.show-disabled .script[data-type="js"].disabled, /* show enabled css scripts */ -#scripts.show-css.show-enabled .script:not([data-type="css"].enabled), +/* #scripts.show-css.show-enabled .script:not([data-type="css"].enabled), */ +#scripts.show-css.show-enabled .script[data-type="css"].disabled, +#scripts.show-css.show-enabled .script[data-type="js"].disabled, +#scripts.show-css.show-enabled .script[data-type="js"].enabled, /* show disabled js scripts */ -#scripts.show-js.show-disabled .script:not([data-type="js"].disabled), +/* #scripts.show-js.show-disabled .script:not([data-type="js"].disabled), */ +#scripts.show-js.show-disabled .script[data-type="js"].enabled, +#scripts.show-js.show-disabled .script[data-type="css"].enabled, +#scripts.show-js.show-disabled .script[data-type="css"].disabled, /* show enabled js scripts */ -#scripts.show-js.show-enabled .script:not([data-type="js"].enabled) { +/* #scripts.show-js.show-enabled .script:not([data-type="js"].enabled), */ +#scripts.show-js.show-enabled .script[data-type="js"].disabled, +#scripts.show-js.show-enabled .script[data-type="css"].disabled, +#scripts.show-js.show-enabled .script[data-type="css"].enabled { display: none; } diff --git a/src/partials/sidebar.html b/src/partials/sidebar.html index d6acfe07..24016495 100644 --- a/src/partials/sidebar.html +++ b/src/partials/sidebar.html @@ -16,7 +16,7 @@
- + {{ icon("loupe", "filterLoupe") }}
diff --git a/src/stylesheets/_main.css b/src/stylesheets/_main.css index a210d416..fb1bbcb2 100644 --- a/src/stylesheets/_main.css +++ b/src/stylesheets/_main.css @@ -20,7 +20,7 @@ /* z-indexes */ noscript { z-index: 99; } -#notify { z-index: 99;} +#notify, .warn { z-index: 99;} #appLoader { z-index: 98; } #settings { z-index: 97; } #progress {z-index: 96; } diff --git a/src/stylesheets/global.css b/src/stylesheets/global.css index 81586012..7bd87fe0 100644 --- a/src/stylesheets/global.css +++ b/src/stylesheets/global.css @@ -20,7 +20,7 @@ body { #wrapper { display: flex; - flex: 1; + overflow: hidden; } a { @@ -58,6 +58,7 @@ body:not(.init) #appLoader { white-space: nowrap; } +.demo, #notify, noscript { background-color: var(--color-red); @@ -67,38 +68,14 @@ noscript { width: 100%; } -#notify { - display: none; +.demo { + font-size: 11.5px; + line-height: 1; + padding: 4px; } -#progress { +#notify { display: none; - background-color: var(--border-dark); - height: 3px; - left: 0; - position: absolute; - top: 0; - width: 100%; -} - -#progress::before { - animation: fill 3.5s infinite; - background-color: var(--link-color); - content: ""; - height: 3px; - left: 0; - margin-left: 0; - position: absolute; - top: 0; - width: 0; -} - -@keyframes fill { - 0% {width: 0; margin-left: 0;} - 50% {width: 100%;} - 55% {margin-left: 100%;} - 95% {margin-left: 0;} - 100% {width: 0;} } .link {