wip #7634 ajout du loader à la sauvegarde

diff --git a/resources/markdowneditor/js/markdowneditor.save.js b/resources/markdowneditor/js/markdowneditor.save.js
index fdf369214dfde3cc96d40ac0b2dc3ba644d5e72f..f45a9ccfef719a3145ed058d9dbe67c5972fe4a1 100644 (file)
--- a/resources/markdowneditor/js/markdowneditor.save.js
+++ b/resources/markdowneditor/js/markdowneditor.save.js
@@ -56,6 +56,8 @@ MarkdowneditorSave.prototype = {
             message = TRANSLATIONS.manual_save_message;
         }
 
+        $(".markdown-toolbar-save-block").addClass("is-saving")
+
         $.ajax({
             url: '/fluidbook-publication/' + FLUIDBOOK_DATA.id + '/save/markdown', method: 'post', data: {
                 _method: 'put',
@@ -77,6 +79,9 @@ MarkdowneditorSave.prototype = {
                 $this.markdowneditor.hasChanged();
                 $this.markdowneditor.notification(TRANSLATIONS.error_save + ' : ' + error, 'error');
             },
+            complete: function() {
+                $(".markdown-toolbar-save-block").removeClass("is-saving")
+            }
         });
     },
 

diff --git a/resources/markdowneditor/style/style.sass b/resources/markdowneditor/style/style.sass
index 954b6fb7b0f542ebaa92551189cdb6e4a2de58f7..34e41b439199faf260c1eb35136b37df99336425 100644 (file)
--- a/resources/markdowneditor/style/style.sass
+++ b/resources/markdowneditor/style/style.sass
@@ -143,6 +143,22 @@ body
         width: 100%
         display: flex
         align-items: center
+        &-save-block
+            position: relative
+            min-width: 26px
+            &.is-saving
+                [data-icon="save"]
+                    display: none
+                [data-icon="loading"]
+                    display: block !important
+
+        [data-icon="loading"]
+            display: none
+            position: absolute
+            left: 0
+            animation: rotate 1.5s linear infinite
+            pointer-events: none
+
     &-editor
         display: flex
         height: 100vh
@@ -254,3 +270,9 @@ input::-webkit-inner-spin-button
 .ProseMirror,
 .toastui-editor-md-preview
     @include tinyscrollbars
+
+@keyframes rotate
+    from
+        transform: rotate(0)
+    to
+        transform: rotate(360deg)

diff --git a/resources/views/fluidbook_publication/link_editor_icons.blade.php b/resources/views/fluidbook_publication/link_editor_icons.blade.php
index df83965ec4e493698794a9d7c50f49ffe6d801a5..a6d7c934b50ab6219c43b882001a9bcadb7ead75 100644 (file)
--- a/resources/views/fluidbook_publication/link_editor_icons.blade.php
+++ b/resources/views/fluidbook_publication/link_editor_icons.blade.php
@@ -87,6 +87,26 @@ Edit here : https://toolbox.fluidbook.com/tool-sprite/3/edit
             <path fill="currentColor" d="M3.3.5c-.2,0-.3.2-.4.4,0,.1,0,.3,0,.5,0,.1.2.3.3.3h0s1.5,0,1.5,0c.8,0,1.5,0,1.6,0,0,0,.1,0,.2,0,1.1.2,2.1.9,2.8,1.8.3.4.5.9.6,1.4,0,.4,0,.2,0,5.5v4.9l-1.3-1.3c-.9-.9-1.4-1.3-1.4-1.4-.3-.2-.7,0-.8.3,0,0,0,.1,0,.2,0,.3-.1.1,2,2.3,1.6,1.6,1.9,1.9,2,1.9,0,0,.1,0,.2,0,.3,0,.1.2,2.3-2,2.1-2.1,2-2,2-2.3s0-.2,0-.3c-.1-.3-.5-.4-.8-.3,0,0-.4.4-1.4,1.4l-1.3,1.3v-5c0-5.5,0-5-.1-5.6-.2-.8-.6-1.6-1.1-2.3-.2-.2-.6-.7-.8-.8-.7-.6-1.6-1-2.4-1.1-.4,0-.4,0-2,0-1.4,0-1.5,0-1.6,0"/>
         </symbol><symbol id="linkeditor-move-up" viewBox="0 0 18 18">
             <path fill="currentColor" d="M3.3,17.5c0,0,.2,0,1.6,0,1.6,0,1.6,0,2,0,.9-.2,1.7-.6,2.4-1.1.2-.2.7-.6.8-.8.5-.7.9-1.5,1.1-2.3.1-.5.1,0,.1-5.6V2.6s1.3,1.3,1.3,1.3c1,1,1.4,1.3,1.4,1.4.3.1.7,0,.8-.3,0,0,0-.1,0-.3,0-.3.2-.1-2-2.3-2.1-2.1-2-2-2.3-2s-.2,0-.2,0c0,0-.4.4-2,1.9-2.2,2.2-2,2-2,2.3,0,.1,0,.2,0,.2.1.3.5.4.8.3,0,0,.5-.5,1.4-1.4l1.3-1.3v4.9c0,5.3,0,5.1,0,5.5-.1.5-.3,1-.6,1.4-.6,1-1.6,1.6-2.8,1.8,0,0-.2,0-.2,0,0,0-.7,0-1.6,0h-1.5s0,0,0,0c-.1,0-.3.2-.3.3,0,.1,0,.3,0,.5,0,.2.2.3.4.4"/>
