Adapted FE layout for changing view mode

Added tabs for 'edit' or 'review' mode. 
The Django view checks if the user may view
shared annotations for the anobj. The layout
react accordingly.

adim_app/static/_src/adim/ui.js

@@ -100,15 +100,15 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
 
         //$("body").addClass("mode-"+config.mode);
 
-        $("#mode-selector button[data-href]").click(function(event){
-            event.preventDefault();
-            document.location.href = $(this).data('href');
-        });
-        if (config.mode === config.MODE_EDIT) {
-            $("#annotation-list-panel").remove();
-        }
-        else if (config.mode === config.MODE_REVIEW) {
-        }
+        //$("#mode-selector button[data-href]").click(function(event){
+        //    event.preventDefault();
+        //    document.location.href = $(this).data('href');
+        //});
+        //if (config.mode === config.MODE_EDIT) {
+        //    $("#annotation-list-panel").remove();
+        //}
+        //else if (config.mode === config.MODE_REVIEW) {
+        //}
 
 
         // ----- General Event listeners -----
@@ -300,12 +300,27 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
             _$mainNavBar.find(".adim-image-name .text").css("max-width", _$w.width() - _navBarTitleDelta);
         });
 
+        // TODO: à quoi sert ce code ?
         $("#side-col-panel-group .panel-collapse")
             .on('hidden.bs.collapse shown.bs.collapse', function () {
                 _adjustCanvasFrame();
             })
         ;
 
