Gitlab CSE Unil

base_annotation.html 31.5 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
{% endblock navbar_right_content %}



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

{#==========================================#}
{#   MODALS                                 #}
{#==========================================#}
{% block modals %}
{#  -- Loading Status -- #}
51
52
    <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
53
54
            <div class="modal-content">
                <div class="modal-header">
55
56
57
58
                    <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
59
                </div>
60

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

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

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

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

106
{# -- Annotation Publishing Mode -- #}
107
108
    <div class="modal" id="dlg-publish-mode" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
Julien Furrer's avatar
Julien Furrer committed
109
110
            <div class="modal-content">
                <div class="modal-header">
111
112
113
114
                    <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
115
116
                </div>
                <div class="modal-body">
117
118
119
120
121
122
                    <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"/>
123
                                <span class="fa fa-home"></span>
124
                                <strong>privé</strong>
125
                                <span class="form-text">Les annotations sont accessibles pour vous seulement.</span>
126
127
128
129
130
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input name="publish-mode" value="1" type="radio"/>
131
                                <span class="fa fa-user"></span>
132
                                <strong>propriétaire</strong>
133
                                <span class="form-text">Les annotations peuvent être vues par le/la propriétaire de l'image uniquement.
134
135
136
137
                                {% if anobj %}Pour cette image il s'agit de: <strong>«{{ anobj.owner }}»</strong> {% endif %}
                                </span>
                            </label>
                        </div>
138
                        {% if anobj.allow_public_publishing or is_owner %}
139
140
141
                        <div class="radio">
                            <label>
                                <input name="publish-mode" value="2" type="radio"/>
142
143
144
                                <span class="fa fa-users"></span>
                                <strong>public</strong>
                                <span class="form-text">
145
                                    Les annotations peuvent être vues par toutes les personnes qui ont un accès à l'image.
146
                                {% if not is_owner %}Pour connaitre précisément la liste de ces personnes,
147
148
                                    addressez vous à la/le propriétaire de l'image.{% endif %}
                                </span>
149
150
                            </label>
                        </div>
151
                        {% endif %}
152
153
154
155
156
157
                    </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
158
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
159
                    <button type="button" class="btn btn-primary save-publish-mode-but" >Enregistrer</button>
Julien Furrer's avatar
Julien Furrer committed
160
161
162
163
164
                </div>
            </div>
        </div>
    </div>

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


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


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

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

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

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

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

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

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

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

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

312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
                      <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
329

330
                    <button type="button" class="btn btn-light" id="tool-fill-color" title="Contours / plein"
Julien Furrer's avatar
Julien Furrer committed
331
                            data-toggle="button" data-attr-name="fill" >
332
333
                        <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
334
335
336
                        <span class="tool-text">Plein</span>
                    </button>

337
338
                    <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
339
340
                    </button>

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

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

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

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

            </div>

        </div>

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

            <div id="canvas-bbar">
377

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

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

420
        <div class="p-1 ml-auto default" id="side-col">
421
            <div class="side-col-collapse-but">
422
423
              <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>
424
425
              </button>
            </div>
426
427
            <div class="row collapse width show" id="side-col-collapse-content">
                <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 %}
443
                <div class="d-flex">
444
445
446
447
                {% block alt-side-col-panel-group %}
                {% comment %}
                    To use the alternative side panel, override this block template and
                    define the panel-group like this:
448
                        <div id="alt-side-col-panel-group" class="p-1 panel-group" style="margin-right:0;padding-right:0">
449
450
451
452
453
                        ( panels definition goes here ... )
                        </div>
                {% endcomment %}
                {% endblock alt-side-col-panel-group %}

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

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

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

540
                    {# ----- Members Panel ----- #}
541
                    {% block members-panel %}
542
                    {% if display_shared_annotations %}
543
                    <div id="annotation-list-panel">
544
                        <a data-toggle="collapse" href="#collapseUsers" class="{{ collapsed|yesno:"collapsed," }} btn btn-secondary btn-sm btn-block d-inline-flex"
545
                                role="button" aria-expanded="false" aria-controls="collapseUsers">
546
547
                            <div>Utilisateurs</div>
                            <i class="icon-circleup ml-auto"></i>
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
                        </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>
573
                                </div>
574
575
                                <div class="card card-body collapse {{ collapsed|yesno:",in" }}" id="annotation-list-container" style="padding: 0;">
                                    <ul class="list-group"></ul>
576
577
578
579
580
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
581
582
                    {% endblock members-panel %}

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




{%  endblock main_container %}