From bb3142f3e81e4076f320dcd3a3e269bc5f2caee0 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 5 Jun 2025 18:09:01 +0200
Subject: [PATCH] wip #7467 @6

---
 app/Fluidbook/Link/LinksData.php              |   4 +-
 .../js/linkeditor.accessibility.js            | 137 +++++++++++-------
 resources/linkeditor-stable/js/linkeditor.js  |   2 +-
 .../linkeditor-stable/js/linkeditor.layers.js |  55 +------
 .../linkeditor-stable/js/linkeditor.links.js  |  70 ++++-----
 .../linkeditor-stable/js/linkeditor.panels.js | 111 +++++++++++---
 .../linkeditor-stable/style/inc/_layers.sass  |  40 +++--
 .../link_editor.blade.php                     |   8 +-
 8 files changed, 244 insertions(+), 183 deletions(-)

diff --git a/app/Fluidbook/Link/LinksData.php b/app/Fluidbook/Link/LinksData.php
index dde655d9e..d8dc67403 100644
--- a/app/Fluidbook/Link/LinksData.php
+++ b/app/Fluidbook/Link/LinksData.php
@@ -38,7 +38,9 @@ class LinksData
 
         $cols = array(
             'uid' => __('Identifiant unique'),
-            'page' => __('Page de la publication'), 'left' => __('x'), 'top' => __('y'), 'width' => __('Largeur'), 'height' => __('Hauteur'), 'rot' => __('Rotation'),
+            'page' => __('Page de la publication'),
+            'order' => __('Ordre'),
+            'left' => __('x'), 'top' => __('y'), 'width' => __('Largeur'), 'height' => __('Hauteur'), 'rot' => __('Rotation'),
             'type' => __('Type'), 'to' => __('Destination'), 'target' => __('Cible'),
             'tooltip' => __('Infobulle'), 'numerotation' => __('Numérotation'),
             'display_area' => __('Activer la surbrillance'),
diff --git a/resources/linkeditor-stable/js/linkeditor.accessibility.js b/resources/linkeditor-stable/js/linkeditor.accessibility.js
index bdaa92d17..16ec258f5 100644
--- a/resources/linkeditor-stable/js/linkeditor.accessibility.js
+++ b/resources/linkeditor-stable/js/linkeditor.accessibility.js
@@ -7,38 +7,8 @@ LinkeditorAccessibility.prototype = {
         var $this = this;
 
         this.container = $("#linkeditor-panel-accessibility");
-        console.log(this.container);
         this.maskCheckEvents = false;
 
-        $(document).on('click', '#linkeditor-panel-accessibility a.lock', function () {
-            let uid = $(this).closest('.layer').find('input').attr('name');
-            $this.linkeditor.links.locks.toggleLock(uid);
-            return false;
-        });
-
-        $(document).on('click', "#linkeditor-panel-accessibility label", function (e) {
-            if ($this.maskCheckEvents) {
-                return false;
-            }
-            let uid = $(this).find('input').attr('name');
-            let checked = $(this).find('input').prop('checked');
-            var link = $('#linkeditor-links [fb-uid="' + uid + '"]');
-
-            if (!e.ctrlKey) {
-                $this.linkeditor.links.deselectAllLinks();
-                $this.linkeditor.links.selectLink(link);
-            } else {
-                if (checked) {
-                    $this.linkeditor.links.deselectLink(link);
-                } else {
-                    $this.linkeditor.links.selectLink(link);
-                }
-            }
-
-            $this.linkeditor.form.updateLinkForm();
-            return false;
-        });
-
         $(document).on('click', '#linkeditor-panel-accessibility label span.uid', function () {
             navigator.clipboard.writeText($(this).attr('fb-uid'));
             let tippy = $(this).data('tippyinstance');
@@ -50,7 +20,77 @@ LinkeditorAccessibility.prototype = {
         this.update();
     },
 
-    normalizeLinksOrder: function () {
+    moveSelectionOrder: function (way) {
+        let start;
+        let selection = this.getCurrentOrderableSelection();
+        let num = selection.length;
+        if (num <= 0) {
+            return;
+        }
+        let firstSelected = $(selection).get(0);
+        let firstSelectedOrder = parseInt($(firstSelected).attr('fb-order'));
+        let max = this.getOrderableLinksOnPage().length + 1;
+
+        let step = 1 / (num + 1);
+
+        switch (way) {
+            case'start':
+                start = -num;
+                step = -1;
+                break;
+            case'end':
+                start = max;
+                step = 1;
+                break;
+            case'up':
+                start = firstSelectedOrder - 1 - step;
+                step *= -1;
+                break;
+            case'down':
+                start = firstSelectedOrder + 1 + step;
+                break;
+        }
+
+        let selectedOrder = start;
+
+        $(selection).each(function () {
+            $(this).attr('fb-order', selectedOrder);
+            selectedOrder += step;
+        });
+
+        this.normalizeLinksOrder();
+    },
+
+    getOrderableLinksOnPage: function () {
+        return this.filterOrderableLinks(this.linkeditor.links.getLinksOfCurrentPage());
+    },
+
+    filterOrderableLinks: function (links) {
+        let res = [];
+        $.each(links, function () {
+            if ($(this).attr('fb-calc-depth') < 50) {
+                return;
+            }
+            res.push(this);
+        });
+
+        return this.orderLinks(res);
+    },
+
+    orderLinks: function (links) {
+        return $(links).toArray().sort(function (a, b) {
+            return parseInt($(a).attr('fb-order')) - parseInt($(b).attr('fb-order'));
+        });
+    },
+
+    getCurrentOrderableSelection: function () {
+        return this.filterOrderableLinks(this.linkeditor.links.getCurrentSelection());
+    },
+
+    normalizeLinksOrder: function (refresh) {
+        if (refresh === undefined) {
+            refresh = true;
+        }
         let $this = this;
         let links = [];
         $('#linkeditor-links .link:not(.pendingCreate)').each(function () {
@@ -60,7 +100,6 @@ LinkeditorAccessibility.prototype = {
 
         links.sort(function (a, b) {
             if (a.interactive === b.interactive) {
-                console.log(a.order, b.order);
                 return a.order - b.order
             }
             return b.interactive - a.interactive;
@@ -70,7 +109,9 @@ LinkeditorAccessibility.prototype = {
         $(links).each(function (k, v) {
             $(v.link).attr('fb-order', i++);
         });
-        this.linkeditor.hasChanged();
+        if (refresh) {
+            this.linkeditor.hasChanged();
+        }
         this.linkeditor.links.pageMaxOrderIndex = i;
     },
 
@@ -93,21 +134,21 @@ LinkeditorAccessibility.prototype = {
         var $this = this;
         this.container.html('');
         var accessibility = [];
-        this.normalizeLinksOrder();
-        $('#linkeditor-links .link:not(.pendingCreate)').each(function () {
+        this.normalizeLinksOrder(false);
+        $(this.orderLinks(this.linkeditor.links.getLinksOfCurrentPage())).each(function () {
             let type = $(this).attr('fb-type');
             let dest = $(this).attr('fb-to');
+            let uid = $(this).attr('fb-uid');
 
             if (dest === '') {
                 dest = '<em>' + TRANSLATIONS.empty + '</em>';
             }
-            var l = '<div class="layer" data-locked="' + ($this.linkeditor.links.locks.isLocked($(this).attr('fb-uid')) ? '1' : '0') + '">';
-            l += '<label class="layer" fb-type="' + type + '">';
-            l += '<input name="' + $(this).attr('fb-uid') + '" type="checkbox"> ';
+            var l = '<div class="layer" fb-type="' + type + '">';
+            l += '<input name="' + uid + '" type="checkbox"> ';
+            l += '<label class="layer" data-uid="' + uid + '">';
             l += dest;
             l += '<span class="order">#' + $(this).attr('fb-order') + '</span>';
             l += '</label>';
-            //l += '<a href="#" class="lock" data-icon="lock" data-tooltip="' + TRANSLATIONS['lock'] + '"></a>';
             l += '</div>';
             let level = $this.getLinkLevel($(this));
             accessibility.push({
@@ -123,8 +164,8 @@ LinkeditorAccessibility.prototype = {
             }
             return b.interactive - a.interactive;
         });
+
         var seenLevels = {};
-        console.log(accessibility);
         $.each(accessibility, function (k, v) {
             if (seenLevels[v.interactive] === undefined) {
                 seenLevels[v.interactive] = true;
@@ -133,27 +174,13 @@ LinkeditorAccessibility.prototype = {
             $this.container.append(v.html);
         });
 
-
         this.updateSelection();
         this.linkeditor.initTooltips();
         this.linkeditor.initIcons();
     },
 
     updateSelection() {
-
-        if (this.container === undefined || this.container.is(':hidden')) {
-            return;
-        }
-        var $this = this;
-        this.maskCheckEvents = true;
-        setTimeout(function () {
-            $this.maskCheckEvents = false;
-        }, 100);
-
-        $('#linkeditor-links .link').each(function () {
-            let checkbox = $this.container.find('input[name=' + $(this).attr('fb-uid') + ']');
-            checkbox.prop('checked', $(this).is('.selected'));
-        });
+        this.linkeditor.panels.updatePanelSelection(this);
     },
 
     resize: function () {
diff --git a/resources/linkeditor-stable/js/linkeditor.js b/resources/linkeditor-stable/js/linkeditor.js
index 3840ca66a..5d01caf46 100644
--- a/resources/linkeditor-stable/js/linkeditor.js
+++ b/resources/linkeditor-stable/js/linkeditor.js
@@ -343,7 +343,7 @@ LinkEditor.prototype = {
         if (push === true) {
             this.undo.pushState();
         }
-        this.layers.update();
+        this.panels.refresh();
         this.updateFBElements(true);
     },
 
diff --git a/resources/linkeditor-stable/js/linkeditor.layers.js b/resources/linkeditor-stable/js/linkeditor.layers.js
index 378eb192e..2cd611215 100644
--- a/resources/linkeditor-stable/js/linkeditor.layers.js
+++ b/resources/linkeditor-stable/js/linkeditor.layers.js
@@ -9,35 +9,6 @@ LinkeditorLayers.prototype = {
         this.container = $("#linkeditor-panel-layers");
         this.maskCheckEvents = false;
 
-        $(document).on('click', '#linkeditor-panel-layers a.lock', function () {
-            let uid = $(this).closest('.layer').find('input').attr('name');
-            $this.linkeditor.links.locks.toggleLock(uid);
-            return false;
-        });
-
-        $(document).on('click', "#linkeditor-panel-layers label", function (e) {
-            if ($this.maskCheckEvents) {
-                return false;
-            }
-            let uid = $(this).find('input').attr('name');
-            let checked = $(this).find('input').prop('checked');
-            var link = $('#linkeditor-links [fb-uid="' + uid + '"]');
-
-            if (!e.ctrlKey) {
-                $this.linkeditor.links.deselectAllLinks();
-                $this.linkeditor.links.selectLink(link);
-            } else {
-                if (checked) {
-                    $this.linkeditor.links.deselectLink(link);
-                } else {
-                    $this.linkeditor.links.selectLink(link);
-                }
-            }
-
-            $this.linkeditor.form.updateLinkForm();
-            return false;
-        });
-
         $(document).on('click', '#linkeditor-panel-layers label span.uid', function () {
             navigator.clipboard.writeText($(this).attr('fb-uid'));
             let tippy = $(this).data('tippyinstance');
@@ -59,17 +30,18 @@ LinkeditorLayers.prototype = {
         var $this = this;
         this.container.html('');
         var layers = [];
-        $('#linkeditor-links .link:not(.pendingCreate)').each(function () {
+        this.linkeditor.links.getLinksOfCurrentPage().each(function () {
             let type = $(this).attr('fb-type');
             let dest = $(this).attr('fb-to');
             if (dest === '') {
                 dest = '<em>' + TRANSLATIONS.empty + '</em>';
             }
-            var l = '<div class="layer" data-locked="' + ($this.linkeditor.links.locks.isLocked($(this).attr('fb-uid')) ? '1' : '0') + '">';
-            l += '<label class="layer" fb-type="' + type + '">';
-            l += '<input name="' + $(this).attr('fb-uid') + '" type="checkbox"> ';
+            let uid = $(this).attr('fb-uid');
+            var l = '<div class="layer" fb-type="' + type + '" data-locked="' + ($this.linkeditor.links.locks.isLocked(uid) ? '1' : '0') + '">';
+            l += '<input name="' + uid + '" type="checkbox"> ';
+            l += '<label class="layer" data-uid="' + uid + '">';
             l += dest;
-            l += '<span data-tooltip="' + TRANSLATIONS.click_to_copy_id + '" data-uid="' + $(this).attr('fb-uid') + '" class="uid">#' + $(this).attr('fb-uid') + '</span>';
+            l += '<span data-tooltip="' + TRANSLATIONS.click_to_copy_id + '" data-uid="' + uid + '" class="uid">#' + uid + '</span>';
             l += '</label>';
             l += '<a href="#" class="lock" data-icon="lock" data-tooltip="' + TRANSLATIONS['lock'] + '"></a>';
             l += '</div>';
@@ -104,20 +76,7 @@ LinkeditorLayers.prototype = {
     },
 
     updateSelection() {
-
-        if (this.container === undefined || this.container.is(':hidden')) {
-            return;
-        }
-        var $this = this;
-        this.maskCheckEvents = true;
-        setTimeout(function () {
-            $this.maskCheckEvents = false;
-        }, 100);
-
-        $('#linkeditor-links .link').each(function () {
-            let checkbox = $this.container.find('input[name=' + $(this).attr('fb-uid') + ']');
-            checkbox.prop('checked', $(this).is('.selected'));
-        });
+        this.linkeditor.panels.updatePanelSelection(this);
     },
 
     resize: function () {
diff --git a/resources/linkeditor-stable/js/linkeditor.links.js b/resources/linkeditor-stable/js/linkeditor.links.js
index 2b389fcde..19fead76f 100644
--- a/resources/linkeditor-stable/js/linkeditor.links.js
+++ b/resources/linkeditor-stable/js/linkeditor.links.js
@@ -207,16 +207,20 @@ LinkeditorLinks.prototype = {
 
 
         $.contextMenu({
-            selector: '#linkeditor-canvas,.link,#linkeditor-panel-layers, #linkeditor-panel-layers label', events: {
+            selector: '#linkeditor-canvas,.link,#linkeditor-panel-layers, #linkeditor-panel-layers label,#linkeditor-panel-accessibility, #linkeditor-panel-accessibility label',
+            events: {
                 show: function (e) {
                     $this.contextMenuPosition = {x: $this.linkeditor.mx, y: $this.linkeditor.my};
-                }, preShow: function (e) {
+                },
+                preShow: function (e) {
+                    console.log(e);
                     if ($(e).is('.link:not(.selected)')) {
                         $this.deselectAllLinks();
                         $this.selectLink(e);
                     }
-                    if ($(e).is('#linkeditor-panel-layers label')) {
-                        let input = $(e).find('input');
+                    if ($(e).is('.linkeditor-panel label')) {
+                        let input = $(e).closest('div.layer').find('input');
+                        console.log(input, input.prop('checked'));
                         if (!input.prop('checked')) {
                             $this.deselectAllLinks();
                             $this.selectLink($('.link[fb-uid=' + input.attr('name') + ']'));
@@ -297,16 +301,12 @@ LinkeditorLinks.prototype = {
                             },
                         };
                         res.items.paste_on_left = {
-                            isHtmlName: true,
-                            name: TRANSLATIONS.paste_on_left,
-                            callback: function () {
+                            isHtmlName: true, name: TRANSLATIONS.paste_on_left, callback: function () {
                                 $this.paste('left');
                             },
                         };
                         res.items.paste_on_right = {
-                            isHtmlName: true,
-                            name: TRANSLATIONS.paste_on_right,
-                            callback: function () {
+                            isHtmlName: true, name: TRANSLATIONS.paste_on_right, callback: function () {
                                 $this.paste('right');
                             },
                         };
@@ -341,40 +341,29 @@ LinkeditorLinks.prototype = {
                     }
 
                     res.items = $.extend(res.items, {
-                        sep_extends: '---------',
-                        cover: {
-                            name: TRANSLATIONS.cover,
-                            items: cover_items,
+                        sep_extends: '---------', cover: {
+                            name: TRANSLATIONS.cover, items: cover_items,
                         }
                     });
                 }
                 if (hasSelection) {
                     res.items = $.extend(res.items, {
-                        'sep_order': '---------',
-                        "order": {
-                            name: (TRANSLATIONS.edit_link_order) + '',
-                            items: {
+                        'sep_order': '---------', "order": {
+                            name: (TRANSLATIONS.edit_link_order) + '', items: {
                                 'move_order_start': {
-                                    name: TRANSLATIONS.move_beginning,
-                                    callback: function () {
+                                    name: TRANSLATIONS.move_beginning, callback: function () {
                                         $this.moveSelectionOrder('start');
                                     }
-                                },
-                                'move_order_up': {
-                                    name: TRANSLATIONS.move_up,
-                                    callback: function () {
+                                }, 'move_order_up': {
+                                    name: TRANSLATIONS.move_up, callback: function () {
                                         $this.moveSelectionOrder('up');
                                     }
-                                },
-                                'move_order_down': {
-                                    name: TRANSLATIONS.move_down,
-                                    callback: function () {
+                                }, 'move_order_down': {
+                                    name: TRANSLATIONS.move_down, callback: function () {
                                         $this.moveSelectionOrder('down');
                                     }
-                                },
-                                'move_order_end': {
-                                    name: TRANSLATIONS.move_end,
-                                    callback: function () {
+                                }, 'move_order_end': {
+                                    name: TRANSLATIONS.move_end, callback: function () {
                                         $this.moveSelectionOrder('end');
                                     }
                                 }
@@ -403,6 +392,10 @@ LinkeditorLinks.prototype = {
         }, 250);
     },
 
+    moveSelectionOrder: function (way) {
+        return this.linkeditor.accessibility.moveSelectionOrder(way);
+    },
+
     key: function (shortcut, scope) {
         var $this = this;
         key(shortcut, function (event, handler) {
@@ -911,6 +904,10 @@ LinkeditorLinks.prototype = {
         return res;
     },
 
+    getLinksOfCurrentPage: function () {
+        return $('#linkeditor-links .link:not(.pendingCreate)');
+    },
+
     loadLinks: function (page, side) {
         this.pageMaxOrderIndex = 0;
         let $this = this;
@@ -1060,12 +1057,7 @@ LinkeditorLinks.prototype = {
 
     updatePanels: function () {
         this.updateDepths();
-        if (this.linkeditor.panels.isPanelActive('layers')) {
-            this.linkeditor.layers.update();
-        }
-        if (this.linkeditor.panels.isPanelActive('accessibility')) {
-            this.linkeditor.accessibility.update();
-        }
+        this.linkeditor.panels.refresh()
     },
 
     deleteSelection: function () {
@@ -1120,7 +1112,7 @@ LinkeditorLinks.prototype = {
 
     updateSelection: function () {
         $("#linkeditor").attr('data-selection-count', this.getCurrentSelection().length);
-        this.linkeditor.layers.updateSelection();
+        this.linkeditor.panels.updateSelection();
     },
 
     updateDepths: function () {
diff --git a/resources/linkeditor-stable/js/linkeditor.panels.js b/resources/linkeditor-stable/js/linkeditor.panels.js
index d09b8ddbd..e9150c8af 100644
--- a/resources/linkeditor-stable/js/linkeditor.panels.js
+++ b/resources/linkeditor-stable/js/linkeditor.panels.js
@@ -12,8 +12,7 @@ LinkeditorPanels.prototype = {
         var $this = this;
 
         this.sides = this.linkeditor.settings.get('panels_layout', {
-            left: ['layers', 'accessibility', 'versions'],
-            right: ['form']
+            left: ['layers', 'accessibility', 'versions'], right: ['form']
         });
         $.each(this.sides, function (side, panels) {
             var panelsContainer = $("#linkeditor-" + side + '-panel');
@@ -44,6 +43,46 @@ LinkeditorPanels.prototype = {
         this.linkeditor.layers.init();
         this.linkeditor.accessibility.init();
 
+        $(document).on('change', '.linkeditor-panel :checkbox', function () {
+            var link = $('#linkeditor-links [fb-uid="' + $(this).attr('name') + '"]');
+
+            if ($(this).prop('checked')) {
+                $this.linkeditor.links.selectLink(link);
+            } else {$this.linkeditor.links.deselectLink(link);
+
+            }
+            return true;
+        });
+
+        $(document).on('click', '.linkeditor-panel a.lock', function () {
+            let uid = $(this).closest('.layer').find('input').attr('name');
+            $this.linkeditor.links.locks.toggleLock(uid);
+            return false;
+        });
+
+        $(document).on('click', ".linkeditor-panel label", function (e) {
+            if ($this.maskCheckEvents) {
+                return false;
+            }
+
+            let uid = $(this).attr('data-uid');
+            var link = $('#linkeditor-links [fb-uid="' + uid + '"]');
+            let checked = $(link).hasClass('selected');
+
+            if (!e.ctrlKey) {
+                $this.linkeditor.links.deselectAllLinks();
+                $this.linkeditor.links.selectLink(link);
+            } else {
+                if (checked) {
+                    $this.linkeditor.links.deselectLink(link);
+                } else {
+                    $this.linkeditor.links.selectLink(link);
+                }
+            }
+
+            $this.linkeditor.form.updateLinkForm();
+            return false;
+        });
 
         this.linkeditor.resize.resize();
         $(document).on('mousedown', ".linkeditor-sidebar .handle", function (e) {
@@ -108,20 +147,15 @@ LinkeditorPanels.prototype = {
 
     toggleVersions: function () {
         this.togglePanel('versions');
-    },
-    toggleLayers: function () {
+    }, toggleLayers: function () {
         this.togglePanel('layers');
-    },
-    toggleForm: function () {
+    }, toggleForm: function () {
         this.togglePanel('form');
-    },
-    toggleAccessibility: function () {
+    }, toggleAccessibility: function () {
         this.togglePanel('accessibility');
-    },
-    togglePanel: function (panel) {
+    }, togglePanel: function (panel) {
         this.setPanelState(panel, 'toggle');
-    },
-    setPanelState: function (panel, newState) {
+    }, setPanelState: function (panel, newState) {
         var $this = this;
         var panelDiv = $('#linkeditor-panel-' + panel);
         let container = panelDiv.closest('.linkeditor-panel-side');
@@ -152,17 +186,10 @@ LinkeditorPanels.prototype = {
                 }
                 $this.setPanelState($(this).data('panel'), false);
             });
-            try {
-                if (panel === 'layers') {
-                    this.linkeditor.layers.update();
-                } else if (panel === 'accessibility') {
-                    this.linkeditor.accessibility.update();
-                }
-            } catch (e) {
-
-            }
         }
 
+        this.refresh();
+
         // Check if a panel is open on this side, if not, hide the panel
         let sideOpen = $(container).children('.open').length > 0;
         if (sideOpen) {
@@ -183,5 +210,47 @@ LinkeditorPanels.prototype = {
         return $('#linkeditor-panel-' + panel).hasClass('open');
     },
 
+    updateSelection: function () {
+        if (this.isPanelActive('layers')) {
+            this.linkeditor.layers.updateSelection();
+        }
+        if (this.isPanelActive('accessibility')) {
+            this.linkeditor.accessibility.updateSelection();
+        }
+    },
+
+    updatePanelSelection: function (panel) {
+        if (panel.container === undefined || panel.container.is(':hidden')) {
+            return;
+        }
+        panel.maskCheckEvents = true;
+        setTimeout(function () {
+            panel.maskCheckEvents = false;
+        }, 100);
+
+        $('#linkeditor-links .link').each(function () {
+            let checkbox = panel.container.find('input[name=' + $(this).attr('fb-uid') + ']');
+            checkbox.prop('checked', $(this).is('.selected'));
+        });
+
+    },
+
+    refresh: function () {
+        try {
+            if (this.isPanelActive('layers')) {
+                this.linkeditor.layers.update();
+            }
+        } catch (e) {
+
+        }
+        try {
+            if (this.isPanelActive('accessibility')) {
+                this.linkeditor.accessibility.update();
+            }
+        } catch (e) {
+
+        }
+    }
+
 };
 export default LinkeditorPanels;
diff --git a/resources/linkeditor-stable/style/inc/_layers.sass b/resources/linkeditor-stable/style/inc/_layers.sass
index eaacb4b65..92495968b 100644
--- a/resources/linkeditor-stable/style/inc/_layers.sass
+++ b/resources/linkeditor-stable/style/inc/_layers.sass
@@ -20,31 +20,44 @@
     .layer
         position: relative
 
+        input
+            color: #fff
+            position: absolute
+            top: 4px
+            left: 4px
+            width: 16px
+            height: 16px
+            z-index: 2
+
+            &::before
+                height: 16px
+                width: 16px
+                border: 0
+
+            &::after
+                width: 14px
+                height: 14px
+                top: 1px
+                left: 1px
+
         label
             display: block
             border-bottom: 1px solid currentColor
-            padding: 5px 10px
+            padding: 5px 10px 5px 24px
             cursor: pointer
 
-
             span
                 display: inline-block
                 position: absolute
-                right: 28px
+                right: 24px
+                height: 16px
                 background-color: rgba(255, 255, 255, 0.5)
                 color: #000
+                top: 4px
                 border-radius: 2px
                 padding: 2px
                 font-family: "Courier New", Courier, monospace
 
-            input
-                color: #fff
-                position: relative
-                top: 2px
-
-                &::before
-                    border: 0
-
         &[data-locked="1"]
             label
                 pointer-events: none
@@ -56,8 +69,8 @@
         a.lock
             display: block
             position: absolute
-            top: 5px
-            right: 6px
+            top: 4px
+            right: 4px
             border-radius: 2px
             width: 16px
             height: 16px
@@ -69,6 +82,5 @@
                 color: rgba(255, 255, 255, 0.8)
                 background-color: rgba(255, 255, 255, 0.25)
 
-
             svg
                 display: none
diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php
index 08969b9c0..a1e22ccf7 100644
--- a/resources/views/fluidbook_publication/link_editor.blade.php
+++ b/resources/views/fluidbook_publication/link_editor.blade.php
@@ -214,15 +214,15 @@
                data-action="panels.toggleLayers"
                data-tooltip="{{__('Liste des liens')}} (F7)"
                data-key="f7"></a>
+            <a href="#" id="linkeditor-icon-accessibility" data-panel="accessibility" data-icon="accessibility"
+               data-action="panels.toggleAccessibility"
+               data-tooltip="{{__('Accessibilité')}} (Alt+A)" data-key="Alt+A"></a>
             <a href="#" id="linkeditor-icon-versions" data-panel="versions" data-action="panels.toggleVersions"
                data-icon="wayback-machine"
                data-tooltip="{{__('Restaurer une version précédente')}} (F6)" data-key="f6"></a>
             <a href="#" id="linkeditor-icon-form" data-panel="form" data-icon="settings"
                data-action="panels.toggleForm"
                data-tooltip="{{__('Paramètres du lien')}} (F8)" data-key="f8"></a>
-            <a href="#" id="linkeditor-icon-accessibility" data-panel="accessibility" data-icon="accessibility"
-               data-action="panels.toggleAccessibility"
-               data-tooltip="{{__('Accessibilité')}} (Alt+A)" data-key="Alt+A"></a>
             <div id="linkeditor-panel-versions">
                 <div id="linkeditor-panel-versions-list">
 
@@ -435,7 +435,7 @@
             background-color: {{\Cubist\Util\Graphics\Color::colorToCSS($type['color'],0.25)}};
         }
 
-        .linkeditor-linktype[data-type="{{$type['type']}}"]::before, label[fb-type="{{$type['type']}}"] input[type="checkbox"]::before {
+        .linkeditor-linktype[data-type="{{$type['type']}}"]::before, .layer[fb-type="{{$type['type']}}"] input[type="checkbox"]::before {
             background-color: {{$type['color']}};
         }
         @endif
-- 
2.39.5