+        </symbol><symbol id="linkeditor-loading" viewBox="0 0 32 32">
+            <style type="text/css">
+                .st0{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+            </style>
+            <line class="st0" x1="16" y1="2" x2="16" y2="7"/>
+            <line class="st0" x1="10.6" y1="3.1" x2="12.6" y2="7.7"/>
+            <line class="st0" x1="6.1" y1="6.1" x2="9.6" y2="9.6"/>
+            <line class="st0" x1="3.1" y1="10.6" x2="7.7" y2="12.6"/>
+            <line class="st0" x1="2" y1="16" x2="7" y2="16"/>
+            <line class="st0" x1="3.1" y1="21.4" x2="7.7" y2="19.4"/>
+            <line class="st0" x1="6.1" y1="25.9" x2="9.6" y2="22.4"/>
+            <line class="st0" x1="10.6" y1="28.9" x2="12.6" y2="24.3"/>
+            <line class="st0" x1="16" y1="30" x2="16" y2="25"/>
+            <line class="st0" x1="21.4" y1="28.9" x2="19.4" y2="24.3"/>
+            <line class="st0" x1="25.9" y1="25.9" x2="22.4" y2="22.4"/>
+            <line class="st0" x1="28.9" y1="21.4" x2="24.3" y2="19.4"/>
+            <line class="st0" x1="30" y1="16" x2="25" y2="16"/>
+            <line class="st0" x1="28.9" y1="10.6" x2="24.3" y2="12.6"/>
+            <line class="st0" x1="25.9" y1="6.1" x2="22.4" y2="9.6"/>
+            <line class="st0" x1="21.4" y1="3.1" x2="19.4" y2="7.7"/>
         </symbol></svg></div>
 <script>
     function getSpriteIcon(icon, attrs, dimensions) {

diff --git a/resources/views/fluidbook_publication/markdown_editor.blade.php b/resources/views/fluidbook_publication/markdown_editor.blade.php
index 9497606f2354cc8a776f7845ade3f2dfdda9d3e6..5aa35553a357b4c1725f862365a5f12c0397c080 100644 (file)
--- a/resources/views/fluidbook_publication/markdown_editor.blade.php
+++ b/resources/views/fluidbook_publication/markdown_editor.blade.php
@@ -86,8 +86,11 @@
         <div class="markdown-editor">
             <div class="markdown-nav markdown-toolbar">
                 <nav class="markdown-toolbar-left" id="markdown-toolbar-left">
-                    <a href="#" data-icon="save" data-action="save.save" data-tooltip="{{__('Sauvegarder')}} (Ctrl+S)"
-                       data-key="ctrl+s"></a>
+                    <div class="markdown-toolbar-save-block">
+                        <a href="#" data-icon="save" data-action="save.save" data-tooltip="{{__('Sauvegarder')}} (Ctrl+S)"
+                           data-key="ctrl+s"></a>
+                        <a nohref data-icon="loading" class=""></a>
+                    </div>
                     <a href="#" data-icon="undo" data-action="undo.undo"
                        data-tooltip="{{__('Annuler la dernière modification')}} (Ctrl+Z)"
                        data-key="ctrl+z" data-key-skipintextfields></a>