From 8cd43416be24806421d569a50216054173021abc Mon Sep 17 00:00:00 2001 From: Splines Date: Sun, 12 Nov 2023 16:19:37 +0100 Subject: [PATCH 01/20] Reduce complexity of small/large display checks Also removed deprecated device-width, see: https://stackoverflow.com/a/18500871/ --- .../javascripts/thyme/display_manager.js | 100 +++--------------- 1 file changed, 15 insertions(+), 85 deletions(-) diff --git a/app/assets/javascripts/thyme/display_manager.js b/app/assets/javascripts/thyme/display_manager.js index 7fac4e32f..a65985242 100644 --- a/app/assets/javascripts/thyme/display_manager.js +++ b/app/assets/javascripts/thyme/display_manager.js @@ -16,8 +16,6 @@ class DisplayManager { this.onEnlarge = onEnlarge; } - - // on small display, fall back to standard browser player adaptToSmallDisplay() { for (let e of this.elements) { @@ -38,93 +36,25 @@ class DisplayManager { // Check screen size and trigger the right method updateControlBarType() { - const dm = this; - - if (window.matchMedia("screen and (max-width: " + - thymeAttributes.hideControlBarThreshold.x + "px)").matches || - window.matchMedia("screen and (max-height: " + - thymeAttributes.hideControlBarThreshold.y + "px)").matches) { - dm.adaptToSmallDisplay(); - } + const manager = this; - if (window.matchMedia("screen and (max-device-width: " + - thymeAttributes.hideControlBarThreshold.x + "px)").matches || - window.matchMedia("screen and (max-device-height: " + - thymeAttributes.hideControlBarThreshold.y + "px)").matches) { - dm.adaptToSmallDisplay(); - } - - // mediaQuery listener for very small screens - const matchVerysmallX = window.matchMedia("screen and (max-width: " + - thymeAttributes.hideControlBarThreshold.x + "px)"); - matchVerysmallX.addListener(function (result) { - if (result.matches) { - dm.adaptToSmallDisplay(); - } - }); - const matchVerysmallY = window.matchMedia("screen and (max-height: " + - thymeAttributes.hideControlBarThreshold.y + "px)"); - matchVerysmallY.addListener(function (result) { - if (result.matches) { - dm.adaptToSmallDisplay(); - } - }); + const matchSmallMediaQuery = window.matchMedia(` + screen and ( + (max-width: ${thymeAttributes.hideControlBarThreshold.x}px) + or (max-height: ${thymeAttributes.hideControlBarThreshold.y}px) + ) + `); - const matchVerysmalldeviceX = window.matchMedia("screen and (max-device-width: " + - thymeAttributes.hideControlBarThreshold.x + "px)"); - matchVerysmalldeviceX.addListener(function (result) { - if (result.matches) { - dm.adaptToSmallDisplay(); + function handleSizeChange(event) { + if (event.matches) { + manager.adaptToSmallDisplay(); + } else { + manager.adaptToLargeDisplay(); } - }); - const matchVerysmalldeviceY = window.matchMedia("screen and (max-device-height: " + - thymeAttributes.hideControlBarThreshold.y + "px)"); - matchVerysmalldeviceY.addListener(function (result) { - if (result.matches) { - dm.adaptToSmallDisplay(); - } - }); - - // mediaQuery listener for normal screens - let matchNormalX = window.matchMedia("screen and (min-width: " + - (thymeAttributes.hideControlBarThreshold.x + 1) + "px)"); - matchNormalX.addListener(function (result) { - let matchNormalY; - matchNormalY = window.matchMedia("screen and (min-height: " + - (thymeAttributes.hideControlBarThreshold.y + 1) + "px)"); - if (result.matches && matchNormalY.matches) { - dm.adaptToLargeDisplay(); - } - }); - const matchNormalY = window.matchMedia("screen and (min-height: " + - (thymeAttributes.hideControlBarThreshold.y + 1) + "px)"); - matchNormalY.addListener(function (result) { - matchNormalX = window.matchMedia("screen and (min-width: " + - (thymeAttributes.hideControlBarThreshold.x + 1) + "px)"); - if (result.matches && matchNormalX.matches) { - dm.adaptToLargeDisplay(); - } - }); + } - let matchNormaldeviceX = window.matchMedia("screen and (min-device-width: " + - (thymeAttributes.hideControlBarThreshold.x + 1) + "px)"); - let matchNormaldeviceY; - matchNormaldeviceX.addListener(function (result) { - matchNormaldeviceY = window.matchMedia("screen and (min-device-height: " + - (thymeAttributes.hideControlBarThreshold.y + 1) + "px)"); - if (result.matches && matchNormalY.matches) { - dm.adaptToLargeDisplay(); - } - }); - matchNormaldeviceY = window.matchMedia("screen and (min-device-height: " + - (thymeAttributes.hideControlBarThreshold.y + 1) + "px)"); - matchNormaldeviceY.addListener(function (result) { - matchNormaldeviceX = window.matchMedia("screen and (min-device-width: " + - (thymeAttributes.hideControlBarThreshold.x + 1) + "px)"); - if (result.matches && matchNormalX.matches) { - dm.adaptToLargeDisplay(); - } - }); + matchSmallMediaQuery.addListener(handleSizeChange); + handleSizeChange(matchSmallMediaQuery); // initial call } }; From 958af8fdd9da3f8840ecdb8164e2a23d6a6ff85b Mon Sep 17 00:00:00 2001 From: Splines Date: Sun, 12 Nov 2023 16:24:47 +0100 Subject: [PATCH 02/20] Implement locking to prevent unnecessary DB calls The AnnotationManager should handle its internal state on its own. Therefore, updateMarkers() now checks if annotations are null and if they are, it calls updateAnnotations() accordingly, but only if no other method has already called updateMarkers recently, e.g. when multiple resize events are fired in a small period of time. Resource is freed in updateAnnotations. --- .../thyme/annotations/annotation_manager.js | 25 +++++++++++++++---- .../javascripts/thyme/thyme_feedback.js | 6 +---- app/assets/javascripts/thyme/thyme_player.js | 6 +---- 3 files changed, 22 insertions(+), 15 deletions(-) diff --git a/app/assets/javascripts/thyme/annotations/annotation_manager.js b/app/assets/javascripts/thyme/annotations/annotation_manager.js index 19b43f0d8..3e5ab05d0 100644 --- a/app/assets/javascripts/thyme/annotations/annotation_manager.js +++ b/app/assets/javascripts/thyme/annotations/annotation_manager.js @@ -33,10 +33,9 @@ class AnnotationManager { this.onClick = onClick; this.onUpdate = onUpdate; this.isValid = isValid; + this.isDbCalledForFreshAnnotations = false; } - - /* Updates the markers on the timeline, i.e. the visual represention of the annotations. This method is e.g. used for rearranging the markers when the window is being resized. @@ -44,9 +43,19 @@ class AnnotationManager { in the database. */ updateMarkers() { + // In case the annotations have not been loaded yet, do nothing. + // This situation might occur during the initial page load. + if (!thymeAttributes.annotations) { + if (!this.isDbCalledForFreshAnnotations) { + this.updateAnnotations(); + } + return; + } + const annotationManager = this; $('#' + thymeAttributes.markerBarId).empty(); AnnotationManager.sortAnnotations(); + for (const a of thymeAttributes.annotations) { if (this.isValid(a)) { function onClick() { @@ -72,14 +81,16 @@ class AnnotationManager { successfully updated. */ updateAnnotations() { - const annotationManager = this; + this.isDbCalledForFreshAnnotations = true; // Lock resource + + const manager = this; $.ajax(Routes.update_annotations_path(), { type: 'GET', dataType: 'json', data: { mediumId: thymeAttributes.mediumId, }, - success: function(annotations) { + success: (annotations) => { // update the annotation field in thymeAttributes thymeAttributes.annotations = []; if (!annotations) { @@ -89,7 +100,11 @@ class AnnotationManager { thymeAttributes.annotations.push(new Annotation(a)); } // update visual representation on the seek bar - annotationManager.updateMarkers(); + manager.updateMarkers(); + }, + always: () => { + // Free resource + manager.isDbCalledForFreshAnnotations = false; } }); } diff --git a/app/assets/javascripts/thyme/thyme_feedback.js b/app/assets/javascripts/thyme/thyme_feedback.js index b7eaae1e9..3f4e5e326 100644 --- a/app/assets/javascripts/thyme/thyme_feedback.js +++ b/app/assets/javascripts/thyme/thyme_feedback.js @@ -106,11 +106,7 @@ $(document).on('turbolinks:load', function() { // resizes the thyme container to the window dimensions function resizeContainer() { resize.resizeContainer(thymeContainer, 1.22, 70); - if (!thymeAttributes.annotations) { - annotationManager.updateAnnotations(); - } else { - annotationManager.updateMarkers(); - } + annotationManager.updateMarkers(); }; window.onresize = resizeContainer; video.onloadedmetadata = resizeContainer; diff --git a/app/assets/javascripts/thyme/thyme_player.js b/app/assets/javascripts/thyme/thyme_player.js index 18e02ec27..07c3c2cb3 100644 --- a/app/assets/javascripts/thyme/thyme_player.js +++ b/app/assets/javascripts/thyme/thyme_player.js @@ -152,11 +152,7 @@ $(document).on('turbolinks:load', function() { function resizeContainer() { const factor = $('#caption').is(':hidden') && $('#annotation-caption').is(':hidden') ? 1 : 1 / 0.82; resize.resizeContainer(thymeContainer, factor, 0); - if (!thymeAttributes.annotations) { - annotationManager.updateAnnotations(); - } else { - annotationManager.updateMarkers(); - } + annotationManager.updateMarkers(); }; window.onresize = resizeContainer; video.onloadedmetadata = resizeContainer; From 8fcc2389dd4d3c946a328bfd2789b002285ce277 Mon Sep 17 00:00:00 2001 From: Splines Date: Sun, 12 Nov 2023 17:08:08 +0100 Subject: [PATCH 03/20] Rewrite handling of annotation update --- app/assets/javascripts/thyme/thyme_player.js | 9 --------- app/views/annotations/_annotation_modal.html.erb | 4 +--- app/views/annotations/update.js | 3 ++- 3 files changed, 3 insertions(+), 13 deletions(-) diff --git a/app/assets/javascripts/thyme/thyme_player.js b/app/assets/javascripts/thyme/thyme_player.js index 7a80c6f26..f1a05f9cb 100644 --- a/app/assets/javascripts/thyme/thyme_player.js +++ b/app/assets/javascripts/thyme/thyme_player.js @@ -99,15 +99,6 @@ $(document).on('turbolinks:load', function() { onClick, onUpdate, isValid); thymeAttributes.annotationManager = annotationManager; - // Update annotations after submitting the annotations form - $('#annotation-update').on('DOMSubtreeModified', function() { - const updateDataset = document.querySelector('#annotation-update').dataset; - if (updateDataset.update === "updated") { - updateDataset.update = ""; - annotationManager.updateAnnotations(); - } - }); - // Update annotations after deleting an annotation $(document).on('click', '#delete-button', function() { const annotationId = Number(document.getElementById('annotation_id').textContent); diff --git a/app/views/annotations/_annotation_modal.html.erb b/app/views/annotations/_annotation_modal.html.erb index 4cd7e63e8..b44abe9c3 100644 --- a/app/views/annotations/_annotation_modal.html.erb +++ b/app/views/annotations/_annotation_modal.html.erb @@ -24,7 +24,5 @@ + - - \ No newline at end of file diff --git a/app/views/annotations/update.js b/app/views/annotations/update.js index 3df69e3ef..2cc509f01 100644 --- a/app/views/annotations/update.js +++ b/app/views/annotations/update.js @@ -1,3 +1,4 @@ $('#annotation-modal').modal("hide"); -document.querySelector('#annotation-update').dataset.update = "updated"; \ No newline at end of file +// Update annotations after submitting the annotations form +thymeAttributes.annotationManager.updateAnnotations(); From 741267f6e728d6eb450531ada30405db59d70e13 Mon Sep 17 00:00:00 2001 From: Splines Date: Sun, 12 Nov 2023 17:45:12 +0100 Subject: [PATCH 04/20] Use gender-neutral pronoun --- config/locales/en.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/locales/en.yml b/config/locales/en.yml index ebf84ef03..cc1609f40 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -384,7 +384,7 @@ en: visible_for_teacher: 'Visible for teacher?' visible_for_teacher_helpdesk: > If this checkbox is selected your teacher can see this annotation - (without your name!) in his own thyme player. + (without your name!) in their own thyme player. post_as_comment: 'Post as comment?' post_as_comment_helpdesk: > If this checkbox is selected, this annotation will be published as From 0a426d1b17b9e6b833bc75befa1dfd3769664a6a Mon Sep 17 00:00:00 2001 From: Splines Date: Mon, 13 Nov 2023 19:20:38 +0100 Subject: [PATCH 05/20] Replace alert() by Bootstrap alert Used for "Post as comment" warnings. --- app/views/annotations/_form.html.erb | 3 ++ app/views/annotations/edit.js.erb | 65 +++++++++++++++------------- config/locales/de.yml | 4 +- config/locales/en.yml | 6 +-- 4 files changed, 43 insertions(+), 35 deletions(-) diff --git a/app/views/annotations/_form.html.erb b/app/views/annotations/_form.html.erb index e25155275..0716d9325 100644 --- a/app/views/annotations/_form.html.erb +++ b/app/views/annotations/_form.html.erb @@ -130,6 +130,9 @@ <%= helpdesk(t('admin.annotation.post_as_comment_helpdesk'), false) %> + +
diff --git a/app/views/annotations/edit.js.erb b/app/views/annotations/edit.js.erb index 2bdd7ab7f..f14a7f774 100644 --- a/app/views/annotations/edit.js.erb +++ b/app/views/annotations/edit.js.erb @@ -3,54 +3,60 @@ $('#annotation-modal-content').empty() $('#annotation-modal').modal('show'); var submitButton = document.getElementById('annotation-modal-submit-button'); -var postAsComment = document.getElementById('annotation_post_as_comment'); +var $postAsComment = $('#annotation_post_as_comment'); var posted = <%= @posted %>; -postAsComment.addEventListener('change', function() { +$postAsComment.on("change", function () { if (this.checked) { - alertWarningMessage(); + const $warningElement = $("#annotation-comment-warning"); + const message = constructWarningMessage(); + $warningElement.html(message); + $warningElement.show(); + } else { + $("#annotation-comment-warning").hide(); } }); -function alertWarningMessage() { - var message = document.getElementById('annotation-locales').dataset.warningPublishing; - var mistakeRadio = document.getElementById('annotation_category_mistake'); - if (mistakeRadio.checked) { - alertMistakeWarningMessage(message); - } else { - alert(message); +function constructWarningMessage() { + let message = $("#annotation-locales").data("warningPublishing"); + + const mistakeRatio = $('#annotation_category_mistake'); + if (!mistakeRatio.is(":checked")) { + return message; } -} -function alertMistakeWarningMessage(message) { - message += "\n" + document.getElementById('annotation-locales').dataset.warningMistake; - var mediumId = thyme.dataset.medium; - var radius = 60; // annotations that are inside this radius (in seconds) are considered as "near". + // Mistake specific warnings $.ajax(Routes.num_nearby_posted_mistake_annotations_path(), { type: 'GET', dataType: 'json', + async: false, data: { - mediumId: mediumId, + mediumId: thyme.dataset.medium, timestamp: video.currentTime, - radius: radius, + // Annotations located inside this radius (in seconds) are considered as "near" + radius: 60, }, - success: function(count) { + success: function (count) { + const locale = $('#annotation-locales'); + message += "
"; if (!count) { - alert(message); - return; - } else if (count === 1) { - message += document.getElementById('annotation-locales'). - dataset.warningOneCloseAnnotation; + message += $('#annotation-locales').data("warningMistake"); + } else if (count == 1) { + message += locale.data("warningOneCloseAnnotation"); } else { - message += document.getElementById('annotation-locales'). - dataset.warningMultipleCloseAnnotations1 + - count + - document.getElementById('annotation-locales'). - dataset.warningMultipleCloseAnnotations2; + message += locale.data("warningMultipleCloseAnnotations1") + + count + locale.data("warningMultipleCloseAnnotations2"); } - alert(message); + return message; + }, + error: function (err) { + console.error("Error while fetching nearby annotations"); + console.error(err); + return message; } }); + + return message; } @@ -132,7 +138,6 @@ function mistake() { submitButton.disabled = false; visibleForTeacher(true); postComment(true); - alertWarningMessage(); } function presentation() { diff --git a/config/locales/de.yml b/config/locales/de.yml index 69f38d347..3fa2fd0a9 100644 --- a/config/locales/de.yml +++ b/config/locales/de.yml @@ -376,9 +376,9 @@ de: Bevor Du diesen Kommentar abschickst, überprüfe außerdem bitte, ob bereits ein Kommentar zu dem von Dir gefundenen Fehler existiert. one_close_annotation: > - In der Nähe Deiner Annotation gibt es bereits eine veröffentlichte + Beachte: in der Nähe Deiner Annotation gibt es bereits eine veröffentlichte Fehler-Annotation. - multiple_close_annotations_1: "In der Nähe Deiner Annotation gibt es bereits " + multiple_close_annotations_1: "Beachte: in der Nähe Deiner Annotation gibt es bereits " multiple_close_annotations_2: " veröffentlichte Fehler-Annotationen." permission: "Dir fehlen die Rechte, um diese Annotation zu bearbeiten." visible_for_teacher: 'Für DozentIn sichtbar?' diff --git a/config/locales/en.yml b/config/locales/en.yml index cc1609f40..901122d3a 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -377,9 +377,9 @@ en: Before submitting, please also check, if someone already posted a comment concerning this mistake. one_close_annotation: > - There already is a public mistake annotation that is close to yours. - multiple_close_annotations_1: "There are already " - multiple_close_annotations_2: " mistake annotations that are close to yours." + Note there is already a mistake annotation around this Thymestamp. + multiple_close_annotations_1: "Note there are already " + multiple_close_annotations_2: " mistake annotations close to yours." permission: "You don't have the permission to edit this annotation." visible_for_teacher: 'Visible for teacher?' visible_for_teacher_helpdesk: > From ee11dc03d1a9602e5370f0bfe33c40c3bd534ad4 Mon Sep 17 00:00:00 2001 From: Splines Date: Mon, 13 Nov 2023 19:21:41 +0100 Subject: [PATCH 06/20] Use JQuery syntax and lint file Note we also use .trigger("change") to trigger event listeners for the checkbox, otherwise they won't be fired. --- app/views/annotations/edit.js.erb | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/app/views/annotations/edit.js.erb b/app/views/annotations/edit.js.erb index f14a7f774..3bdf7afef 100644 --- a/app/views/annotations/edit.js.erb +++ b/app/views/annotations/edit.js.erb @@ -67,9 +67,9 @@ function constructWarningMessage() { var categoryRadios = document.getElementById('category-radios'); -categoryRadios.addEventListener('click', function(evt) { +categoryRadios.addEventListener('click', function (evt) { if (evt.target && event.target.matches("input[type='radio']")) { - switch(evt.target.value) { + switch (evt.target.value) { case Category.NOTE.name: note(); break; @@ -100,7 +100,7 @@ function content() { visibleForTeacher(true); postComment(false); var contentCategoryRadios = document.getElementById('content-category-radios'); - contentCategoryRadios.addEventListener('click', function(evt) { + contentCategoryRadios.addEventListener('click', function (evt) { if (evt.target && event.target.matches("input[type='radio']")) { submitButton.disabled = false; switch (evt.target.value) { @@ -180,13 +180,13 @@ function updatePreview() { /* * Auxiliary methods */ -function visibleForTeacher(boolean) { - $('#annotation_visible_for_teacher').prop("checked", boolean); +function visibleForTeacher(isVisible) { + $('#annotation_visible_for_teacher').prop("checked", isVisible).trigger("change"); } -function postComment(boolean) { - boolean = posted ? true : boolean; - $('#annotation_post_as_comment').prop("checked", boolean); +function postComment(isVisible) { + isVisible = posted ? true : isVisible; + $('#annotation_post_as_comment').prop("checked", isVisible).trigger("change"); } function previewCSS(show, modalWidth, contentWidth, previewWidth) { @@ -209,8 +209,8 @@ function previewCSS(show, modalWidth, contentWidth, previewWidth) { /* If this script is rendered by the edit method of the annotation controller: Select correct subcategory (this is not automatically done by the rails form as the content is dynamically rendered). */ -var contentRadio = document.getElementById('annotation_category_content'); -if (contentRadio.checked) { +var contentRadio = $('#annotation_category_content'); +if (contentRadio.is(':checked')) { content(); submitButton.disabled = false; var subcategory = document.getElementById('annotation_subcategory').textContent.replace(/[^a-z]/g, ''); @@ -229,7 +229,7 @@ if (contentRadio.checked) { // render preview var annotationComment = document.getElementById('annotation_comment'); -annotationComment.addEventListener('input', function() { +annotationComment.addEventListener('input', function () { updatePreview(); }); @@ -237,7 +237,7 @@ previewCSS(false, 100, 100, 0); // preview toggle listener var previewToggle = document.getElementById('preview-toggle'); -previewToggle.addEventListener('change', function() { +previewToggle.addEventListener('change', function () { if ($('#preview-toggle-check').is(":checked")) { previewCSS(true, 150, 65, 35); } else { From 921ee6ae87741e77dbdb0cd7d8fcefe597cdeddd Mon Sep 17 00:00:00 2001 From: Splines Date: Mon, 13 Nov 2023 19:35:29 +0100 Subject: [PATCH 07/20] Add tooltip (helpdesk) for category --- app/views/annotations/_form.html.erb | 1 + config/locales/de.yml | 6 ++++++ config/locales/en.yml | 5 +++++ 3 files changed, 12 insertions(+) diff --git a/app/views/annotations/_form.html.erb b/app/views/annotations/_form.html.erb index 0716d9325..d53b3e434 100644 --- a/app/views/annotations/_form.html.erb +++ b/app/views/annotations/_form.html.erb @@ -56,6 +56,7 @@ <%= t('admin.annotation.category') %> + <%= helpdesk(t('admin.annotation.category_tooltip'), false) %>
diff --git a/config/locales/de.yml b/config/locales/de.yml index 3fa2fd0a9..9597a3d95 100644 --- a/config/locales/de.yml +++ b/config/locales/de.yml @@ -330,6 +330,12 @@ de: comment: 'Kommentar' color: 'Farbe' category: 'Kategorie' + category_tooltip: > + Verwende "Notiz" für persönliche Notizen, "Inhalt" wenn Du den Inhalt + des Videos an dieser Stelle nicht verstehst, "Fehler" wenn Du einen + Fehler entdeckt hast, und "Darstellung" wenn Dir die Darstellung im + Video Probleme bereitet, z.B. falls Du die Schrift nicht lesen kannst + oder der Ton unverständlich ist. note: 'Notiz' note_tooltip: > Wähle diese Kategorie aus, wenn Du Deine Annotation als diff --git a/config/locales/en.yml b/config/locales/en.yml index 901122d3a..3e3387685 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -331,6 +331,11 @@ en: comment: 'Comment' color: 'Color' category: 'Category' + category_tooltip: > + Use "note" for personal notes, "content" if you don't understand the + content of the video at this position, "mistake" if you've spot a mistake, + and "presentation" if you have problems with the presentation, + e.g. you cannot read the handwriting or cannot understand the audio. note: 'note' note_tooltip: > Select this category if you want to create your annotation From f95295c384a3684247c36c8bb1b48cbd0a4d113b Mon Sep 17 00:00:00 2001 From: Splines Date: Mon, 13 Nov 2023 19:43:19 +0100 Subject: [PATCH 08/20] Make color picker elements round --- app/assets/stylesheets/annotations.scss | 7 +++++-- app/views/annotations/_form.html.erb | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/annotations.scss b/app/assets/stylesheets/annotations.scss index 5abd00213..c83e39c89 100644 --- a/app/assets/stylesheets/annotations.scss +++ b/app/assets/stylesheets/annotations.scss @@ -98,7 +98,7 @@ &:checked + label { span { transform: scale(1.25); - border: 2px solid black; + border: 2px solid #0000008a; } } } @@ -109,16 +109,19 @@ height: 25px; margin-right: 2px; cursor: pointer; + &:hover { span { transform: scale(1.25); } } + span { display: block; width: 100%; height: 100%; - transition: transform .2s ease-in-out; + border-radius: 50%; + transition: transform .1s ease-in-out; } } } diff --git a/app/views/annotations/_form.html.erb b/app/views/annotations/_form.html.erb index d53b3e434..b79ec63e1 100644 --- a/app/views/annotations/_form.html.erb +++ b/app/views/annotations/_form.html.erb @@ -46,7 +46,7 @@ <%= f.label :color, "annotation_color#{i}", for: "annotation_color#{i}" do %> - <% end %> <% end %> From 69914a174548f01eb431097e6bc2a81d3cddba7a Mon Sep 17 00:00:00 2001 From: Splines Date: Mon, 13 Nov 2023 20:01:07 +0100 Subject: [PATCH 09/20] Use paddings instead of line breaks --- app/views/annotations/_form.html.erb | 26 ++++++-------------- app/views/annotations/_form_content.html.erb | 4 --- 2 files changed, 8 insertions(+), 22 deletions(-) diff --git a/app/views/annotations/_form.html.erb b/app/views/annotations/_form.html.erb index b79ec63e1..1e3412eca 100644 --- a/app/views/annotations/_form.html.erb +++ b/app/views/annotations/_form.html.erb @@ -1,8 +1,10 @@
<%= form_with model: @annotation do |f| %> - <%= t('admin.annotation.time') %>   <%= TimeStamp.new(total_seconds: @total_seconds).hms_colon_string %> - -

+

+ <%= t('admin.annotation.time') %> +   + <%= TimeStamp.new(total_seconds: @total_seconds).hms_colon_string %> +

<%= f.hidden_field :medium_id, value: @medium_id %> @@ -21,8 +23,6 @@ <%= t('admin.annotation.comment') %> <%= f.text_area :comment, class: 'form-control' %> -
-
-
- - <%= t('admin.annotation.color') %> -
+
<% colors = Annotation.colors %> <% for i in 1..15 do %> <%= f.radio_button :color, @@ -52,8 +50,6 @@ <% end %>
-
- <%= t('admin.annotation.category') %> <%= helpdesk(t('admin.annotation.category_tooltip'), false) %> @@ -100,14 +96,10 @@
-
- -
+
-
- <% annotations_status = Medium.find_by(id: @medium_id).get_annotations_status %> <% if annotations_status == 1 %> @@ -134,8 +126,6 @@ -
-
<%= f.submit t('buttons.save'), diff --git a/app/views/annotations/_form_content.html.erb b/app/views/annotations/_form_content.html.erb index 530dd0024..3ea42b6f7 100644 --- a/app/views/annotations/_form_content.html.erb +++ b/app/views/annotations/_form_content.html.erb @@ -1,7 +1,5 @@ <%= t('admin.annotation.whats_the_problem') %> -
-
@@ -41,8 +39,6 @@
-
-
From 3e75dbc7fb50c10ef85fbdf52b988adddeff69c9 Mon Sep 17 00:00:00 2001 From: Splines Date: Mon, 13 Nov 2023 20:11:44 +0100 Subject: [PATCH 10/20] Don't show warnings if annotation was posted --- app/views/annotations/edit.js.erb | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/views/annotations/edit.js.erb b/app/views/annotations/edit.js.erb index 3bdf7afef..56af7d60f 100644 --- a/app/views/annotations/edit.js.erb +++ b/app/views/annotations/edit.js.erb @@ -7,6 +7,11 @@ var $postAsComment = $('#annotation_post_as_comment'); var posted = <%= @posted %>; $postAsComment.on("change", function () { + // Don't show warnings if the annotation was already posted + if (posted) { + return; + } + if (this.checked) { const $warningElement = $("#annotation-comment-warning"); const message = constructWarningMessage(); @@ -248,7 +253,7 @@ previewToggle.addEventListener('change', function () { // disable post comment checkbox if annotation was already posted if (posted) { postComment(true); - postAsComment.disabled = true; + $postAsComment.get(0).disabled = true; } initBootstrapPopovers(); From 5359ec6a2f6ee717757b00fe8033b0cd1f4da3c9 Mon Sep 17 00:00:00 2001 From: Splines Date: Mon, 13 Nov 2023 20:23:48 +0100 Subject: [PATCH 11/20] Show further help link in new tab Also shortened current distinction into different categories as right now it is not needed. --- .../_form_content_further_help.html.erb | 4 ++- app/views/annotations/edit.js.erb | 26 +++++++------------ 2 files changed, 13 insertions(+), 17 deletions(-) diff --git a/app/views/annotations/_form_content_further_help.html.erb b/app/views/annotations/_form_content_further_help.html.erb index 9ed247bec..6ff5da1c4 100644 --- a/app/views/annotations/_form_content_further_help.html.erb +++ b/app/views/annotations/_form_content_further_help.html.erb @@ -9,6 +9,8 @@ <% end %> <% unless link_name.blank? %> <%= t('admin.annotation.further_help') %>
- <%= link_name %> + + <%= link_name %> + <% end %>
diff --git a/app/views/annotations/edit.js.erb b/app/views/annotations/edit.js.erb index 56af7d60f..59ee85d20 100644 --- a/app/views/annotations/edit.js.erb +++ b/app/views/annotations/edit.js.erb @@ -101,38 +101,32 @@ function note() { function content() { $('#annotation-category-specific').empty() .append('<%= j render partial: "annotations/form_content"%>'); - submitButton.disabled = true; // disable submit button until the content category is selected + // disable submit button until the content category is selected + submitButton.disabled = true; visibleForTeacher(true); postComment(false); var contentCategoryRadios = document.getElementById('content-category-radios'); contentCategoryRadios.addEventListener('click', function (evt) { if (evt.target && event.target.matches("input[type='radio']")) { submitButton.disabled = false; + + // Show further help + // (right now, the same help is display for all the different categories) switch (evt.target.value) { case Subcategory.DEFINITION.name: - definition(); + showFurtherHelp(); break; case Subcategory.ARGUMENT.name: - argument(); + showFurtherHelp(); break; case Subcategory.STRATEGY.name: - strategy(); + showFurtherHelp(); break; } } }); - /* For the moment all three methods do the same, but as it's very likely that - we'll implement different behaviour in the future, I havn't removed the lines - in order to avoid code duplication. */ - function definition() { - $('#content-specific').empty() - .append('<%= j render partial: "annotations/form_content_further_help"%>'); - } - function argument() { - $('#content-specific').empty() - .append('<%= j render partial: "annotations/form_content_further_help"%>'); - } - function strategy() { + + function showFurtherHelp() { $('#content-specific').empty() .append('<%= j render partial: "annotations/form_content_further_help"%>'); } From fbfa6f52fa6702dbfa9cde1457ce4ae7e388ae0b Mon Sep 17 00:00:00 2001 From: Splines Date: Mon, 13 Nov 2023 20:35:01 +0100 Subject: [PATCH 12/20] Fix unwanted line indentation --- app/views/annotations/_form_content_further_help.html.erb | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/views/annotations/_form_content_further_help.html.erb b/app/views/annotations/_form_content_further_help.html.erb index 6ff5da1c4..f3921f2a3 100644 --- a/app/views/annotations/_form_content_further_help.html.erb +++ b/app/views/annotations/_form_content_further_help.html.erb @@ -9,8 +9,8 @@ <% end %> <% unless link_name.blank? %> <%= t('admin.annotation.further_help') %>
- - <%= link_name %> - + + <%= link_name %> + <% end %>
From 327f724f9b26dbd397194b80f673a187e6538eb4 Mon Sep 17 00:00:00 2001 From: Splines Date: Mon, 13 Nov 2023 21:59:30 +0100 Subject: [PATCH 13/20] Use bootstrap switch for preview toggle --- app/assets/stylesheets/annotations.scss | 8 -------- app/views/annotations/_form.html.erb | 11 +++++------ 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/app/assets/stylesheets/annotations.scss b/app/assets/stylesheets/annotations.scss index c83e39c89..e32fe68d2 100644 --- a/app/assets/stylesheets/annotations.scss +++ b/app/assets/stylesheets/annotations.scss @@ -24,14 +24,6 @@ #annotation-modal-content { width: 100%; } - #preview-toggle { - input:checked + .slider { - background-color: #0D6EFD; - } - .switch { - vertical-align: middle; - } - } #annotation-modal-preview { height: 543px; width: 35%; diff --git a/app/views/annotations/_form.html.erb b/app/views/annotations/_form.html.erb index 1e3412eca..c6c8e7985 100644 --- a/app/views/annotations/_form.html.erb +++ b/app/views/annotations/_form.html.erb @@ -24,13 +24,12 @@ <%= f.text_area :comment, class: 'form-control' %> -
-
+ <% if user_signed_in? %>
@@ -69,13 +70,14 @@
<% end %> + -