From 26036c81bff8ee887c7911321100c36a8ca6db85 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Fri, 9 Dec 2022 19:03:41 +0100 Subject: [PATCH] wip #5638 @1.5 --- resources/linkeditor/js/linkeditor.js | 12 ++- resources/linkeditor/js/linkeditor.popup.js | 53 +++++++++++++ resources/linkeditor/js/linkeditor.resize.js | 8 +- resources/linkeditor/style/inc/_form.sass | 76 +++++++++++++------ resources/linkeditor/style/inc/_popup.sass | 63 +++++++++++++++ resources/linkeditor/style/inc/_toolbar.sass | 6 -- resources/linkeditor/style/style.sass | 1 + .../link_editor.blade.php | 28 ++++++- .../link_editor_icons.blade.php | 2 +- 9 files changed, 211 insertions(+), 38 deletions(-) create mode 100644 resources/linkeditor/js/linkeditor.popup.js create mode 100644 resources/linkeditor/style/inc/_popup.sass diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js index 7e1b5bdb9..6c387cf5d 100644 --- a/resources/linkeditor/js/linkeditor.js +++ b/resources/linkeditor/js/linkeditor.js @@ -17,6 +17,7 @@ import LinkeditorSettings from './linkeditor.settings'; import LinkeditorPanels from './linkeditor.panels'; import LinkeditorForm from './linkeditor.form'; import LinkeditorVersions from './linkeditor.versions'; +import LinkeditorPopup from './linkeditor.popup'; window.$ = window.jQuery = require('jquery'); window.key = require('keymaster-reloaded'); @@ -82,6 +83,7 @@ LinkEditor.prototype = { this.form = new LinkeditorForm(this); this.settings = new LinkeditorSettings(this); this.versions = new LinkeditorVersions(this); + this.popup = new LinkeditorPopup(this); this.initEvents(); this.initIcons(); @@ -90,7 +92,7 @@ LinkEditor.prototype = { }, initIcons: function () { - $("#linkeditor [data-icon]:not(.init-icon)").each(function () { + $("[data-icon]:not(.init-icon)").each(function () { $(this).append(getSpriteIcon('linkeditor-' + $(this).data('icon'))).addClass('init-icon'); }); }, @@ -108,6 +110,14 @@ LinkEditor.prototype = { $this.changePage(); }); + key('esc', function () { + if ($this.popup.hasOpenPopup()) { + $this.popup.close(); + return false; + } + return true; + }); + // Disable scroll by spacebar $(window).on('keydown', function (e) { if (e.keyCode == 32) { diff --git a/resources/linkeditor/js/linkeditor.popup.js b/resources/linkeditor/js/linkeditor.popup.js new file mode 100644 index 000000000..44c80f414 --- /dev/null +++ b/resources/linkeditor/js/linkeditor.popup.js @@ -0,0 +1,53 @@ +function LinkeditorPopup(linkeditor) { + this.linkeditor = linkeditor; + this.init(); +} + +LinkeditorPopup.prototype = { + init: function () { + var $this = this; + $(document).on('click', '.popup .close', function () { + if ($this.hasOpenPopup()) { + $this.close(); + } + }); + }, + + openLinksMove() { + this.open('moveLinks'); + }, + + open: function (name) { + var clone = $("#popup-templates [data-popup=" + name + "]").clone(); + $("#popup-holder").append(clone); + $("#popup-overlay").addClass('show'); + this.resize(); + }, + + close: function () { + $("#popup-overlay").removeClass('show'); + $("#popup-holder").html(''); + }, + + hasOpenPopup() { + return $("#popup-overlay.show").length === 1; + }, + + resize: function () { + if (!this.hasOpenPopup()) { + return; + } + var p = $("#popup-holder>div"); + var w = $(p).outerWidth(); + var h = $(p).outerHeight(); + var left = (this.linkeditor.resize.ww - w) / 2; + var top = (this.linkeditor.resize.hh - h) / 2; + $("#popup-holder").css({ + width: w, + height: h, + left: left, + top: top, + }) + } +}; +module.exports = LinkeditorPopup; diff --git a/resources/linkeditor/js/linkeditor.resize.js b/resources/linkeditor/js/linkeditor.resize.js index d75133359..2c6514443 100644 --- a/resources/linkeditor/js/linkeditor.resize.js +++ b/resources/linkeditor/js/linkeditor.resize.js @@ -20,13 +20,15 @@ LinkeditorResize.prototype = { resize: function () { this.updateWindowDimensions(); - this.linkeditor.panels.resize(this.ww); this.resizeMain(); this.resizeCanvas(); - if(this.panels) { - this.panels.resize(); + if(this.linkeditor.panels) { + this.linkeditor.panels.resize(this.ww); } this.linkeditor.rulers.updateRulers(); + if(this.linkeditor.popup){ + this.linkeditor.popup.resize(); + } }, resizeMain: function () { diff --git a/resources/linkeditor/style/inc/_form.sass b/resources/linkeditor/style/inc/_form.sass index 4105443c6..8cf3d3334 100644 --- a/resources/linkeditor/style/inc/_form.sass +++ b/resources/linkeditor/style/inc/_form.sass @@ -1,3 +1,50 @@ +body + --form-text-color: #5d5d5d + --field-background: #fff + --field-color: #111 + --field-border: #aaa + + @include dark-theme + --form-text-color: #aaa + --field-background: #000 + --field-color: #ccc + --field-border: #777 + +textarea, input[type="text"], input[type="number"], input[type="email"], input[type="url"] + font-family: $font + font-weight: 400 + color: var(--field-color) + background-color: var(--field-background) + border: 1px solid var(--field-background) + border-radius: 3px + font-size: 13px + transition: box-shadow 500ms, border 500ms + appearance: none + + &:focus + border: 1px solid var(--field-border) + box-shadow: 0 0 8px rgba(0, 0, 0, 0.3) + +input[type=number] + &, &:hover + appearance: textfield + + &::-webkit-inner-spin-button, &::-webkit-outer-spin-button + -webkit-appearance: none + margin: 0 + visibility: hidden + +button + font-family: $font + font-weight: 500 + font-size: 15px + padding: 5px 10px + border: 1px solid var(--field-border) + border-radius: 4px + color: var(--field-color) + background-color: var(--field-background) + cursor: pointer + .select2-hidden-accessible position: fixed !important @@ -17,16 +64,6 @@ #linkeditor-panel-form - --form-text-color: #5d5d5d - --field-background: #fff - --field-color: #111 - --field-border: #aaa - - @include dark-theme - --form-text-color: #aaa - --field-background: #000 - --field-color: #ccc - --field-border: #777 padding: 12px @@ -68,11 +105,13 @@ .freefile-file position: relative + &.loading &::after background-image: url("/images/linkeditor/dots-animated.svg") @include dark-theme background-image: url("/images/linkeditor/dots-dark-animated.svg") + input pointer-events: none cursor: wait @@ -105,6 +144,7 @@ .input-group position: relative + .input-group-append position: absolute height: 100% @@ -114,23 +154,9 @@ padding: 8px textarea, input[type="text"], input[type="number"], input[type="email"], input[type="url"] - font-family: $font height: 34px padding: 8px width: 100% - font-weight: 400 - color: var(--field-color) - background-color: var(--field-background) - border: 1px solid var(--field-background) - border-radius: 3px - font-size: 13px - transition: box-shadow 500ms, border 500ms - appearance: none - - &:focus - border: 1px solid var(--field-border) - box-shadow: 0 0 8px rgba(0, 0, 0, 0.3) - textarea min-height: 150px @@ -187,12 +213,14 @@ [data-name="rot"] label display: block + .input-group .input-group-append right: 0 .input-group display: inline-block + .input-group-append right: 20px diff --git a/resources/linkeditor/style/inc/_popup.sass b/resources/linkeditor/style/inc/_popup.sass new file mode 100644 index 000000000..bad22c460 --- /dev/null +++ b/resources/linkeditor/style/inc/_popup.sass @@ -0,0 +1,63 @@ +#popup-templates + display: none + +#popup-overlay + background-color: rgba(0, 0, 0, 0.5) + position: absolute + top: 0 + left: 0 + opacity: 0 + pointer-events: none + transition: opacity 350ms + width: 100% + height: 100% + z-index: 10000000 + + &.show + opacity: 1 + pointer-events: auto + + #popup-holder + position: absolute + max-width: 100% + max-height: 100% + + .popup + background-color: #dbdddf + color: #5D5D5D + font-size: 13px + padding: 20px + box-shadow: 0 0 20px rgba(0,0,0,0.5) + + h2 + font-size: 16px + padding-bottom: 10px + font-weight: 500 + + a.close + display: block + position: absolute + top: 20px + right: 20px + width: 15px + height: 15px + cursor: pointer + + p + margin: 12px 0 + + p.button + text-align: right + + + @include dark-theme + background-color: #333 + color: #d5d5d5 + + &[data-popup="moveLinks"] + input + &[type="text"],&[type="number"] + width: 50px + height: 20px + margin: 0 5px + padding: 4px diff --git a/resources/linkeditor/style/inc/_toolbar.sass b/resources/linkeditor/style/inc/_toolbar.sass index e99453e9e..539ea1eec 100644 --- a/resources/linkeditor/style/inc/_toolbar.sass +++ b/resources/linkeditor/style/inc/_toolbar.sass @@ -74,12 +74,6 @@ color: $toolbar-color-dark font-size: 13px - appearance: textfield - - &::-webkit-outer-adjust-hue-button, &::-webkit-inner-adjust-hue-button - -webkit-appearance: none - margin: 0 - font-weight: 600 position: relative diff --git a/resources/linkeditor/style/style.sass b/resources/linkeditor/style/style.sass index f3978143d..ecc074e61 100644 --- a/resources/linkeditor/style/style.sass +++ b/resources/linkeditor/style/style.sass @@ -138,4 +138,5 @@ body, #linkeditor, html @import "inc/_links" @import "inc/_form" @import "inc/_versions" +@import "inc/_popup" diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php index 62db0f8b1..4cbe7215c 100644 --- a/resources/views/fluidbook_publication/link_editor.blade.php +++ b/resources/views/fluidbook_publication/link_editor.blade.php @@ -40,6 +40,28 @@ @section('content') @include('fluidbook_publication.link_editor_icons') + +
@push('linkeditor_scripts')