# HG changeset patch
# User Sebastien Jodogne <s.jodogne@gmail.com>
# Date 1670000793 -3600
# Node ID 25d269c7b7535591e8accaf78461bd8f6fb3bca8
# Parent  196684ae6206b1b42082704cd2c2b621ffe99d16
grouping annotations into one submenu for narrow screens

diff -r 196684ae6206 -r 25d269c7b753 Applications/StoneWebViewer/NEWS
--- a/Applications/StoneWebViewer/NEWS	Sat Nov 19 12:36:25 2022 +0100
+++ b/Applications/StoneWebViewer/NEWS	Fri Dec 02 18:06:33 2022 +0100
@@ -1,6 +1,8 @@
 Pending changes in the mainline
 ===============================
 
+* Annotations are grouped into one submenu for narrow screens
+
 
 Version 2.4 (2022-11-02)
 ========================
diff -r 196684ae6206 -r 25d269c7b753 Applications/StoneWebViewer/WebApplication/app.js
--- a/Applications/StoneWebViewer/WebApplication/app.js	Sat Nov 19 12:36:25 2022 +0100
+++ b/Applications/StoneWebViewer/WebApplication/app.js	Fri Dec 02 18:06:33 2022 +0100
@@ -426,6 +426,7 @@
       leftVisible: true,
       viewportLayoutButtonsVisible: false,
       mouseActionsVisible: false,
+      annotationActionsVisible: false,
       activeViewport: 0,
       showInfo: true,
       showReferenceLines: true,
diff -r 196684ae6206 -r 25d269c7b753 Applications/StoneWebViewer/WebApplication/index.html
--- a/Applications/StoneWebViewer/WebApplication/index.html	Sat Nov 19 12:36:25 2022 +0100
+++ b/Applications/StoneWebViewer/WebApplication/index.html	Fri Dec 02 18:06:33 2022 +0100
@@ -336,9 +336,9 @@
               <div class="tbGroup">
                 <div class="tbGroup__toggl">
                   <button class="wvButton"
-                          v-bind:class="{ 'wvButton--underline' : !viewportLayoutButtonsVisible }"
+                          v-bind:class="{ 'wvButton--underline' : !viewportLayoutButtonsVisible, 'wvButton--border' : viewportLayoutButtonsVisible }"
                           data-toggle="tooltip" data-title="Change layout"
-                          @click="viewportLayoutButtonsVisible = !viewportLayoutButtonsVisible;HideAllTooltips()">
+                          @click="viewportLayoutButtonsVisible = !viewportLayoutButtonsVisible;mouseActionsVisible=false;annotationActionsVisible=false;HideAllTooltips()">
                     <i class="fa fa-th"></i>
                   </button>
                 </div>
@@ -373,9 +373,9 @@
               <div class="tbGroup">
                 <div class="tbGroup__toggl">
                   <button class="wvButton"
-                          v-bind:class="{ 'wvButton--underline' : !mouseActionsVisible }"
+                          v-bind:class="{ 'wvButton--underline' : !mouseActionsVisible, 'wvButton--border' : mouseActionsVisible }"
                           data-toggle="tooltip" data-title="Mouse actions"
-                          @click="mouseActionsVisible = !mouseActionsVisible;HideAllTooltips()">
+                          @click="viewportLayoutButtonsVisible=false;mouseActionsVisible = !mouseActionsVisible;annotationActionsVisible=false;HideAllTooltips()">
                     <i class="fa fa-mouse-pointer"></i>
                   </button>
                 </div>
@@ -528,77 +528,94 @@
               </button>
             </div>
             
-            <div class="ng-scope inline-object">
-              <button class="wvButton--underline text-center"
-                      v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_LENGTH }"
-                      v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_LENGTH, stone.WebViewerAction.CREATE_LENGTH)"
-                      data-toggle="tooltip" data-title="Measure length">
-                <i class="fas fa-ruler"></i>
-              </button>
-            </div>
 
             <div class="ng-scope inline-object">
-              <button class="wvButton--underline text-center"
-                      v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_ANGLE }"
-                      v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_ANGLE, stone.WebViewerAction.CREATE_ANGLE)"
-                      data-toggle="tooltip" data-title="Measure angle">
-                <i class="fas fa-drafting-compass"></i>
-              </button>
-            </div>
+              <div class="tbGroup">
+                <div class="tbGroup__toggl">
+                  <button class="wvButton"
+                          v-bind:class="{ 'wvButton--underline' : !annotationActionsVisible, 'wvButton--border' : annotationActionsVisible }"
+                          data-toggle="tooltip" data-title="Annotations"
+                          @click="viewportLayoutButtonsVisible=false;mouseActionsVisible=false;annotationActionsVisible = !annotationActionsVisible;HideAllTooltips()">
+                    <i class="fas fa-pencil-ruler"></i>
+                  </button>
+                </div>
+                
+                <div class="tbGroup__buttons--bottom" v-show="annotationActionsVisible">
+                  <div class="ng-scope inline-object">
+                    <button class="wvButton--underline text-center"
+                            v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_LENGTH }"
+                            v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_LENGTH, stone.WebViewerAction.CREATE_LENGTH)"
+                            data-toggle="tooltip" data-title="Measure length">
+                      <i class="fas fa-ruler"></i>
+                    </button>
+                  </div>
+
+                  <div class="ng-scope inline-object">
+                    <button class="wvButton--underline text-center"
+                            v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_ANGLE }"
+                            v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_ANGLE, stone.WebViewerAction.CREATE_ANGLE)"
+                            data-toggle="tooltip" data-title="Measure angle">
+                      <i class="fas fa-drafting-compass"></i>
+                    </button>
+                  </div>
+
+                  <div class="ng-scope inline-object">
+                    <button class="wvButton--underline text-center"
+                            v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_CIRCLE }"
+                            v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_CIRCLE, stone.WebViewerAction.CREATE_CIRCLE)"
+                            data-toggle="tooltip" data-title="Measure circle">
+                      <i class="far fa-circle"></i>
+                    </button>
+                  </div>
 
