Gitlab CSE Unil

base_annotation.html 31.2 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
    <li class="nav-item info">
31
        <a href="#" id="adim-about-but" class="nav-link"><i class="fas fa-info-circle"></i>&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
179
    <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">
    <% 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 %>
180
        <% case sharing_mode == 16: %><span class="adim-icon-ttp-moodle text-success aom-item-sh-status" title="Partagé via moodle"></span><% break %>
181
        <% case sharing_mode == 32: %><span class="fa fa-coffee text-success aom-item-sh-status" title="Partagé via yin-zhen"></span><% break %>
M. Chardon's avatar
M. Chardon committed
182
        <% case sharing_mode > 0: %><span class="fa fa-cloud text-success aom-item-sh-status" title="Partagé via service externe"></span>
183
184
    <% } %>

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

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

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

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

    <div class="row tool-top-row">
237
        {% block tool-top-row %}
238
        <div class="">
239
        {% if display_shared_annotations %}
240
241
            <ul class="nav nav-tabs adim-view-mod-tabs" role="tablist">
                <li class="nav-item active">
242
                    <a class="nav-link" href="#!annoter"href="#!annoter" role="tab" data-adim-mode="edit" data-toggle="tooltip" title="Ajouter et modifier vos annotations">
243
                        <span class="fa fa-edit"></span> Annoter
244
245
                    </a>
                </li>
246
247
248
249
                {% 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
250
251
                    </a>
                </li>
252
                {% endif %}
253
254
            </ul>
        {% endif %}
Julien Furrer's avatar
Julien Furrer committed
255
        </div>
256
        {% endblock tool-top-row %}
Julien Furrer's avatar
Julien Furrer committed
257
258
    </div>

259
    {% block adim-view %}
260
261
    <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
262
            <div class="btn-toolbar" role="toolbar" id="draw-tool-tb">
263
                <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
264
                {% block draw-tool-tb %}
265
266
                    <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>
267
                        <span class="fa fa-mouse-pointer"></span><span class="tool-text"> Select</span>
Julien Furrer's avatar
Julien Furrer committed
268
                    </label>
269
                    <label class="btn btn-lg btn-primary" title="Déplacement (Espace)">
270
                        <input type="radio" name="toolType" value="pan" id="tool-pan" data-tool-name="pan" autocomplete="off">
271
                        <span class="fa fa-hand-paper"></span><span class="tool-text"> Pan</span>
Julien Furrer's avatar
Julien Furrer committed
272
273
                    </label>

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

306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
                      <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
323

324
                    <button type="button" class="btn btn-light" id="tool-fill-color" title="Contours / plein"
Julien Furrer's avatar
Julien Furrer committed
325
                            data-toggle="button" data-attr-name="fill" >
326
327
                        <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
328
329
330
                        <span class="tool-text">Plein</span>
                    </button>

331
332
                    <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
333
334
                    </button>

335
                    <div class="sldr btn btn-light" id="attr-size-slider">
Julien Furrer's avatar
Julien Furrer committed
336
337
338
339
340
                        <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>

341
                    <div class="sldr btn btn-light" id="attr-opacity-slider">
Julien Furrer's avatar
Julien Furrer committed
342
343
344
345
346
347
{#                        <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>

348
                    <button class="btn btn-light" id="attr-orderup" type="button" autocomplete="off"
Julien Furrer's avatar
Julien Furrer committed
349
                            title="Mettre au premier plan. shift-click: avancer de un niveau">
350
                        <i class="material-icons">flip_to_front</i>
Julien Furrer's avatar
Julien Furrer committed
351
352
                    </button>

353
                    <button class="btn btn-light" id="attr-orderdown" type="button" autocomplete="off"
Julien Furrer's avatar
Julien Furrer committed
354
                            title="Mettre à l'arrière-plan. shift-click: reculer d'un niveau">
355
                        <i class="material-icons">flip_to_back</i>
Julien Furrer's avatar
Julien Furrer committed
356
                    </button>
357
                {% endblock param-tool-tb %}
Julien Furrer's avatar
Julien Furrer committed
358
359
360
361
362
363
                </div>

            </div>

        </div>

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

            <div id="canvas-bbar">
371

Julien Furrer's avatar
Julien Furrer committed
372
373
374
375
                <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
376
377
378
379
                        <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">
380
                            <span class="material-icons">photo_size_select_large</span>
Julien Furrer's avatar
Julien Furrer committed
381
                        </span>
Julien Furrer's avatar
Julien Furrer committed
382
                    </div>
383
                    <div class="sldr float-left">
Julien Furrer's avatar
Julien Furrer committed
384
385
386
387
                        <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>
388

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

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

448
                <div class="p-1 w-100" id="side-col-panel-group">
449
                {% block side-col-panel-group %}
450
                    {#  ----- Annotation Sharing Panel ----- #}
451
                    {% block publication-panel %}
452
                    {% if membership %}
453
454

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

                    {# ----- Property Panel ----- #}
511
                    {% block property-panel %}
512
                        <div id="annotation-property-panel">
513
                            <a class="btn btn-secondary btn-sm btn-block d-inline-flex" data-toggle="collapse" href="#collapseProperties" role="button"
514
                               aria-expanded="false" aria-controls="collapseProperties">
515
                                <div>Propriétés</div>
516
                                <i class="fas fa-chevron-circle-up ml-auto"></i>
517
518
519
520
521
522
523
524
525
526
527
528
                            </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
529
530
531
                                </div>
                            </div>
                        </div>
532
                    {% endblock property-panel %}
533

534
                    {# ----- Members Panel ----- #}
535
                    {% block members-panel %}
536
                    {% if display_shared_annotations %}
537
                    <div id="annotation-list-panel">
538
                        <a data-toggle="collapse" href="#collapseUsers" class="{{ collapsed|yesno:"collapsed," }} btn btn-secondary btn-sm btn-block d-inline-flex"
539
                                role="button" aria-expanded="false" aria-controls="collapseUsers">
540
                            <div>Utilisateurs</div>
541
                            <i class="fas fa-chevron-circle-up ml-auto"></i>
542
543
544
545
546
547
548
549
550
551
552
553
554
555
                        </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">
M. Chardon's avatar
M. Chardon committed
556
                                            <i class="fas fa-user-secret"></i>
557
558
559
560
561
562
563
564
565
566
                                        </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>
567
                                </div>
568
                                <div class="card card-body {{ collapsed|yesno:",in" }}" id="annotation-list-container" style="padding: 0;">
569
                                    <ul class="list-group"></ul>
570
571
572
573
574
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
575
576
                    {% endblock members-panel %}

577
                {% endblock side-col-panel-group %}
Julien Furrer's avatar
Julien Furrer committed
578
579
580
581
                </div>
            </div></div></div>
        </div>
    </div>
582
    {% endblock adim-view %}
Julien Furrer's avatar
Julien Furrer committed
583
584
585
586
587
588
589
</div>




{%  endblock main_container %}