Gitlab CSE Unil

base_annotation.html 31.7 KB
Newer Older
Julien Furrer's avatar
Julien Furrer committed
1
2
3
4
{% extends "base.html" %}
{% load static i18n %}


Julien Furrer's avatar
Julien Furrer committed
5
{% block page_head %}{% endblock %}
Julien Furrer's avatar
Julien Furrer committed
6
7
8

{% block navbar_right_content %}

M. Chardon's avatar
M. Chardon committed
9
    <div class="navbar-text navbar-separator">&nbsp;</div>
Julien Furrer's avatar
Julien Furrer committed
10

Julien Furrer's avatar
Julien Furrer committed
11
    {% block navbar_image_mgmt %}
M. Chardon's avatar
M. Chardon committed
12
13
14
15
16
17
    <li class="nav-item">
        <form class="form-inline fileinput-button" style="margin-top: 5px;margin-right: 5px;">
            <button class="btn btn-success btn-sm" type="button">
                <i class="fas fa-plus"></i> Nouvelle image
            </button>
            <form action="{% url "adim.app:upload_file" %}" method="post" enctype="multipart/form-data" >{% csrf_token %}
18
                <input id="fileupload-alt" type="file" name="image_file" data-url="{% url "adim.app:upload_file" %}" accept="image/png,image/jpg,image/jpeg">
Julien Furrer's avatar
Julien Furrer committed
19
            </form>
M. Chardon's avatar
M. Chardon committed
20
        </form>
Julien Furrer's avatar
Julien Furrer committed
21
    </li>
M. Chardon's avatar
M. Chardon committed
22
23
24
    <li class="nav-item" style="margin-right: 10px;">
        <a href="#" id="aom-show-but" class="nav-link aom-show-but">
            <i class="fa fa-th"></i>
Julien Furrer's avatar
Julien Furrer committed
25
26
27
            Mes Images
        </a>
    </li>
Julien Furrer's avatar
Julien Furrer committed
28
    {% endblock navbar_image_mgmt %}
Julien Furrer's avatar
Julien Furrer committed
29
30
31

    {{ block.super }}

M. Chardon's avatar
M. Chardon committed
32
33
    <li class="nav-item info">
        <a href="#" id="adim-about-but" class="nav-link"><span class="icon-info-sign"></span>&nbsp;</a>
34
35
    </li>

Julien Furrer's avatar
Julien Furrer committed
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
{% endblock navbar_right_content %}



