wip #5468 @2

diff --git a/app/Fields/FluidbookLinkEditor/Depth.php b/app/Fields/FluidbookLinkEditor/Depth.php
index 852224060e3bd0acb97e884022fde1cc002e9d0b..f5459fbc96a9a3b7e008f5822ed0dddf0186140d 100644 (file)
--- a/app/Fields/FluidbookLinkEditor/Depth.php
+++ b/app/Fields/FluidbookLinkEditor/Depth.php
@@ -6,6 +6,8 @@ use Cubist\Backpack\Magic\Fields\SelectFromArray;
 
 class Depth extends SelectFromArray
 {
+    protected $_ajax = false;
+
     public function getOptions()
     {
         return [

diff --git a/app/SubForms/Link/Base.php b/app/SubForms/Link/Base.php
index 5d1a18411ad44e0540dac7ad77b07d5f8c5d96fa..3180d020466cb64eae5ad8b4d0186f1086f1d9db 100644 (file)
--- a/app/SubForms/Link/Base.php
+++ b/app/SubForms/Link/Base.php
@@ -174,25 +174,25 @@ class Base extends Form
 
     public function addAppearanceFields()
     {
-        $this->addField('header_settings', FormSection::class, __('Apparence'));
+        $this->addField('header_appearance', FormSection::class, __('Apparence'));
     }
 
     public function addPositionFields()
     {
-        $this->addField('header_settings', FormSection::class, __('Disposition'));
-        $this->addField('x', Number::class, 'X');
-        $this->addField('y', Number::class, 'Y');
-        $this->addField('w', Number::class, 'W', ['min' => 0]);
-        $this->addField('h', Number::class, 'H', ['min' => 0]);
+        $this->addField('header_disposition', FormSection::class, __('Disposition'));
+        $this->addField('x', Text::class, 'X');
+        $this->addField('y', Text::class, 'Y');
+        $this->addField('w', Text::class, 'W');
+        $this->addField('h', Text::class, 'H');
         if ($this->_displayedOnFluidbook) {
-            $this->addField('rot', Number::class, __('Rotation'), ['min' => 0, 'max' => 360, 'suffix' => '°']);
+            $this->addField('rot', Text::class, __('Rotation'), ['suffix' => '°']);
             $this->addField('zindex', Depth::class, __('Profondeur'));
         }
     }
 
     public function addExtraFields()
     {
-        $this->addField('header_settings', FormSection::class, __('Autres paramètres'));
+        $this->addField('header_extra', FormSection::class, __('Autres paramètres'));
     }
 
     public function getType()

diff --git a/resources/linkeditor/js/linkeditor.form.js b/resources/linkeditor/js/linkeditor.form.js
index bb4d283a972671f884948c5de3101ba4b7bc6447..6e5b744c19b238ad2935c815b7257ad828fdcb31 100644 (file)
--- a/resources/linkeditor/js/linkeditor.form.js
+++ b/resources/linkeditor/js/linkeditor.form.js
@@ -1,9 +1,18 @@
 function LinkeditorForm(linkeditor) {
     this.linkeditor = linkeditor;
-
+    this.init();
 }
 
 LinkeditorForm.prototype = {
+    init: function () {
+        $(document).on('focus', "input[type=text],input[type=email],input[type=url],input[type=number],textarea", function () {
+            var $this = $(this);
+            setTimeout(function () {
+                $this.select();
+            }, 1);
+        });
+    },
+
     initSelect2: function () {
         // trigger select2 for each untriggered select2 box
         $('#linkeditor-panel-form .select2_from_array:not(.init)').each(function (i, obj) {
@@ -12,9 +21,7 @@ LinkeditorForm.prototype = {
             };
             if ($(this).is('[data-ajax]')) {
                 options.ajax = {
-                    url: 'select2/' + $(this).data('ajax'),
-                    dataType: 'json',
-                    delay: 250,
+                    url: 'select2/' + $(this).data('ajax'), dataType: 'json', delay: 250,
                 };
             }
             if ($(this).is('[data-allow-html="1"]')) {

diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js
index 6434454ad96ae852bc1338e0b0baa48af90ba01a..fa3d13346f334594b9a598dcf09340ca1dc8e68d 100644 (file)
--- a/resources/linkeditor/js/linkeditor.js
+++ b/resources/linkeditor/js/linkeditor.js
@@ -231,6 +231,7 @@ LinkEditor.prototype = {
             });
             $(e).css(css).attr('fb-update', '0');
         });
+        this.links.updateFormData();
     },
 
     fluidbookTo: function (dim, name, rect) {

diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index d10b48e8303e5e0a959f3b1fed491f18f4ad1363..316c64b125cef8b505e0dac286f8fe710833fda9 100644 (file)
--- a/resources/linkeditor/js/linkeditor.links.js
+++ b/resources/linkeditor/js/linkeditor.links.js
@@ -305,18 +305,52 @@ LinkeditorLinks.prototype = {
         var link = $(links).eq(0);
         var type = $(link).attr('fb-type');
         var form = $("#linkeditor-form-template-" + type).clone(false);
+
         $(form).attr('id', null);
+        $(form).data('link', link);
+        this.updateFormData(form);
         container.append(form);
 
         // Reset select2 fields
         $(form).find('select.select2_from_array.init').each(function () {
-            console.log(this);
             $(this).removeClass('init');
         });
 
         this.linkeditor.form.initSelect2();
     },
 
+    updateFormData: function (form) {
+        try {
+            if (form === undefined) {
+                form = $('#linkeditor-panel-form form');
+                if (form.length === 0) {
+                    return;
+                }
+            }
+            var link = $(form).data('link');
+            if (link === undefined || link === null) {
+                return;
+            }
+        } catch (e) {
+            return;
+        }
+        var types = {x: 'dimension', y: 'dimension', w: 'dimension', h: 'dimension', rot: 'dimension'}
+        var map = {top: 'y', left: 'x', width: 'w', height: 'h'};
+        $.each(this.getLinkData(link), function (k, v) {
+            if (map[k] !== undefined) {
+                k = map[k];
+            }
+            var type = 'string';
+            if (types[k] !== undefined) {
+                type = types[k];
+            }
+            if (type === 'dimension') {
+                v = Math.round(parseFloat(v) * 100000) / 100000;
+            }
+            $(form).find('[name=' + k + ']').val(v);
+        });
+    },
+
     checkLastSelectedLink: function () {
         if (this.lastSelectedLink === null || $(this.lastSelectedLink).length === 0) {
             return;
@@ -354,6 +388,7 @@ LinkeditorLinks.prototype = {
             $this.updateLinkData($(this).attr('fb-uid'), data);
         });
         this.linkeditor.updateFBElements();
+        this.updateFormData();
     },
 
     getLinksOfPage: function (p) {
@@ -441,6 +476,7 @@ LinkeditorLinks.prototype = {
         let link = this.addLink(data);
         this.deselectAllLinks();
         this.selectLink($(link));
+        this.updateFormData();
         return $(link);
     },
 

diff --git a/resources/linkeditor/style/form.sass b/resources/linkeditor/style/form.sass
index 4cd6926e2b29a278fb845d9f45dc17e1aa9becee..6d8ac9ea568f73f7c566abfd7321b63951188b8c 100644 (file)
--- a/resources/linkeditor/style/form.sass
+++ b/resources/linkeditor/style/form.sass
@@ -5,10 +5,60 @@
 .linkeditor-linktype
     &::before
         display: inline-block
-        width: 20px
-        height: 20px
+        width: 12px
+        height: 12px
         border-radius: 2px
-        margin: 0 10px 0 0
+        margin: 5px 10px 0 0
         content: ""
         vertical-align: top
         position: relative
+
+.select2-container--bootstrap
+    font-size: 12px
+    font-weight: 500
+    color: #5D5D5D
+
+    hr
+        border: 0
+        height: 1px
+        background-color: #d5d5d5
+        margin: 5px 0
+
+    &.select2-container--focus .select2-selection, &.select2-container--open .select2-selection
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.1)
+
+
+#linkeditor-panel-form
+    padding: 12px
+
+    h3
+        font-size: 16px
+        color: #5D5D5D
+        text-transform: uppercase
+        padding-top: 15px
+        border-top: 1px solid #5d5d5d
+        margin-top: 20px
+
+    input, textarea, input[type="text"], input[type="number"], input[type="email"], input[type="url"]
+        font-family: $font
+        height: 34px
+        padding: 8px
+        width: 100%
+        font-weight: 500
+        color: #5D5D5D
+        border: 1px solid #D5D5D5
+        border-radius: 3px
+        font-size: 12px
+        transition: box-shadow 500ms, border 500ms
+        appearance: none
+
+        &:focus
+            border: 1px solid #ccc
+            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1)
+
+    label
+        display: block
+        font-weight: 600
+        font-size: 12px
+        color: #5D5D5D
+        margin: 8px 0 5px 0

diff --git a/resources/linkeditor/style/style.sass b/resources/linkeditor/style/style.sass
index ccd989981d1df0f53dc1a73b3679055b5fad90dd..471eb9a00406758443ed4e4c44bdb12bfa3cde85 100644 (file)
--- a/resources/linkeditor/style/style.sass
+++ b/resources/linkeditor/style/style.sass
@@ -5,6 +5,9 @@
     margin: 0
     padding: 0
     box-sizing: border-box
+    &:focus
+        outline: 0
+
 
 body
     font-family: "Montserrat", sans-serif

diff --git a/resources/linkeditor/style/variables.sass b/resources/linkeditor/style/variables.sass
index fdf756262a677403cf2e61643c636cddf9fde1b3..cfaf64cb348f81b1c598cda7305ff3b4bfb61b49 100644 (file)
--- a/resources/linkeditor/style/variables.sass
+++ b/resources/linkeditor/style/variables.sass
@@ -1,3 +1,4 @@
+$font: Montserrat, sans-serif
 $font-size: 16px
 $sidebar-icons-width: 46px
 $sidebar-handle-width: 3px
@@ -8,4 +9,4 @@ $toolbar-height: 40px
 $toolbar-color: #5d5d5d
 $toolbar-color-dark: #bbb
 
-$panel-background: #ebecee
+$panel-background: #fcfcfc