+        // Change Mod tab
+        // --------------
+        $(".adim-view-mod-tabs li").on("click", "a", function(event){
+            event.preventDefault();
+            var $elem = $(event.target),
+                $parentLi = $(event.delegateTarget),
+                mode = $elem.data("adimMode");
+
+            if ($parentLi.hasClass("active"))
+                return false;
+
+            updateViewMode(mode);
+        });
+
         // Fullscreen mode
         (function(enabled){
             if (!enabled) return;
@@ -486,6 +501,9 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
         initTools({disabled: !_editable});
         initAttributes({disabled: !_editable});
 
+
+        updateViewMode();
+
         if (!_editable) {
         }
         tools.activateTool('select');
@@ -499,7 +517,7 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
     function updateReservedSpace() {
         _reservedWidth = (
             // Tools column
-            (config.mode === config.MODE_EDIT ? _toolsCol.outerWidth() : 0 ) +
+            ( _toolsCol.is(":visible") ? _toolsCol.outerWidth() : 0 ) +
             // Side column
             ( ! config.ui.show_side_col ? 50 :
                 _sideCol.is(".collapsed") ? 32 : _sideCol.outerWidth()
@@ -509,6 +527,49 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
         _reservedHeight = ( $("#canvas-col").offset().top + _canvasToolBar.outerHeight() + 20 );
     }
 
+    /**
+     * Update the view mode: 'edit' or 'review'
+     * Show/Hide elements and redraw the window depending on the selected mode
+     * @param mode
+     */
+    function updateViewMode(mode) {
+        var navTabs = $(".adim-view-mod-tabs"),
+            modHash = document.location.hash,
+            modTabA, modTabLi;
+        // There is no view-mod-tabs if the anobj has no shared annotations accessible,
+        // in this case, abort now
+        if (navTabs.length === 0)
+            return;
+
+        // If the passed mode is not valid or missing, try to determine
+        // the mode from the location hash
+        if (['edit', 'review'].indexOf(mode) === -1) {
+            modTabA = navTabs.find("a[href='"+modHash+"']");
+            if (modTabA.length === 1) {
+                mode = modTabA.data('adimMode');
+            } else {
+                mode = 'edit';
+            }
+        }
+
+        if (!modTabA || !modTabA.length)
+            modTabA = navTabs.find("a[data-adim-mode=" + mode + "]");
+
+        navTabs.find("li.active").removeClass("active");
+        modTabA.closest("li").addClass("active");
+        window.history.replaceState(null, "", modTabA.attr("href"));
+
+        $(".adim-view")
+            .removeClass("adim-view-review adim-view-edit")
+            .addClass("adim-view-" + mode);
+
+        updateReservedSpace();
+        adjustCanvasToImage();
+
+        // Reset tool to select, to avoid having an editing tool active in review mode
+        tools.activateTool('select');
+    }
+
     /**
      * Toggle collapsed state of the side column
      * @param isCollapsed [true]

adim_app/static/_src/anobj-mgr/views/anobj/list-item.js

@@ -59,7 +59,10 @@ function($, _, Backbone){
             if (event.currentTarget == this.el) {
                 // Click on the list-item, not on one of it's child
                 if (this.$el.hasClass("selected")) {
-                    document.location.assign(this.$el.find("a").attr("href"));
+                    this.$el.closest("#aom-modal").modal("hide");
+                    setTimeout((function(me){
+                        document.location.assign(me.$el.find("a").attr("href"));
+                    })(this), 200);
                 }
                 this.model.collection.trigger("select", this.$el, this.model);
             }

adim_app/static/_src/less/adim.css

@@ -899,16 +899,39 @@ body.home #main-navbar {
   margin-bottom: 0px;
 }
 #main {
-  padding: 0px 15px;
+  padding: 0 15px;
   overflow: hidden;
   min-width: 624px;
 }
 #main .tool-top-row {
-  margin-bottom: 10px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+#main .tool-top-row > div {
+  padding-right: 0;
+}
+#main .tool-top-row .adim-view-mod-tabs.nav-tabs {
+  border-color: #c9c9c9;
 }
-.mode-edit #main .tool-top-row > div {
-  margin-left: 60px;
-  padding-right: 300px;
+#main .tool-top-row .adim-view-mod-tabs.nav-tabs > li a {
+  padding: 6px 15px;
+  background-color: rgba(255, 255, 255, 0);
+  color: #96cdfd;
+}
+#main .tool-top-row .adim-view-mod-tabs.nav-tabs > li a:hover {
+  background-color: #eeeeee;
+  color: #23527c;
+}
+#main .tool-top-row .adim-view-mod-tabs.nav-tabs > li.active a,
+#main .tool-top-row .adim-view-mod-tabs.nav-tabs > li.active a:hover,
+#main .tool-top-row .adim-view-mod-tabs.nav-tabs > li.active a:focus {
+  color: #3c3c3c;
+  background-color: #c9c9c9;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+.adim-view.adim-view-review #tools-col,
+.adim-view.adim-view-review #annotation-sharing-panel {
+  display: none;
 }
 #tools-col,
 #canvas-col,

adim_app/static/_src/less/adim.less

@@ -141,7 +141,6 @@ html, body {
 
 // ----- Vendor specific overrides
 
-
 // Bootstrap Overrides
 a:focus, .btn:focus, .btn.active:focus,
 input[type="radio"]:focus {
@@ -430,19 +429,57 @@ body.home {
 }
 
 #main {
-    padding: 0px 15px;
+    padding: 0 15px;
     overflow: hidden;
     min-width: 624px;
 
     .tool-top-row {
-        margin-bottom: 10px;
+        margin-top: 5px;
+        margin-bottom: 5px;
+
+        > div {
+            padding-right: 0;
+        }
+
+        .adim-view-mod-tabs.nav-tabs {
+            @active-color: #C9C9C9;
+            border-color: @active-color;
+            > li {
+                a {
+                    padding: 6px 15px;
+                    background-color: rgba(255, 255, 255, 0);
+                    color: saturate(lighten(@link-color, 33%), 40%);
+                }
+                a:hover {
+                    background-color: @nav-tabs-link-hover-border-color;
+                    color: @link-hover-color;
+                }
+
+                &.active {
+                    a, a:hover, a:focus {
+                        color: darken(@nav-tabs-active-link-hover-color, 10%);
+                        //                        color: @nav-tabs-active-link-hover-color;
+                        background-color: @active-color;
+                        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+                    }
+                }
+            }
+        }
     }
 
 }
 
-.mode-edit #main .tool-top-row > div {
-    margin-left: @toolsColWidth;
-    padding-right: @toolsColWidth + @sideColWidth;
+//.mode-edit #main .tool-top-row > div {
+//    margin-left: @toolsColWidth;
+//    padding-right: @toolsColWidth + @sideColWidth;
+//}
+
+.adim-view {
+    &.adim-view-review {
+        #tools-col, #annotation-sharing-panel {
+            display: none;
+        }
+    }
 }
 
 #tools-col, #canvas-col, #side-col {
@@ -473,7 +510,9 @@ body.home {
     margin-left: -10px;
     padding: 0 @sidecol-padding;
 
-    > .row { margin: 0; }
+    > .row {
+        margin: 0;
+    }
 
     > .row > .container {
         width: 100%;
@@ -520,7 +559,7 @@ body.home {
     }
 
     &.collapsed {
-//        margin: 0 -250px 0 205px;
+        //        margin: 0 -250px 0 205px;
         margin: 0 -(@sidecol-width + 25px) 0 25px;
         .side-col-collapse-but {
             margin-left: -40px;
@@ -766,15 +805,15 @@ canvas {
     }
 }
 
-
 #annotationSharingPanel {
-    .label { line-height: 1.5em; }
+    .label {
+        line-height: 1.5em;
+    }
 
     .sha-publish-mode-state {
         &[data-publish-state="0"] .label[data-publish-mode="0"],
         &[data-publish-state="1"] .label[data-publish-mode="1"],
-        &[data-publish-state="2"] .label[data-publish-mode="2"]
-        {
+        &[data-publish-state="2"] .label[data-publish-mode="2"] {
             display: inline-block !important;
             visibility: visible !important;
         }
@@ -783,10 +822,12 @@ canvas {
 }
 
 #dlg-publish-mode {
-    form .lead { margin: 0; line-height: 1;}
+    form .lead {
+        margin: 0;
+        line-height: 1;
+    }
 }
 
-
 // Annotation list
 #annotation-list-panel {
     header, footer {

adim_app/templates/adim_app/base_annotation.html

@@ -258,19 +258,32 @@ if (t === "light") {
     {{ block.super }}
 {% endblock %}
 
-
+{#==========================================#}
+{#   MAIN CONTAINER                         #}
+{#==========================================#}
 {%  block main_container %}
 <div class="container-fluid" id="main">
 
-    {% if mode != 'review' %}
     <div class="row tool-top-row">
         <div class="col-xs-12">
-
+        {% if display_shared_annotations %}
+            <ul class="nav nav-tabs adim-view-mod-tabs">
+                <li class="active" role="presentation">
+                    <a href="#!annoter" data-adim-mode="edit">
+                        <span class="glyphicon glyphicon-edit"></span> Annoter
+                    </a>
+                </li>
+                <li role="presentation">
+                    <a href="#!afficher" data-adim-mode="review">
+                        <span class="glyphicon glyphicon-eye-open"></span> Afficher les partages
+                    </a>
+                </li>
+            </ul>
+        {% endif %}
         </div>
     </div>
-    {% endif %}
 
-    <div class="row">
+    <div class="row adim-view adim-view-edit">
         <div class="col-sm-1" id="tools-col">
             <div class="btn-toolbar" role="toolbar" id="draw-tool-tb">
                 <div class="btn-group-vertical">

adim_app/views.py

@@ -15,7 +15,8 @@ from django.views.decorators.cache import cache_control
 from PIL import Image
 from adim.models import AnObj
 from adim.models.annotables import AnObjMembership
-from adim.permissions import check_anobj_permission, get_permission_class, has_anobj_access
+from adim.permissions import check_anobj_permission, get_permission_class, has_anobj_access, SHARING_MODE_NONE
+
 from .forms import UploadImageFileForm
 from sendfile import sendfile
 from .utils import add_image_border, create_image_thumbnail
@@ -171,6 +172,16 @@ def annotate(request, anobj_uuid=None):
     context.update({
         'anobj': anobj
     })
+
+    # Determine if we may display shared annotations
+    context.update({'display_shared_annotations':
+        (anobj.sharing_mode != SHARING_MODE_NONE) and
+        (
+            (request.user == anobj.owner) or
+            anobj.allow_public_publishing
+        )
+    })
+
     return render(request, "adim_app/annotation.html", context)