Gitlab CSE Unil

Commit e40bbbe5 authored by Julien Furrer's avatar Julien Furrer
Browse files

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.
parent 55497216
......@@ -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]
......
......@@ -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);
}
......
......@@ -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,
......
......@@ -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 {
......@@ -1347,4 +1388,4 @@ canvas {
@import "adim-theme";
@import "anobj-mgr";
\ No newline at end of file
@import "anobj-mgr";
......@@ -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">
......
......@@ -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)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment