From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 13 Oct 2022 16:04:40 +0000 (+0200)
Subject: wip #5468 @4
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=546d0c9f13a76e18d82077867683dc0d472929d5;p=fluidbook-toolbox.git

wip #5468 @4
---

diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js
index b57653b2c..21e54b946 100644
--- a/resources/linkeditor/js/linkeditor.js
+++ b/resources/linkeditor/js/linkeditor.js
@@ -53,6 +53,13 @@ LinkEditor.prototype = {
         this.save = new LinkeditorSave(this);
 
         this.initEvents();
+        this.initIcons();
+    },
+
+    initIcons:function(){
+        $("#linkeditor [data-icon]").each(function () {
+            $(this).append(getSpriteIcon('linkeditor-' + $(this).data('icon')));
+        });
     },
 
     initEvents: function () {
diff --git a/resources/linkeditor/js/linkeditor.resize.js b/resources/linkeditor/js/linkeditor.resize.js
index 7f3aa4495..bbde620d7 100644
--- a/resources/linkeditor/js/linkeditor.resize.js
+++ b/resources/linkeditor/js/linkeditor.resize.js
@@ -12,10 +12,17 @@ LinkeditorResize.prototype = {
     },
 
     resize: function () {
+        this.ww = $(window).outerWidth();
+        this.hh = $(window).outerHeight();
+        this.resizeMain();
         this.resizeCanvas();
         this.linkeditor.rulers.updateRulers();
     },
 
+    resizeMain: function () {
+        $("#linkeditor-main").css('width', this.ww - $('#linkeditor-left').outerWidth() - $('#linkeditor-right').outerWidth());
+    },
+
     resizeCanvas: function () {
         this.linkeditor.canvasRect = $("#linkeditor-canvas").get(0).getBoundingClientRect();
         this.linkeditor.editorRect = $("#linkeditor-editor").get(0).getBoundingClientRect();
diff --git a/resources/linkeditor/js/linkeditor.toolbar.js b/resources/linkeditor/js/linkeditor.toolbar.js
index 4c4e705f6..3c7dac2de 100644
--- a/resources/linkeditor/js/linkeditor.toolbar.js
+++ b/resources/linkeditor/js/linkeditor.toolbar.js
@@ -12,10 +12,6 @@ LinkeditorToolbar.prototype = {
             return false;
         });
 
-        $("#linkeditor-toolbar [data-icon]").each(function () {
-            $(this).append(getSpriteIcon('linkeditor-' + $(this).data('icon')));
-        });
-
         $("[data-key]").each(function () {
             let e = $(this);
             key($(this).data('key'), function () {
diff --git a/resources/linkeditor/style/panels.sass b/resources/linkeditor/style/panels.sass
new file mode 100644
index 000000000..237a54dbd
--- /dev/null
+++ b/resources/linkeditor/style/panels.sass
@@ -0,0 +1,70 @@
+.linkeditor-sidebar
+    min-width: $sidebar-icons-width
+    background-color: #EBECEE
+    position: relative
+
+    @media (prefers-color-scheme: dark)
+        background-color: #333
+
+    nav
+        position: absolute
+        width: $sidebar-icons-width
+        height: 100%
+
+        [data-icon]
+            display: inline-block
+            vertical-align: top
+            height: 30px
+            min-width: 30px
+            padding: 5px
+            border-radius: 5px
+            margin: 6px 0 0 7px
+            text-align: center
+            color: $toolbar-color
+            @media (prefers-color-scheme: dark)
+                color: $toolbar-color-dark
+
+            &:hover, &.hover
+                background-color: #fff
+                @media (prefers-color-scheme: dark)
+                    background-color: #000
+
+            svg
+                position: relative
+                top: 1px
+                height: 18px
+                width: auto
+
+
+    .handle
+        position: absolute
+        right: 0
+        width: 2px
+        height: 100%
+        background-color: #aaa
+        @media (prefers-color-scheme: dark)
+            background-color: #666
+        cursor: col-resize
+
+    .linkeditor-panel
+        display: none
+        margin-left: $sidebar-icons-width
+
+        background: $panel-background
+        height: 100%
+        @media (prefers-color-scheme: dark)
+            background-color: #111
+
+    &#linkeditor-right
+        border-width: 0 0 0 2px
+
+        [data-icon]
+            margin-left: 9px
+
+        .handle
+            right: auto
+            left: 0
+
+        .linkeditor-panel
+            margin-left: 0
+            margin-right: $sidebar-icons-width
diff --git a/resources/linkeditor/style/style.sass b/resources/linkeditor/style/style.sass
index 26e8092ad..2164e1565 100644
--- a/resources/linkeditor/style/style.sass
+++ b/resources/linkeditor/style/style.sass
@@ -24,21 +24,13 @@ body, #linkeditor, html
     font-size: 0
     overflow: hidden
 
-    aside, #linkeditor-main
+    .linkeditor-sidebar, #linkeditor-main
         display: inline-block
         height: 100%
         vertical-align: top
         text-align: left
 
-    aside
-        width: $sidebar-width
-        background-color: #EBECEE
-        @media (prefers-color-scheme: dark)
-            background-color: #333
-
     #linkeditor-main
-        width: calc(100% - $sidebar-width - $sidebar-width)
-
         &.grab
             cursor: grab
 
@@ -148,6 +140,7 @@ body, #linkeditor, html
 #linkeditor-preload
     display: none
 
+@import "panels"
 @import "toolbar"
 @import "rulers"
 @import "links"
diff --git a/resources/linkeditor/style/variables.sass b/resources/linkeditor/style/variables.sass
index 06908ce24..ab1fc21e2 100644
--- a/resources/linkeditor/style/variables.sass
+++ b/resources/linkeditor/style/variables.sass
@@ -1,8 +1,10 @@
 $font-size: 16px
-$sidebar-width: 40px
+$sidebar-icons-width: 46px
 $rulers-size: 16px
 $ruler-margin: 2px
 
 $toolbar-height: 40px
 $toolbar-color: #5d5d5d
 $toolbar-color-dark: #bbb
+
+$panel-background: #ebecee
diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php
index 307ac6b40..94232c4dc 100644
--- a/resources/views/fluidbook_publication/link_editor.blade.php
+++ b/resources/views/fluidbook_publication/link_editor.blade.php
@@ -22,7 +22,16 @@
 @section('content')
     @include('fluidbook_publication.link_editor_icons')
     <div draggable="false" id="linkeditor">
-        <aside id="linkeditor-left"></aside>
+        <aside id="linkeditor-left" class="linkeditor-sidebar">
+            <nav id="linkeditor-left-icons">
+                <a href="#" data-icon="layers" data-action="panel.toggle.layers" data-tooltip="{{__('Liste des liens')}} (F7)"
+                   data-key="F7"></a>
+            </nav>
+            <div id="linkeditor-left-panel" class="linkeditor-panel open">
+
+            </div>
+            <div class="handle"></div>
+        </aside>
         <div id="linkeditor-main">
             <div draggable="false" id="linkeditor-toolbar">
                 <nav id="linkeditor-toolbar-left">
@@ -82,7 +91,14 @@
                 </div>
             </div>
         </div>
-        <aside id="linkeditor-right"></aside>
+        <aside id="linkeditor-right" class="linkeditor-sidebar">
+            <nav id="linkeditor-left-icons">
+                <a href="#" data-icon="settings" data-action="panel.toggle.form" data-tooltip="{{__('Afficher le formulaire')}} (F8)"
+                   data-key="F8"></a>
+            </nav>
+            <div id="linkeditor-left-panel" class="linkeditor-panel open"></div>
+            <div class="handle"></div>
+        </aside>
     </div>
     <div id="linkeditor-preload"></div>
 @endsection