{#{% block overlay %}#}
{#<div id="page-loader">#}
{#    <div class="text-muted lead">Chargement...</div>#}
{#</div>#}
{#{% endblock %}#}

{#==========================================#}
{#   MODALS                                 #}
{#==========================================#}
{% block modals %}
{#  -- Loading Status -- #}
    <div class="modal" id="adim-fu-alt-status">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Nouvelle image</h4>
                </div>
59

Julien Furrer's avatar
Julien Furrer committed
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
                <div class="modal-body">
                    <div class="progress-wrapper hide">
                        <p>Chargement d'une nouvelle image:</p>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 0%;">
                                0%
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-danger hide adim-fu-error-box">
                        <strong>Impossible de charger l'image.</strong>

                        <div class="adim-fu-error-maxFileSize hide">
                            Ce fichier est trop volumineux, la taille maximale acceptée est 2Mb.
                        </div>
                        <div class="adim-fu-error-acceptFileTypes hide">
                            Ce type de document ne peut pas être chargé. Seules les images de type PNG
                            (<code>.png</code>)
                            ou JPG (.jpg, .jpeg) sont accéptées.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{#  -- AnObj Manager Dlog -- #}
Julien Furrer's avatar
Julien Furrer committed
88
    {% include "adim/aom-modal.inc.html" %}
89
90
91
92

{#  -- SVG export Info -- #}
    <div class="modal" id="dlg-export-svg-info" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-sm">
Julien Furrer's avatar
Julien Furrer committed
93
94
            <div class="modal-content">
                <div class="modal-header">
95
                    <h4>Exportation en cours...</h4>
Julien Furrer's avatar
Julien Furrer committed
96
                </div>
97
98
                <div class="modal-body">
                    <p>La génération du svg peut prendre un peu de temps, soyez patient.</p>
Julien Furrer's avatar
Julien Furrer committed
99
                </div>
100
                <div class="modal-footer"></div>
Julien Furrer's avatar
Julien Furrer committed
101
102
103
104
            </div>
        </div>
    </div>

105
106
107
{# -- Annotation Publishing Mode -- #}
    <div class="modal" id="dlg-publish-mode">
        <div class="modal-dialog">
Julien Furrer's avatar
Julien Furrer committed
108
109
            <div class="modal-content">
                <div class="modal-header">
110
111
112
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Publier vos annotations</h4>
Julien Furrer's avatar
Julien Furrer committed
113
114
                </div>
                <div class="modal-body">
115
116
117
118
119
120
                    <p>Choisissez le mode de publication de vos annotations ce qui déterminera qui poura les voir.</p>

                    <form onsubmit="return false">
                        <div class="radio">
                            <label>
                                <input name="publish-mode" value="0" type="radio"/>
121
122
                                <span class="icon-home"></span>
                                <strong>privé</strong>
123
124
125
126
127
128
                                <span class="help-block">Les annotations sont accessibles pour vous seulement.</span>
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input name="publish-mode" value="1" type="radio"/>
129
130
                                <span class="icon-user"></span>
                                <strong>propriétaire</strong>
131
132
133
134
135
                                <span class="help-block">Les annotations peuvent être vues par le/la propriétaire de l'image uniquement.
                                {% if anobj %}Pour cette image il s'agit de: <strong>«{{ anobj.owner }}»</strong> {% endif %}
                                </span>
                            </label>
                        </div>
136
                        {% if anobj.allow_public_publishing or is_owner %}
137
138
139
                        <div class="radio">
                            <label>
                                <input name="publish-mode" value="2" type="radio"/>
140
141
142
                                <span class="icon-groups-friends"></span><strong>public</strong>
                                <span class="help-block">
                                    Les annotations peuvent être vues par toutes les personnes qui ont un accès à l'image.
143
                                {% if not is_owner %}Pour connaitre précisément la liste de ces personnes,
144
145
                                    addressez vous à la/le propriétaire de l'image.{% endif %}
                                </span>
146
147
                            </label>
                        </div>
148
                        {% endif %}
149
150
151
152
153
154
                    </form>
                    
                    <p>Le mode de publication concerne l'ensemble de vos annotations, y compris celles qui seront éventuellement ajoutées par la suite.</p>
                    
                </div>
                <div class="modal-footer">
M. Chardon's avatar
M. Chardon committed
155
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
156
                    <button type="button" class="btn btn-primary save-publish-mode-but" >Enregistrer</button>
Julien Furrer's avatar
Julien Furrer committed
157
158
159
160
161
                </div>
            </div>
        </div>
    </div>

162
163
{#  -- About Dlg -- #}
    {% include "adim/_about-modal.inc.html" %}
164
165


Julien Furrer's avatar
Julien Furrer committed
166
167
168
169
170
171
172
{% endblock modals %}


{#==========================================#}
{#   JS TEMPLATES                           #}
{#==========================================#}
{% block js_templates %}
173
{% url "adim.app:annotate-new" as annotate_url %}
Julien Furrer's avatar
Julien Furrer committed
174
175
{# -- AnObjMgr list-item view -- #}
<script type="text/template" id="aom-list-item">
M. Chardon's avatar
M. Chardon committed
176
177
    <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
          <div class="btn-group" role="group" aria-label="First group">
178
{#        <% if (sharing_mode > 0 && sharing_mode < 16) { %><span class="glyphicon glyphicon-globe text-success aom-item-sh-status" title="Partagé"></span><% } %>#}
179
180
181

{#        <% if (sharing_mode > 0 && sharing_mode < 16) { %><span class="icon-share-alt text-success aom-item-sh-status" title="Partagé"></span><% } %>#}
{#        <% if (sharing_mode > 15) { %><span class="adim-icon-ttp-moodle text-success aom-item-sh-status" title="Partagé via moodle"></span><% } %>#}
M. Chardon's avatar
M. Chardon committed
182
    <% switch(true) { case 0 < sharing_mode && sharing_mode < 16: %><span class="fas fa-share-alt text-success aom-item-sh-status" title="Partagé"></span><% break %>
183
        <% case sharing_mode == 16: %><span class="adim-icon-ttp-moodle text-success aom-item-sh-status" title="Partagé via moodle"></span><% break %>
184
        <% case sharing_mode == 32: %><span class="icon-bowl text-success aom-item-sh-status" title="Partagé via yin-zhen"></span><% break %>
M. Chardon's avatar
M. Chardon committed
185
        <% case sharing_mode > 0: %><span class="fa fa-cloud text-success aom-item-sh-status" title="Partagé via service externe"></span>
186
187
    <% } %>

188
        <% if (locked) { %><span class="glyphicon glyphicon-lock" title="Vérouillé"></span><% } %>
M. Chardon's avatar
M. Chardon committed
189
190
191
192
193
194
          </div>
          <div class="btn-group" role="group">
              <% if (owned && !ttpShared) { %><button class="close" title="Supprimer l'image">
                <span class="far fa-times-circle"></span>
            </button><% } %>
          </div>
195
196
    </div>

197
    <a href="{{ annotate_url }}<%= uuid %>/" title="Editer l'image">
Julien Furrer's avatar
Julien Furrer committed
198
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
199
             style="background-image: url({{ annotate_url }}<%= uuid %>/thumb/?nc=<%= nc || 1 %>);">
Julien Furrer's avatar
Julien Furrer committed
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
        <span class="name"><%= name %></span>
    </a>
</script>
{# -- AnObjMgr list item's info popover #}
<script type="text/template" id="aom-list-item-popup-content">
    <dl class="dl-horizontal">
        <dt>{% trans "Modifié le" %} :</dt>
        <dd>(last modif date)</dd>
        <dt>{% trans "Annotations" %} :</dt>
        <dd><%= annotations.length %></dd>
    </dl>
</script>
{% endblock js_templates %}


{% block inline_script %}
<script>
217
{# ===== Theme Manager ===== #}
Julien Furrer's avatar
Julien Furrer committed
218
219
220
221
222
var t = localStorage.getItem("adimTheme") || 'dark';
if (t === "light") {
    var n = document.getElementById("main-navbar"), c = "class";
    n.setAttribute(c, n.getAttribute(c).replace("navbar-inverse", "navbar-default"));
    try { for (var i=0,b;b=n.getElementsByTagName("button")[i];i++)
M. Chardon's avatar
M. Chardon committed
223
            b.setAttribute(c, b.getAttribute(c).replace("btn-adim-dark", "btn-secondary"))
Julien Furrer's avatar
Julien Furrer committed
224
225
226
227
228
229
230
231
232
    } catch(e) {}
}
</script>
{% endblock %}

{% block content_js %}
    {{ block.super }}
{% endblock %}

233
234
235
{#==========================================#}
{#   MAIN CONTAINER                         #}
{#==========================================#}
Julien Furrer's avatar
Julien Furrer committed
236
{%  block main_container %}
237
<div class="container-fluid {% if display_shared_annotations %}has-mod-nav{% endif %} {{ adim_env|default:"" }}" id="main">
Julien Furrer's avatar
Julien Furrer committed
238
239

    <div class="row tool-top-row">
240
        {% block tool-top-row %}
Julien Furrer's avatar
Julien Furrer committed
241
        <div class="col-xs-12">
242
243
244
        {% if display_shared_annotations %}
            <ul class="nav nav-tabs adim-view-mod-tabs">
                <li class="active" role="presentation">
245
                    <a href="#!annoter" data-adim-mode="edit"
246
                       data-toggle="tooltip" title="Ajoutez et modifiez vos annotations">
247
248
249
250
                        <span class="glyphicon glyphicon-edit"></span> Annoter
                    </a>
                </li>
                <li role="presentation">
251
                    <a href="#!afficher" data-adim-mode="review"
252
                       data-toggle="tooltip" title="Affichez les annotations partagées des autres membres">
253
                        <span class="glyphicon glyphicon-eye-open"></span> Annotations partagées
254
255
256
257
                    </a>
                </li>
            </ul>
        {% endif %}
Julien Furrer's avatar
Julien Furrer committed
258
        </div>
259
        {% endblock tool-top-row %}
Julien Furrer's avatar
Julien Furrer committed
260
261
    </div>

262
    {% block adim-view %}
263
    <div class="row adim-view adim-view-edit">
Julien Furrer's avatar
Julien Furrer committed
264
265
266
        <div class="col-sm-1" id="tools-col">
            <div class="btn-toolbar" role="toolbar" id="draw-tool-tb">
                <div class="btn-group-vertical">
267
                {% block draw-tool-tb %}
268
                    <label class="btn btn-lg-off btn-primary" title="Selection (A)">
Julien Furrer's avatar
Julien Furrer committed
269
270
271
                        <input type="radio" name="toolType" value="select" id="tool-select" data-tool-name="select">
                        <span class="icon-cursor"></span><span class="tool-text"> Select</span>
                    </label>
272
                    <label class="btn btn-lg-off btn-primary" title="Déplacement (Espace)">
Julien Furrer's avatar
Julien Furrer committed
273
274
275
276
                        <input type="radio" name="toolType" value="pan" id="tool-pan" data-tool-name="pan">
                        <span class="icon-handdrag"></span><span class="tool-text"> Pan</span>
                    </label>

277
                    <label class="btn btn-lg-off btn-primary" title="Dessin libre (D)">
Julien Furrer's avatar
Julien Furrer committed
278
279
280
                        <input type="radio" name="toolType" value="drawing" id="tool-drawing" data-tool-name="drawing">
                        <span class="icon-pencil"></span><span class="tool-text"> Dessin</span>
                    </label>
281
                    <label class="btn btn-lg-off btn-primary" title="Lignes (L)">
Julien Furrer's avatar
Julien Furrer committed
282
283
284
                        <input type="radio" name="toolType" value="lines" id="tool-lines" data-tool-name="lines">
                        <span class="icon-line"></span><span class="tool-text"> Lignes</span>
                    </label>
285
                    <label class="btn btn-lg-off btn-primary" title="Cercle (C)">
Julien Furrer's avatar
Julien Furrer committed
286
287
288
                        <input type="radio" name="toolType" value="ellipse" id="tool-ellipse" data-tool-name="ellipse">
                        <span class="icon icon-elipse"></span><span class="tool-text"> Cercle</span>
                    </label>
289
                    <label class="btn btn-lg-off btn-primary" title="Rectangle (R)">
Julien Furrer's avatar
Julien Furrer committed
290
291
292
                        <input type="radio" name="toolType" value="rectangle" id="tool-rectangle" data-tool-name="rectangle">
                        <span class="icon icon-rectangle"></span><span class="tool-text"> Rectangle</span>
                    </label>
293
                    <label class="btn btn-lg-off btn-primary" title="Flèche (F)">
Julien Furrer's avatar
Julien Furrer committed
294
295
296
                        <input type="radio" name="toolType" value="arrow" id="tool-arrow" data-tool-name="arrow">
                        <span class="icon icon-arrow-right"></span><span class="tool-text"> Flèche</span>
                    </label>
297
                    <label class="btn btn-lg-off btn-primary" title="Texte (T)">
Julien Furrer's avatar
Julien Furrer committed
298
299
300
                        <input type="radio" name="toolType" value="text" id="tool-text" data-tool-name="text">
                        <span class="icon-font"></span><span class="tool-text"> Texte</span>
                    </label>
301
                {% endblock draw-tool-tb %}
Julien Furrer's avatar
Julien Furrer committed
302
303
304
305
306
                </div>
            </div>
            <span class="tool-sep">&nbsp;</span>
            <div class="btn-toolbar" role="toolbar" id="param-tool-tb">
                <div class="btn-group-vertical">
307
                {% block param-tool-tb %}
Julien Furrer's avatar
Julien Furrer committed
308
                    <div class="btn-group" id="tool-colorselect">
M. Chardon's avatar
M. Chardon committed
309
                        <button type="button" class="btn btn-secondary tinter dropdown-toggle" autocomplete="off"
310
                                data-toggle="dropdown" data-attr-name="color" title="Choix de la couleur">
Julien Furrer's avatar
Julien Furrer committed
311
312
313
                            <span class="adim-icon-color"></span>
                        </button>

314
                        <ul class="dropdown-menu color-menu popover right"><div class="arrow"></div>
Julien Furrer's avatar
Julien Furrer committed
315
316
317
318
319
320
321
                            <li role="presentation"><a href="#" class="c1" role="menuitem" tabindex="-1">&nbsp;</a></li>
                            <li role="presentation"><a href="#" class="c2" role="menuitem" tabindex="-1">&nbsp;</a></li>
                            <li role="presentation"><a href="#" class="c3" role="menuitem" tabindex="-1">&nbsp;</a></li>
                            <li role="presentation"><a href="#" class="c4" role="menuitem" tabindex="-1">&nbsp;</a></li>
                            <li role="presentation"><a href="#" class="c5" role="menuitem" tabindex="-1">&nbsp;</a></li>
                            <li role="presentation"><a href="#" class="c6" role="menuitem" tabindex="-1">&nbsp;</a></li>
                            <li role="presentation">
322
323
324
325
                                <a href="#" class="cx picker" role="menuitem" tabindex="-1"
                                   data-color="rgb(128, 23, 212)" data-color-format="rgb"
                                   style="background-color: rgb(128, 23, 212)">
{#                                    <div class="color-overlay" style="background-color: rgb(128, 23, 212)" >&nbsp;</div>#}
Julien Furrer's avatar
Julien Furrer committed
326
327
328
329
330
                                </a>
                            </li>
                        </ul>
                    </div>

M. Chardon's avatar
M. Chardon committed
331
                    <button type="button" class="btn btn-secondary" id="tool-fill-color" title="Contours / plein"
Julien Furrer's avatar
Julien Furrer committed
332
333
334
335
336
337
                            data-toggle="button" data-attr-name="fill" >
                        <span class="tool-fill-on icon-pattern hide"></span>
                        <span class="tool-fill-off icon-roundrectangle"></span>
                        <span class="tool-text">Plein</span>
                    </button>

M. Chardon's avatar
M. Chardon committed
338
                    <button class="btn btn-secondary" id="attr-font" type="button" title="Taille des caractères">
Julien Furrer's avatar
Julien Furrer committed
339
340
341
                        <span class="icon-fontcase"></span>
                    </button>

M. Chardon's avatar
M. Chardon committed
342
                    <div class="sldr btn btn-secondary" id="attr-size-slider">
Julien Furrer's avatar
Julien Furrer committed
343
344
345
346
347
                        <span class="adim-icon-line-width" title="Epaisseur du trait"></span>
                        <input type="text" class="slider" value="7" autocomplete="off"
                               data-attr-name="size">
                    </div>

M. Chardon's avatar
M. Chardon committed
348
                    <div class="sldr btn btn-secondary" id="attr-opacity-slider">
Julien Furrer's avatar
Julien Furrer committed
349
350
351
352
353
354
{#                        <div class="small tool-title" title="Opacité">Opacité</div>#}
                        <span class="adim-icon-opacity" title="Opacité"></span>
                        <input type="text" class="slider" value="100" autocomplete="off"
                               data-attr-name="opacity">
                    </div>

M. Chardon's avatar
M. Chardon committed
355
                    <button class="btn btn-secondary" id="attr-orderup" type="button" autocomplete="off"
Julien Furrer's avatar
Julien Furrer committed
356
357
358
359
                            title="Mettre au premier plan. shift-click: avancer de un niveau">
                        <span class="icon-layerorderup"></span>
                    </button>

M. Chardon's avatar
M. Chardon committed
360
                    <button class="btn btn-secondary" id="attr-orderdown" type="button" autocomplete="off"
Julien Furrer's avatar
Julien Furrer committed
361
362
363
                            title="Mettre à l'arrière-plan. shift-click: reculer d'un niveau">
                        <span class="icon-layerorderdown"></span>
                    </button>
364
                {% endblock param-tool-tb %}
Julien Furrer's avatar
Julien Furrer committed
365
366
367
368
369
370
371
                </div>

            </div>

        </div>

        <div class="col-sm-9" id="canvas-col">
M. Chardon's avatar
M. Chardon committed
372
            <div class="canvas-container card">
M. Chardon's avatar
M. Chardon committed
373
                <canvas id="my-canvas" width="480" height="360" resize></canvas>
Julien Furrer's avatar
Julien Furrer committed
374
375
376
377
                {% block canvas_content %}{% endblock %}
            </div>

            <div id="canvas-bbar">
378

Julien Furrer's avatar
Julien Furrer committed
379
380
381
382
                <div id="attr-zoom" class="toolbar-control">
                    <label>Zoom: &nbsp;</label>
                    <div class="input-group">
                        <input type="text" size="3" class="form-control" name="zoomLevel">
Julien Furrer's avatar
Julien Furrer committed
383
384
385
386
387
388
                        <span class="input-group-addon btn" style="border-left:none" title="Zoom 100%" id="but-zoom-100">
                            <small>1:1</small>
                        </span>
                        <span class="input-group-addon btn" title="Zoom pour afficher toute l'image" id="but-zoom-fit">
                            <span class="icon-resize"></span>
                        </span>
Julien Furrer's avatar
Julien Furrer committed
389
                    </div>
Julien Furrer's avatar
Julien Furrer committed
390
                    <div class="sldr pull-left">
Julien Furrer's avatar
Julien Furrer committed
391
392
393
394
                        <input type="text" class="slider" value="100" data-attr-name="zoom" autocomplete="off"
                               data-slider-min="10" data-slider-max="800" data-slider-value="100">
                    </div>
                </div>
395

Julien Furrer's avatar
Julien Furrer committed
396
                <div class="tb-sep"></div>
397
398
399
400
401
402
403
404
405
406
407
408
409
410
{% comment %}
                <div id="img-opacity" class="toolbar-control">
                    <label>Opacité image: &nbsp;</label>
                    <div class="input-group">
                        <input type="text" size="3" class="form-control" name="imageOpacity">
                    </div>
                    <div class="sldr pull-left">
                        <input type="text" class="slider" value="100" data-attr-name="imgopacity" autocomplete="off"
                               data-slider-min="0" data-slider-max="100" data-slider-value="100">
                    </div>
                </div>
{% endcomment %}
{% comment %}
                <div id="img-opacity" class="toolbar-control">
Julien Furrer's avatar
Julien Furrer committed
411
412
413
414
415
                    <label title="Opacité de l'image">Image:  &nbsp</label>
                    <div class="sldr" id="attr-imgopacity-slider" >
                        <input type="text" class="slider" value="100" autocomplete="off"
                               data-attr-name="imgopacity" data-slider-min="0" data-slider-max="100" />
                    </div>
416
417
                </div>
{% endcomment %}
Julien Furrer's avatar
Julien Furrer committed
418
419
420
421
            </div>
        </div>

        <div class="col-sm-2" id="side-col">
422
423
424
425
426
            <div class="side-col-collapse-but">
              <button class="btn btn-sm btn-block btn-defaultX" type="button">
                <span class="icon-circleright pull-left"></span>
              </button>
            </div>
Julien Furrer's avatar
Julien Furrer committed
427
            <div class="row"><div class="container">
428
            {% comment %}{% if mode == 'edit' %}
Julien Furrer's avatar
Julien Furrer committed
429
430
431
432
433
434
435
436
437
438
439
440
441
                <div class="row"><div class="col-xs-10 col-xs-offset-2">
                    <div class="btn-group">
                        <button class="btn btn-sm btn-primary" id="save-but" type="button">
                            <span class="glyphicon glyphicon-save"></span>
                            Enregistrer
                        </button>

                        <button class="btn btn-sm btn-primary" type="button" id="autosave-but" title="Enregistrement automatique">
                            <span class="glyphicon glyphicon glyphicon-repeat"></span>
                        </button>
                    </div>
                </div></div>
                <div class="row">&nbsp;</div>
442
                {%  endif %}{% endcomment %}
Julien Furrer's avatar
Julien Furrer committed
443
                <div class="row">
444
445
446
447
448
449
450
451
452
453
                {% block alt-side-col-panel-group %}
                {% comment %}
                    To use the alternative side panel, override this block template and
                    define the panel-group like this:
                        <div id="alt-side-col-panel-group" class="col-xs-6 panel-group hidden" style="margin-right:0;padding-right:0">
                        ( panels definition goes here ... )
                        </div>
                {% endcomment %}
                {% endblock alt-side-col-panel-group %}

Julien Furrer's avatar
Julien Furrer committed
454
                <div class="col-xs-12 panel-group" id="side-col-panel-group">
455
                {% block side-col-panel-group %}
456
                    {#  ----- Annotation Sharing Panel ----- #}
457
                    {% block publication-panel %}
458
                    {% if membership %}
459
                    <div class="panel panel-dark" id="annotation-sharing-panel" data-publish-state="{{ membership.publish_mode }}">
460
461
                        <header class="panel-heading">
                            <h1 class="panel-title">
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
                                <a data-toggle="collapse" href="#annotationSharingPanel" class="{{ collapsed|yesno:"collapsed," }}">
                                    Publication
                                    <span class="publishStatus">
                                        &emsp14;
                                        <span class="label label-default hidden"
                                              data-toggle="tooltip" data-publish-mode="0"
                                              title="Les annotations ne sont visibles que par vous.">
                                            <span class="icon-home"></span>
                                        </span>
                                        <span class="label label-warning hidden"
                                              data-toggle="tooltip" data-publish-mode="1"
                                              title="Les annotations sont visibles par le propriétaire de l'image">
                                            <span class="icon-user"></span>
                                        </span>
                                        <span class="label label-warning hidden"
                                              data-toggle="tooltip" data-publish-mode="2"
                                              title="Les annotations sont visibles pour tous les membres de cette image">
                                            <span class="icon-groups-friends"></span>
                                        </span>
                                    </span>
                                    <span class="pull-right icon-circleup"></span>
483
484
485
                                </a>
                            </h1>
                        </header>
486
                        <div id="annotationSharingPanel" class="panel-collapse collapse {{ collapsed|yesno:",in" }}">
487
488
                            <div class="panel-body" id="annotation-sharing-container">
                                <div class="">
M. Chardon's avatar
M. Chardon committed
489
                                    <label class="col-form-label"><small>Visible pour&hairsp;:</small></label>
490
                                    <span class="sha-publish-mode-state" >
491
                                        <span class="label label-default hidden"
492
                                              data-toggle="tooltip" data-publish-mode="0"
493
494
                                              title="Les annotations ne sont visibles que par vous.">
                                            <span class="icon-home"></span> privé
495
496
497
                                        </span>
                                        <span class="label label-warning hidden"
                                              data-toggle="tooltip" data-publish-mode="1"
498
499
                                              title="Les annotations sont visibles par le propriétaire de l'image">
                                            <span class="icon-user"></span> propriétaire
500
501
502
                                        </span>
                                        <span class="label label-warning hidden"
                                              data-toggle="tooltip" data-publish-mode="2"
503
504
                                              title="Les annotations sont visibles pour tous les membres de cette image">
                                            <span class="icon-groups-friends"></span> public
505
506
507
508
                                        </span>
                                    </span>
                                </div>
                                <p></p>
M. Chardon's avatar
M. Chardon committed
509
                                <button type="button" class="btn btn-sm btn-secondary btn-block adim-sha-publish-mode-but">
510
511
512
513
514
515
                                    Publier les annotations...
                                </button>
                            </div>
                        </div>
                    </div>
                    {% endif %}
516
                    {% endblock publication-panel %}
517
518

                    {# ----- Property Panel ----- #}
519
                    {% block property-panel %}
Julien Furrer's avatar
Julien Furrer committed
520
521
522
523
524
525
526
527
528
529
                    <div class="panel panel-dark" id="annotation-property-panel">
                        <header class="panel-heading">
                            <h1 class="panel-title">
                                <a data-toggle="collapse" href="#collapseProperties">
                                    Propriétés <span class="pull-right icon-circleup"></span>
                                </a>
                            </h1>
                        </header>
                        <div id="collapseProperties" class="panel-collapse collapse in">
                            <div class="panel-body" id="annotation-property-container">
530
531
532
533
534
535
                            {% block property-panel-content %}
{#                                <div class="property-group fill-prop">#}
{#                                    <label class="control-label"><small>Remplissage&hairsp;: &ensp;</small>#}
{#                                    <input id="fill-check" name="fill" type="checkbox" />#}
{#                                    </label>#}
{#                                </div>#}
Julien Furrer's avatar
Julien Furrer committed
536
                                <div class="property-group comment-prop">
M. Chardon's avatar
M. Chardon committed
537
                                    <label class="col-form-label"><small>Commentaire&hairsp;:</small></label>
Julien Furrer's avatar
Julien Furrer committed
538
539
                                    <textarea class="form-control" id="prop-annot-comment" name="comment"></textarea>
                                </div>
540
                            {% endblock property-panel-content %}
Julien Furrer's avatar
Julien Furrer committed
541
542
543
                            </div>
                        </div>
                    </div>
544
                    {% endblock property-panel %}
545

546
                    {# ----- Members Panel ----- #}
547
                    {% block members-panel %}
548
549
550
551
                    {% if display_shared_annotations %}
                    <div class="panel panel-dark" id="annotation-list-panel">
                        <header class="panel-heading">
                            <h1 class="panel-title">
552
                                <a data-toggle="collapse" href="#annotation-list-container" class="{{ collapsed|yesno:"collapsed," }}">
553
554
555
556
                                Utilisateurs <span class="pull-right icon-circleup"></span>
                                </a>
                            </h1>
                        </header>
557
                        <div id="collapseUsers" class="panel-collapse">
558
559
                            <div class="panel-tb" role="toolbar" style="padding:0 2px 5px">
                                <div class="btn-group">
M. Chardon's avatar
M. Chardon committed
560
                                    <button id="btn-layers-hideall" class="btn btn-sm btn-adim-layertb" type="button" title="Tout masquer">
561
562
                                        <span class="icon-eye-close"></span>
                                    </button>
M. Chardon's avatar
M. Chardon committed
563
                                    <button id="btn-layers-showall" class="btn btn-sm btn-adim-layertb" type="button" title="Tout afficher">
564
565
566
                                        <span class="icon-eye-open"></span>
                                    </button>
                                </div>
567
                                <div class="btn-group">
M. Chardon's avatar
M. Chardon committed
568
                                    <button id="btn-layers-hidenames" class="btn btn-sm btn-adim-layertb {{ hidenames|yesno:"active," }}" type="button" title="Masquer/afficher les noms">
569
570
571
                                        <span class="icon-shades-sunglasses"></span>
                                    </button>
                                </div>
572
                                <div class="btn-group">
M. Chardon's avatar
M. Chardon committed
573
                                    <button id="btn-layers-next" class="btn btn-sm btn-adim-layertb" type="button" title="Afficher résultats suivant">
574
575
                                        <span class="icon-chevron-down"></span>
                                    </button>
M. Chardon's avatar
M. Chardon committed
576
                                    <button id="btn-layers-prev" class="btn btn-sm btn-adim-layertb" type="button" title="Afficher résultats précédant">
577
578
579
580
                                        <span class="icon-chevron-up"></span>
                                    </button>
                                </div>
                            </div>
581
                            <div class="panel-body collapse {{ collapsed|yesno:",in" }}" id="annotation-list-container">
582
583
584
585
586
                                <ul class="list-group"></ul>
                            </div>
                        </div>
                    </div>
                    {% endif %}
587
588
                    {% endblock members-panel %}

589
                {% endblock side-col-panel-group %}
Julien Furrer's avatar
Julien Furrer committed
590
591
592
593
                </div>
            </div></div></div>
        </div>
    </div>
594
    {% endblock adim-view %}
Julien Furrer's avatar
Julien Furrer committed
595
596
597
598
599
600
601
</div>




{%  endblock main_container %}