Skip to content

Commit aa4e718

Browse files
orronaiyammesicka
orronai
and
yammesicka
authored
feat: Add toolbar to Solution page (#197)
* feat: Add toolbar to Solution page - Added a toolbar in the top of the code view - Moved the copy, download and share buttons to the toolbar - Added the number of lines counter in the left corner - Updated and compiled messages of babel localization - Moved the share-box to the share-solution block Co-authored-by: Yam Mesicka <yammesicka@gmail.com>
1 parent c9147a3 commit aa4e718

File tree

5 files changed

+119
-161
lines changed

5 files changed

+119
-161
lines changed

‎lms/lmsweb/translations/en/LC_MESSAGES/messages.po

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -266,10 +266,6 @@ msgstr "Presenter"
266266
msgid "ניווט בגרסאות ההגשה"
267267
msgstr "Navigate in solution versions"
268268

269-
#: templates/view.html:35
270-
msgid "שיתוף תרגיל"
271-
msgstr "Share solution"
272-
273269
#: templates/view.html:48
274270
msgid "לסיום בדיקה"
275271
msgstr "Finish Checking"

‎lms/lmsweb/views.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -369,7 +369,7 @@ def download(download_id: str):
369369
download_id (str): Can be on each side of
370370
a solution.id and sharedsolution.shared_url.
371371
"""
372-
solution = Solution.get_or_none(download_id)
372+
solution = Solution.get_or_none(Solution.id == download_id)
373373
shared_solution = SharedSolution.get_or_none(
374374
SharedSolution.shared_url == download_id,
375375
)

‎lms/static/my.css

Lines changed: 77 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -148,84 +148,6 @@ div#code-view {
148148
align-items: left;
149149
}
150150

151-
#share-solution {
152-
display: flex;
153-
margin-bottom: 1em;
154-
}
155-
156-
button#share-action {
157-
display: flex;
158-
color: rgba(0, 0, 0, 0.5);
159-
border: none;
160-
background: inherit;
161-
align-self: center;
162-
align-content: center;
163-
justify-content: center;
164-
padding: 0;
165-
outline: none;
166-
}
167-
168-
button#share-action:hover {
169-
color: rgba(0, 0, 0, 0.7);
170-
}
171-
172-
button#share-action:active {
173-
color: #007bff;
174-
}
175-
176-
#share-text {
177-
display: flex;
178-
font-weight: bold;
179-
}
180-
181-
#share-box {
182-
display: flex;
183-
direction: rtl;
184-
}
185-
186-
#copy-link,
187-
#cancel-share {
188-
position: relative;
189-
display: table-cell;
190-
background-color: #fafbfc;
191-
color: rgba(0, 0, 0, 0.5);
192-
border: 1px solid;
193-
border-radius: 0.25em;
194-
border-color: rgba(27, 31, 35, 0.15);
195-
}
196-
197-
#copy-link {
198-
border-radius: 0;
199-
}
200-
201-
#copy-link:hover,
202-
#cancel-share:hover {
203-
color: rgba(0, 0, 0, 0.7);
204-
}
205-
206-
#copy-link:active,
207-
#cancel-share:active {
208-
color: #007bff;
209-
}
210-
211-
#cancel-share {
212-
border-top-left-radius: 0;
213-
border-bottom-left-radius: 0;
214-
}
215-
216-
#link-input {
217-
position: relative;
218-
display: table-cell;
219-
background-color: #fafbfc;
220-
color: #24292e;
221-
min-height: 2em;
222-
border: 1px solid;
223-
border-radius: 0.25em;
224-
border-color: rgba(27, 31, 35, 0.15);
225-
border-top-right-radius: 0;
226-
border-bottom-right-radius: 0;
227-
}
228-
229151
.go-send {
230152
background: #247ba0;
231153
color: #ebf3f6;
@@ -267,13 +189,6 @@ button#share-action:active {
267189
margin-top: 5vh;
268190
}
269191

270-
#download-solution {
271-
min-width: 6%;
272-
font-size: 0.75rem;
273-
size: 0.5rem;
274-
align-self: center;
275-
}
276-
277192
.our-button {
278193
border-radius: 8px;
279194
display: block;
@@ -303,30 +218,10 @@ i.fa {
303218
margin-left: 0;
304219
}
305220

306-
.button-copy i.fa {
307-
margin-left: 0;
308-
}
309-
310-
.btn i.fa {
221+
.share-button > i.fa {
311222
margin-left: 0;
312223
}
313224

314-
.rtl #share-action i.fa {
315-
margin-right: 0.4em;
316-
}
317-
318-
.ltr #share-action i.fa {
319-
margin-left: 0.4em;
320-
}
321-
322-
#copy-link i.fa {
323-
margin: 0.4em;
324-
}
325-
326-
#cancel-share i.fa {
327-
margin: 0.4em;
328-
}
329-
330225
#filetree {
331226
display: flex;
332227
overflow-x: none;
@@ -452,9 +347,11 @@ i.fa {
452347
direction: ltr;
453348
text-align: left;
454349
height: min-content;
350+
display: flex;
455351
flex-grow: 1;
456352
flex-basis: min(75vw, -moz-available);
457353
overflow-x: hidden;
354+
flex-flow: column wrap;
458355
}
459356

460357
#code-view {
@@ -463,27 +360,87 @@ i.fa {
463360
overflow-x: hidden;
464361
}
465362

466-
.button-copy {
467-
position: absolute;
468-
right: 1em;
469-
top: 1em;
363+
#code-toolbar {
364+
display: flex;
365+
background-color: #f5f2f0;
366+
border: 1px solid #e1e4e8;
367+
border-top-left-radius: 0.5em;
368+
border-top-right-radius: 0.5em;
369+
align-items: center;
370+
flex-direction: row;
371+
margin-bottom: -0.5em;
372+
padding: 0.5em;
373+
}
374+
375+
.glowing button:hover {
376+
color: rgb(0, 123, 255) !important;
377+
}
378+
379+
.glowing button:active {
380+
color: rgb(0, 123, 195) !important;
381+
}
382+
383+
.code-toolbar-button {
384+
padding: 0 0.8em;
385+
margin-left: 0.2em;
470386
color: rgba(0, 0, 0, 0.5);
471-
background-color: gray;
472-
border-radius: 0.875em;
473-
border: 0.0625em solid #fff;
474387
cursor: pointer;
388+
}
389+
390+
#code-toolbar button {
391+
border: none;
392+
outline: none;
393+
background: none;
394+
}
395+
396+
#number-of-lines {
397+
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
475398
font-size: 0.875rem;
476-
padding: 0.125em 0.5em;
477-
text-decoration: none;
399+
color: rgba(0, 0, 0, 0.5);
400+
flex: auto;
401+
}
402+
403+
#code-toolbar-buttons {
404+
display: flex;
405+
align-items: center;
406+
}
407+
408+
#share-box {
409+
display: flex;
410+
position: absolute;
411+
direction: rtl;
412+
align-items: center;
413+
top: 3em;
414+
right: 0.5em;
415+
z-index: 10;
416+
padding: 0.25em;
417+
border: 1px solid lightgray;
418+
background: white;
419+
border-radius: 5px;
478420
}
479421

480-
.button-copy:hover {
481-
color: rgba(0, 0, 0, 0.7);
422+
#share-box * {
423+
position: relative;
424+
display: flex;
425+
line-height: unset;
482426
}
483427

484-
.button-copy:active {
485-
color: #007bff;
486-
background-color: white;
428+
#share-box button {
429+
color: rgba(0, 0, 0, 0.5);
430+
border: 1px solid lightgray;
431+
border-radius: 0;
432+
}
433+
434+
#share-box #cancel-share {
435+
border-top-right-radius: 0.25em;
436+
border-bottom-right-radius: 0.25em;
437+
}
438+
439+
#share-box input {
440+
border: 1px solid lightgray;
441+
border-radius: 0.25em;
442+
border-bottom-right-radius: 0;
443+
border-top-right-radius: 0;
487444
}
488445

489446
pre {

‎lms/static/my.js

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -32,34 +32,33 @@ function trackCopyButton(button, context) {
3232
});
3333
}
3434

35-
function updateShareLink(xhr) {
35+
function hideShareLink(xhr) {
3636
const shareBox = document.getElementById('share-box');
37-
const shareText = document.getElementById('share-text');
3837
if (xhr.readyState === 4) {
3938
if (xhr.status === 200) {
40-
if (shareBox.classList.contains('d-none')) {
41-
const link = `${window.location.origin}/shared/${xhr.response.share_link}`;
42-
const linkTextbox = document.getElementById('shareable-link');
43-
linkTextbox.value = link;
44-
linkTextbox.size = link.length;
45-
shareBox.classList.remove('d-none');
46-
shareText.classList.add('d-none');
47-
trackCopyButton(document.getElementById('copy-link'), link);
48-
}
49-
shareBox.parentNode.querySelector('i').className = 'fa fa-share-alt';
39+
shareBox.classList.add('d-none');
5040
} else {
5141
console.log(xhr.status);
5242
}
5343
}
5444
}
5545

56-
function hideShareLink(xhr) {
46+
function updateShareLink(xhr) {
5747
const shareBox = document.getElementById('share-box');
5848
const shareText = document.getElementById('share-text');
5949
if (xhr.readyState === 4) {
6050
if (xhr.status === 200) {
61-
shareBox.classList.add('d-none');
62-
shareText.classList.remove('d-none');
51+
if (shareBox.classList.contains('d-none')) {
52+
const link = `${window.location.origin}/shared/${xhr.response.share_link}`;
53+
const linkTextbox = document.getElementById('shareable-link');
54+
linkTextbox.value = link;
55+
linkTextbox.size = link.length;
56+
shareBox.classList.remove('d-none');
57+
trackCopyButton(document.getElementById('copy-link'), link);
58+
} else {
59+
hideShareLink(xhr);
60+
}
61+
shareText.querySelector('i').className = 'fa fa-share-alt';
6362
} else {
6463
console.log(xhr.status);
6564
}

‎lms/templates/view.html

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -29,19 +29,6 @@ <h1>{{ _('תצוגת תרגיל') }} {{ solution['exercise']['id'] }}: {{ soluti
2929
{% endfor -%}
3030
</ul>
3131
</nav>
32-
{% if config.SHAREABLE_SOLUTIONS %}
33-
<div id="share-solution" class="share-function {{ direction }}">
34-
<div id="share-text">
35-
<span>{{ _('שיתוף תרגיל') }}: </span>
36-
<button id="share-action" title="Share solution"><i class="fa fa-share-alt"></i></button>
37-
</div>
38-
<div id="share-box" class="d-none">
39-
<span id="cancel-share" title="Disable share solution"><i class="fa fa-trash"></i></span>
40-
<span id="copy-link" title="Copy shared link"><i class="fa fa-copy"></i></span>
41-
<input type="text" id="shareable-link" size="42" readonly>
42-
</div>
43-
</div>
44-
{% endif -%}
4532
{% if is_manager and not shared_url %}
4633
<div class="progress manager-progress-bar">
4734
<div class="progress-bar" style="width: {{ left }}%;" role="progressbar" aria-valuenow="{{ left }}" aria-valuemax="100">
@@ -53,12 +40,36 @@ <h1>{{ _('תצוגת תרגיל') }} {{ solution['exercise']['id'] }}: {{ soluti
5340
</div>
5441
<div id="view-body">
5542
<div class="code-view-container">
43+
<div id="code-toolbar">
44+
<div id="number-of-lines">{{ current_file.code.splitlines() | length }} lines</div>
45+
<div id="code-toolbar-buttons">
46+
{% if config.SHAREABLE_SOLUTIONS and not shared_url %}
47+
<div id="share-solution" class="share-function">
48+
<div id="share-text" class="code-toolbar-button glowing">
49+
<button id="share-action" title="Share solution"><i class="fa fa-share-alt"></i></button>
50+
</div>
51+
<div id="share-box" class="glowing d-none">
52+
<button id="cancel-share" class="share-button" title="Disable share solution"><i class="fa fa-trash"></i></button>
53+
<button id="copy-link" class="share-button" title="Copy shared link"><i class="fa fa-copy"></i></button>
54+
<input id="shareable-link" type="text" readonly>
55+
</div>
56+
</div>
57+
{% endif -%}
58+
<div id="download-code" class="code-toolbar-button glowing">
59+
<form>
60+
<button id="download-solution" formaction="/download/{% if shared_url %}{{ shared_url }}{% else %}{{ solution['id'] }}{% endif %}">
61+
<i class="fa fa-download"></i>
62+
</button>
63+
</form>
64+
</div>
65+
<div id="copy-code" class="code-toolbar-button glowing">
66+
<button id="copy-button" class="button-copy" title="Copy code"><i class="fa fa-copy"></i></button>
67+
</div>
68+
</div>
69+
</div>
5670
<div id="code-view" data-id="{{ solution['id'] }}" data-file="{{ current_file.id }}" data-exercise="{{ solution['exercise']['id'] }}" data-role="{{ role }}">
5771
<pre><code id="user-code" class="language-{{ current_file | language_name }} line-numbers highlight">{{- current_file.code | trim(chars=' ') | e -}}</code></pre>
5872
</div>
59-
<div id="copy-code">
60-
<a href="#" id="copy-button" class="button-copy" title="Copy code"><i class="fa fa-copy"></i></a>
61-
</div>
6273
{% if test_results and not shared_url %}
6374
<div class="test-results">
6475
<h3 class="test-result-title">{{ _('בדיקות אוטומטיות') }}</h3>
@@ -122,11 +133,6 @@ <h2>{{ _('הערות בודק') }}</h2>
122133
{% include 'filetree.html' %}
123134
{% endif -%}
124135
</div>
125-
<a id="download-solution" href="/download/{% if shared_url %}{{ shared_url }}{% else %}{{ solution['id'] }}{% endif %}" class="{{ direction }}">
126-
<button class="btn btn-primary btn-sm btn-block">
127-
<i class="fa fa-download"></i> {{ _('הורד פתרון') }}
128-
</button>
129-
</a>
130136
</div>
131137
<script src="{{ url_for('static', filename='prism.js') }}"></script>
132138
{% if not shared_url %}

0 commit comments

Comments
 (0)