Gitlab CSE Unil

base_annotation.html 31.6 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 %}

Julien Furrer's avatar
Julien Furrer committed
9
    {% block navbar_image_mgmt %}
M. Chardon's avatar
M. Chardon committed
10
11
12
13
14
15
    <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 %}
16
                <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
17
            </form>
M. Chardon's avatar
M. Chardon committed
18
        </form>
Julien Furrer's avatar
Julien Furrer committed
19
    </li>
M. Chardon's avatar
M. Chardon committed
20
21
22
    <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
23
24
25
            Mes Images
        </a>
    </li>
Julien Furrer's avatar
Julien Furrer committed
26
    {% endblock navbar_image_mgmt %}
Julien Furrer's avatar
Julien Furrer committed
27
28
29

    {{ block.super }}

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

Julien Furrer's avatar
Julien Furrer committed
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
{% endblock navbar_right_content %}



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

{#==========================================#}
{#   MODALS                                 #}
{#==========================================#}
{% block modals %}
{#  -- Loading Status -- #}
49
50
    <div class="modal" id="adim-fu-alt-status" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
Julien Furrer's avatar
Julien Furrer committed
51
52
            <div class="modal-content">
                <div class="modal-header">
53
54
55
56
                    <h5 class="modal-title">Nouvelle image</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
Julien Furrer's avatar
Julien Furrer committed
57
                </div>
58

Julien Furrer's avatar
Julien Furrer committed
59
                <div class="modal-body">
60
                    <div class="progress-wrapper" style="display: none;">
Julien Furrer's avatar
Julien Furrer committed
61
62
63
64
65
66
67
68
                        <p>Chargement d'une nouvelle image:</p>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 0%;">
                                0%
                            </div>
                        </div>
                    </div>

69
                    <div class="alert alert-danger adim-fu-error-box" style="display: none;">
Julien Furrer's avatar
Julien Furrer committed
70
71
                        <strong>Impossible de charger l'image.</strong>

72
                        <div class="adim-fu-error-maxFileSize" style="display: none;">
Julien Furrer's avatar
Julien Furrer committed
73
74
                            Ce fichier est trop volumineux, la taille maximale acceptée est 2Mb.
                        </div>
75
                        <div class="adim-fu-error-acceptFileTypes" style="display: none;">
Julien Furrer's avatar
Julien Furrer committed
76
77
78
79
80
81
82
83
84
85
86
                            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
87
    {% include "adim/aom-modal.inc.html" %}
88
89
90
91

{#  -- 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
92
93
            <div class="modal-content">
                <div class="modal-header">
94
                    <h4>Exportation en cours...</h4>
Julien Furrer's avatar
Julien Furrer committed
95
                </div>
96
97
                <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
98
                </div>
99
                <div class="modal-footer"></div>
Julien Furrer's avatar
Julien Furrer committed
100
101
102
103
            </div>
        </div>
    </div>

104
{# -- Annotation Publishing Mode -- #}
105
106
    <div class="modal" id="dlg-publish-mode" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
Julien Furrer's avatar
Julien Furrer committed
107
108
            <div class="modal-content">
                <div class="modal-header">
109
110
111
112
                    <h5 class="modal-title">Publier vos annotations</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
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
                                <span class="fa fa-home"></span>
122
                                <strong>privé</strong>
123
                                <span class="form-text">Les annotations sont accessibles pour vous seulement.</span>
124
125
126
127
128
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input name="publish-mode" value="1" type="radio"/>
129
                                <span class="fa fa-user"></span>
130
                                <strong>propriétaire</strong>
131
                                <span class="form-text">Les annotations peuvent être vues par le/la propriétaire de l'image uniquement.
132
133
134
135
                                {% 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="fa fa-users"></span>
                                <strong>public</strong>
                                <span class="form-text">
143
                                    Les annotations peuvent être vues par toutes les personnes qui ont un accès à l'image.
144
                                {% if not is_owner %}Pour connaitre précisément la liste de ces personnes,
145
146
                                    addressez vous à la/le propriétaire de l'image.{% endif %}
                                </span>
147
148
                            </label>
                        </div>
149
                        {% endif %}
150
151
152
153
154
155
                    </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
156
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
157
                    <button type="button" class="btn btn-primary save-publish-mode-but" >Enregistrer</button>
Julien Furrer's avatar
Julien Furrer committed
158
159
160
161
162
                </div>
            </div>
        </div>
    </div>

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


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


{#==========================================#}
{#   JS TEMPLATES                           #}
{#==========================================#}
{% block js_templates %}
174
{% url "adim.app:annotate-new" as annotate_url %}
Julien Furrer's avatar
Julien Furrer committed
175
176
{# -- AnObjMgr list-item view -- #}
<script type="text/template" id="aom-list-item">
M. Chardon's avatar
M. Chardon committed
177
178
    <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">
179
{#        <% if (sharing_mode > 0 && sharing_mode < 16) { %><span class="glyphicon glyphicon-globe text-success aom-item-sh-status" title="Partagé"></span><% } %>#}
180
181
182

{#        <% 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
183
    <% 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 %>
184
        <% case sharing_mode == 16: %><span class="adim-icon-ttp-moodle text-success aom-item-sh-status" title="Partagé via moodle"></span><% break %>
185
        <% 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
186
        <% case sharing_mode > 0: %><span class="fa fa-cloud text-success aom-item-sh-status" title="Partagé via service externe"></span>
187
188
    <% } %>

189
        <% if (locked) { %><span class="glyphicon glyphicon-lock" title="Vérouillé"></span><% } %>
M. Chardon's avatar
M. Chardon committed
190
191
192
193
194
195
          </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>
196
197
    </div>

198
    <a href="{{ annotate_url }}<%= uuid %>/" title="Editer l'image">
Julien Furrer's avatar
Julien Furrer committed
199
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
200
             style="background-image: url({{ annotate_url }}<%= uuid %>/thumb/?nc=<%= nc || 1 %>);">
Julien Furrer's avatar
Julien Furrer committed
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
        <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>
218
{# ===== Theme Manager ===== #}
Julien Furrer's avatar
Julien Furrer committed
219
220
221
222
223
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
224
            b.setAttribute(c, b.getAttribute(c).replace("btn-adim-dark", "btn-secondary"))
Julien Furrer's avatar
Julien Furrer committed
225
226
227
228
229
230
231
232
233
    } catch(e) {}
}
</script>
{% endblock %}

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

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

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

263
    {% block adim-view %}
264
265
    <div class="d-flex adim-view adim-view-edit flex-row">
        <div class="p-1 pr-3" id="tools-col">
Julien Furrer's avatar
Julien Furrer committed
266
            <div class="btn-toolbar" role="toolbar" id="draw-tool-tb">
267
                <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
268
                {% block draw-tool-tb %}
269
270
                    <label class="btn btn-lg btn-primary active" title="Selection (A)">
                        <input type="radio" name="toolType" value="select" id="tool-select" data-tool-name="select" autocomplete="off" checked>
271
                        <span class="fa fa-mouse-pointer"></span><span class="tool-text"> Select</span>
Julien Furrer's avatar
Julien Furrer committed
272
                    </label>
273
                    <label class="btn btn-lg btn-primary" title="Déplacement (Espace)">
274
                        <input type="radio" name="toolType" value="pan" id="tool-pan" data-tool-name="pan" autocomplete="off">
275
                        <span class="fa fa-hand-paper"></span><span class="tool-text"> Pan</span>
Julien Furrer's avatar
Julien Furrer committed
276
277
                    </label>

278
                    <label class="btn btn-lg btn-primary" title="Dessin libre (D)">
279
                        <input type="radio" name="toolType" value="drawing" id="tool-drawing" data-tool-name="drawing" autocomplete="off">
280
                        <span class="fa fa-pencil-alt" data-fa-transform="flip-h"></span><span class="tool-text"> Dessin</span>
Julien Furrer's avatar
Julien Furrer committed
281
                    </label>
282
                    <label class="btn btn-lg btn-primary" title="Lignes (L)">
283
                        <input type="radio" name="toolType" value="lines" id="tool-lines" data-tool-name="lines" autocomplete="off">
Julien Furrer's avatar
Julien Furrer committed
284
285
                        <span class="icon-line"></span><span class="tool-text"> Lignes</span>
                    </label>
286
                    <label class="btn btn-lg btn-primary" title="Cercle (C)">
287
                        <input type="radio" name="toolType" value="ellipse" id="tool-ellipse" data-tool-name="ellipse" autocomplete="off">
288
                        <span class="far fa-circle"></span><span class="tool-text"> Cercle</span>
Julien Furrer's avatar
Julien Furrer committed
289
                    </label>
290
                    <label class="btn btn-lg btn-primary" title="Rectangle (R)">
291
                        <input type="radio" name="toolType" value="rectangle" id="tool-rectangle" data-tool-name="rectangle" autocomplete="off">
292
                        <span class="far fa-square"></span><span class="tool-text"> Rectangle</span>
Julien Furrer's avatar
Julien Furrer committed
293
                    </label>
294
                    <label class="btn btn-lg btn-primary" title="Flèche (F)">
295
                        <input type="radio" name="toolType" value="arrow" id="tool-arrow" data-tool-name="arrow" autocomplete="off">
296
                        <span class="fa fa-arrow-right"></span><span class="tool-text"> Flèche</span>
Julien Furrer's avatar
Julien Furrer committed
297
                    </label>
298
                    <label class="btn btn-lg btn-primary" title="Texte (T)">
299
                        <input type="radio" name="toolType" value="text" id="tool-text" data-tool-name="text" autocomplete="off">
300
                        <span class="fa fa-font"></span><span class="tool-text"> Texte</span>
Julien Furrer's avatar
Julien Furrer committed
301
                    </label>
302
                {% endblock draw-tool-tb %}
Julien Furrer's avatar
Julien Furrer committed
303
304
305
306
                </div>
            </div>
            <span class="tool-sep">&nbsp;</span>
            <div class="btn-toolbar" role="toolbar" id="param-tool-tb">
307
                <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
308
                {% block param-tool-tb %}
Julien Furrer's avatar
Julien Furrer committed
309

310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
                      <div class="btn-group" id="tool-colorselect" role="group">
                        <button id="btnGroupDrop1" type="button" class="btn btn-light tinter dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        data-attr-name="color" title="Choix de la couleur">
                          <span class="adim-icon-color"></span>
                        </button>
                        <div class="dropdown-menu color-menu right" aria-labelledby="btnGroupDrop1">
                          <a class="dropdown-item c1" href="#"></a>
                          <a class="dropdown-item c2" href="#"></a>
                          <a class="dropdown-item c3" href="#"></a>
                          <a class="dropdown-item c4" href="#"></a>
                          <a class="dropdown-item c5" href="#"></a>
                          <a class="dropdown-item c6" href="#"></a>
                          <a class="dropdown-item cx picker" href="#" data-color="rgb(128, 23, 212)"
                             data-color-format="rgb" style="background-color: rgb(128, 23, 212)" style="left:50px;">
                          </a>
                        </div>
                      </div>
Julien Furrer's avatar
Julien Furrer committed
327

328
                    <button type="button" class="btn btn-light" id="tool-fill-color" title="Contours / plein"
Julien Furrer's avatar
Julien Furrer committed
329
                            data-toggle="button" data-attr-name="fill" >
330
331
                        <span class="tool-fill-on" style="display: none;"><i class="fa fa-square"></i></span>
                        <span class="tool-fill-off"><i class="far fa-square"></i></span>
Julien Furrer's avatar
Julien Furrer committed
332
333
334
                        <span class="tool-text">Plein</span>
                    </button>

335
336
                    <button class="btn btn-light" id="attr-font" type="button" title="Taille des caractères">
                        <span class="fa fa-text-height"></span>
Julien Furrer's avatar
Julien Furrer committed
337
338
                    </button>

339
                    <div class="sldr btn btn-light" id="attr-size-slider">
Julien Furrer's avatar
Julien Furrer committed
340
341
342
343
344
                        <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>

345
                    <div class="sldr btn btn-light" id="attr-opacity-slider">
Julien Furrer's avatar
Julien Furrer committed
346
347
348
349
350
351
{#                        <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>

352
                    <button class="btn btn-light" id="attr-orderup" type="button" autocomplete="off"
Julien Furrer's avatar
Julien Furrer committed
353
354
355
356
                            title="Mettre au premier plan. shift-click: avancer de un niveau">
                        <span class="icon-layerorderup"></span>
                    </button>

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

            </div>

        </div>

368
        <div class="p-1 pr-3 w-100" id="canvas-col">
M. Chardon's avatar
M. Chardon committed
369
            <div class="canvas-container card">
M. Chardon's avatar
M. Chardon committed
370
                <canvas id="my-canvas" width="480" height="360" resize></canvas>
Julien Furrer's avatar
Julien Furrer committed
371
372
373
374
                {% block canvas_content %}{% endblock %}
            </div>

            <div id="canvas-bbar">
375

Julien Furrer's avatar
Julien Furrer committed
376
377
378
379
                <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
380
381
382
383
384
385
                        <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
386
                    </div>
387
                    <div class="sldr float-left">
Julien Furrer's avatar
Julien Furrer committed
388
389
390
391
                        <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>
392

Julien Furrer's avatar
Julien Furrer committed
393
                <div class="tb-sep"></div>
394
395
396
397
398
399
{% 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>
400
                    <div class="sldr float-left">
401
402
403
404
405
406
407
                        <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
408
409
410
411
412
                    <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>
413
414
                </div>
{% endcomment %}
Julien Furrer's avatar
Julien Furrer committed
415
416
417
            </div>
        </div>

418
        <div class="p-1 ml-auto default" id="side-col">
419
            <div class="side-col-collapse-but">
420
421
              <button class="btn btn-sm btn-block btn-defaultX" type="button" data-toggle="collapse" data-target="#side-col-collapse-content" aria-expanded="false">
                  <span class="icon-circleright float-left"></span>
422
423
              </button>
            </div>
424
425
            <div class="row collapse width show" id="side-col-collapse-content">
                <div class="container">
426
            {% comment %}{% if mode == 'edit' %}
Julien Furrer's avatar
Julien Furrer committed
427
428
429
430
431
432
433
434
435
436
437
438
439
                <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>
440
                {%  endif %}{% endcomment %}
441
                <div class="d-flex">
442
443
444
445
                {% block alt-side-col-panel-group %}
                {% comment %}
                    To use the alternative side panel, override this block template and
                    define the panel-group like this:
446
                        <div id="alt-side-col-panel-group" class="p-1 panel-group" style="margin-right:0;padding-right:0">
447
448
449
450
451
                        ( panels definition goes here ... )
                        </div>
                {% endcomment %}
                {% endblock alt-side-col-panel-group %}

452
                <div class="p-1 w-100" id="side-col-panel-group">
453
                {% block side-col-panel-group %}
454
                    {#  ----- Annotation Sharing Panel ----- #}
455
                    {% block publication-panel %}
456
                    {% if membership %}
457
458

                    <div id="annotation-sharing-panel" data-publish-state="{{ membership.publish_mode }}">
459
                        <a data-toggle="collapse" href="#annotationSharingPanel" class="{{ collapsed|yesno:"collapsed," }} btn btn-secondary btn-sm btn-block d-inline-flex"
460
                                role="button" aria-expanded="false" aria-controls="annotationSharingPanel">
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
                            <div>
                                Publication
                                <span class="publishStatus">
                                    <span class="badge badge-default" style="display: none;"
                                          data-toggle="tooltip" data-publish-mode="0"
                                          title="Les annotations ne sont visibles que par vous.">
                                        <span class="fa fa-home"></span>
                                    </span>
                                    <span class="badge badge-warning" style="display: none;"
                                          data-toggle="tooltip" data-publish-mode="1"
                                          title="Les annotations sont visibles par le propriétaire de l'image">
                                        <span class="fa fa-user"></span>
                                    </span>
                                    <span class="badge badge-warning" style="display: none;"
                                          data-toggle="tooltip" data-publish-mode="2"
                                          title="Les annotations sont visibles pour tous les membres de cette image">
                                        <span class="fa fa-users"></span>
                                    </span>
479
                                </span>
480
481
                            </div>
                            <i class="icon-circleup ml-auto"></i>
482
                        </a>
483
                        <div id="annotationSharingPanel" class="panel-dark collapse {{ collapsed|yesno:",in" }}">
484
485
486
                            <div class="card card-body">
                              <div class="card-text" id="annotation-sharing-container">
                                    <label class="col-form-label">Visible pour&hairsp;:</label>
487
                                    <span class="sha-publish-mode-state" >
488
                                        <span class="badge badge-default" style="display: none;"
489
                                              data-toggle="tooltip" data-publish-mode="0"
490
                                              title="Les annotations ne sont visibles que par vous.">
491
                                            <span class="fa fa-home"></span> privé
492
                                        </span>
493
                                        <span class="badge badge-warning" style="display: none;"
494
                                              data-toggle="tooltip" data-publish-mode="1"
495
                                              title="Les annotations sont visibles par le propriétaire de l'image">
496
                                            <span class="fa fa-user"></span> propriétaire
497
                                        </span>
498
                                        <span class="badge badge-warning" style="display: none;"
499
                                              data-toggle="tooltip" data-publish-mode="2"
500
                                              title="Les annotations sont visibles pour tous les membres de cette image">
501
                                            <span class="fa fa-users"></span> public
502
503
                                        </span>
                                    </span>
504
505
                              </div>
                                <button type="button" class="btn btn-sm btn-light btn-block adim-sha-publish-mode-but">
506
507
508
509
510
511
                                    Publier les annotations...
                                </button>
                            </div>
                        </div>
                    </div>
                    {% endif %}
512
                    {% endblock publication-panel %}
513
514

                    {# ----- Property Panel ----- #}
515
                    {% block property-panel %}
516
                        <div id="annotation-property-panel">
517
                            <a class="btn btn-secondary btn-sm btn-block d-inline-flex" data-toggle="collapse" href="#collapseProperties" role="button"
518
                               aria-expanded="false" aria-controls="collapseProperties">
519
520
                                <div>Propriétés</div>
                                <i class="icon-circleup ml-auto"></i>
521
522
523
524
525
526
527
528
529
530
531
532
                            </a>

                            <div class="collapse show panel-dark" id="collapseProperties">
                                <div class="card card-body">
                                  <div class="card-text" id="annotation-property-container">
                                {% block property-panel-content %}
                                    <div class="property-group comment-prop">
                                        <label class="col-form-label">Commentaire&hairsp;:</label>
                                        <textarea class="form-control" id="prop-annot-comment" name="comment"></textarea>
                                    </div>
                                {% endblock property-panel-content %}
                                  </div>
Julien Furrer's avatar
Julien Furrer committed
533
534
535
                                </div>
                            </div>
                        </div>
536
                    {% endblock property-panel %}
537

538
                    {# ----- Members Panel ----- #}
539
                    {% block members-panel %}
540
                    {% if display_shared_annotations %}
541
                    <div id="annotation-list-panel">
542
                        <a data-toggle="collapse" href="#collapseUsers" class="{{ collapsed|yesno:"collapsed," }} btn btn-secondary btn-sm btn-block d-inline-flex"
543
                                role="button" aria-expanded="false" aria-controls="collapseUsers">
544
545
                            <div>Utilisateurs</div>
                            <i class="icon-circleup ml-auto"></i>
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
                        </a>
                        <div id="collapseUsers" class="collapse show panel-dark">
                            <div class="card card-body">
                                <div class="panel-tb" role="toolbar" style="padding:0 2px 5px">
                                    <div class="btn-group">
                                        <button id="btn-layers-hideall" class="btn btn-sm btn-adim-layertb" type="button" title="Tout masquer">
                                            <span class="fa fa-eye-slash"></span>
                                        </button>
                                        <button id="btn-layers-showall" class="btn btn-sm btn-adim-layertb" type="button" title="Tout afficher">
                                            <span class="fa fa-eye"></span>
                                        </button>
                                    </div>
                                    <div class="btn-group">
                                        <button id="btn-layers-hidenames" class="btn btn-sm btn-adim-layertb {{ hidenames|yesno:"active," }}" type="button" title="Masquer/afficher les noms">
                                            <span class="icon-shades-sunglasses"></span>
                                        </button>
                                    </div>
                                    <div class="btn-group">
                                        <button id="btn-layers-next" class="btn btn-sm btn-adim-layertb" type="button" title="Afficher résultats suivant">
                                            <span class="fa fa-caret-down"></span>
                                        </button>
                                        <button id="btn-layers-prev" class="btn btn-sm btn-adim-layertb" type="button" title="Afficher résultats précédant">
                                            <span class="fa fa-caret-up"></span>
                                        </button>
                                    </div>
571
                                </div>
572
573
                                <div class="card card-body collapse {{ collapsed|yesno:",in" }}" id="annotation-list-container" style="padding: 0;">
                                    <ul class="list-group"></ul>
574
575
576
577
578
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
579
580
                    {% endblock members-panel %}

581
                {% endblock side-col-panel-group %}
Julien Furrer's avatar
Julien Furrer committed
582
583
584
585
                </div>
            </div></div></div>
        </div>
    </div>
586
    {% endblock adim-view %}
Julien Furrer's avatar
Julien Furrer committed
587
588
589
590
591
592
593
</div>




{%  endblock main_container %}