Mercurial > hg > orthanc-stone
changeset 2010:25d269c7b753
grouping annotations into one submenu for narrow screens
| author | Sebastien Jodogne <s.jodogne@gmail.com> |
|---|---|
| date | Fri, 02 Dec 2022 18:06:33 +0100 |
| parents | 196684ae6206 |
| children | abd4ee1648de |
| files | Applications/StoneWebViewer/NEWS Applications/StoneWebViewer/WebApplication/app.js Applications/StoneWebViewer/WebApplication/index.html |
| diffstat | 3 files changed, 89 insertions(+), 69 deletions(-) [+] |
line wrap: on
line diff
--- 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) ========================
--- 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,
--- 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"