-            <div class="ng-scope inline-object">
-              <button class="wvButton--underline text-center"
-                      v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_CIRCLE }"
-                      v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_CIRCLE, stone.WebViewerAction.CREATE_CIRCLE)"
-                      data-toggle="tooltip" data-title="Measure circle">
-                <i class="far fa-circle"></i>
-              </button>
-            </div>
+                  <div class="ng-scope inline-object">
+                    <button class="wvButton--underline text-center"
+                            v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_PIXEL_PROBE }"
+                            v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_PIXEL_PROBE, stone.WebViewerAction.CREATE_PIXEL_PROBE)"
+                            data-toggle="tooltip" data-title="Pixel probe">
+                      <i class="fas fa-microscope"></i>
+                    </button>
+                  </div>
+
+                  <div class="ng-scope inline-object">
+                    <button class="wvButton--underline text-center"
+                            v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_RECTANGLE_PROBE }"
+                            v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_RECTANGLE_PROBE, stone.WebViewerAction.CREATE_RECTANGLE_PROBE)"
+                            data-toggle="tooltip" data-title="Rectangle probe">
+                      <i class="fas fa-plus-square"></i>
+                    </button>
+                  </div>
 
-            <div class="ng-scope inline-object">
-              <button class="wvButton--underline text-center"
-                      v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_PIXEL_PROBE }"
-                      v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_PIXEL_PROBE, stone.WebViewerAction.CREATE_PIXEL_PROBE)"
-                      data-toggle="tooltip" data-title="Pixel probe">
-                <i class="fas fa-microscope"></i>
-              </button>
+                  <div class="ng-scope inline-object">
+                    <button class="wvButton--underline text-center"
+                            v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_ELLIPSE_PROBE }"
+                            v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_ELLIPSE_PROBE, stone.WebViewerAction.CREATE_ELLIPSE_PROBE)"
+                            data-toggle="tooltip" data-title="Ellipse probe">
+                      <i class="fas fa-plus-circle"></i>
+                    </button>
+                  </div>
+
+                  <div class="ng-scope inline-object">
+                    <button class="wvButton--underline text-center"
+                            v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_TEXT_ANNOTATION }"
+                            v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_TEXT_ANNOTATION, stone.WebViewerAction.CREATE_TEXT_ANNOTATION)"
+                            data-toggle="tooltip" data-title="Add text annotation">
+                      <i class="fas fa-comment-dots"></i>
+                    </button>
+                  </div>
+
+                  <div class="ng-scope inline-object">
+                    <button class="wvButton--underline text-center"
+                            v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_REMOVE_MEASURE }"
+                            v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_REMOVE_MEASURE, stone.WebViewerAction.REMOVE_MEASURE)"
+                            data-toggle="tooltip" data-title="Delete annotation">
+                      <i class="fas fa-trash"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
             </div>
 
-            <div class="ng-scope inline-object">
-              <button class="wvButton--underline text-center"
-                      v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_RECTANGLE_PROBE }"
-                      v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_RECTANGLE_PROBE, stone.WebViewerAction.CREATE_RECTANGLE_PROBE)"
-                      data-toggle="tooltip" data-title="Rectangle probe">
-                <i class="fas fa-plus-square"></i>
-              </button>
-            </div>
-
-            <div class="ng-scope inline-object">
-              <button class="wvButton--underline text-center"
-                      v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_ELLIPSE_PROBE }"
-                      v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_ELLIPSE_PROBE, stone.WebViewerAction.CREATE_ELLIPSE_PROBE)"
-                      data-toggle="tooltip" data-title="Ellipse probe">
-                <i class="fas fa-plus-circle"></i>
-              </button>
-            </div>
-
-            <div class="ng-scope inline-object">
-              <button class="wvButton--underline text-center"
-                      v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_TEXT_ANNOTATION }"
-                      v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_TEXT_ANNOTATION, stone.WebViewerAction.CREATE_TEXT_ANNOTATION)"
-                      data-toggle="tooltip" data-title="Add text annotation">
-                <i class="fas fa-comment-dots"></i>
-              </button>
-            </div>
-
-            <div class="ng-scope inline-object">
-              <button class="wvButton--underline text-center"
-                      v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_REMOVE_MEASURE }"
-                      v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_REMOVE_MEASURE, stone.WebViewerAction.REMOVE_MEASURE)"
-                      data-toggle="tooltip" data-title="Delete annotation">
-                <i class="fas fa-trash"></i>
-              </button>
-            </div>
 
             <div class="ng-scope inline-object">
               <button class="wvButton--underline text-center"