feat: Differentiate features available only for moderators (#10037)

openfoodfacts · Apr 2, 2024 · af657f2 · af657f2
1 parent 3168c46
commit af657f2
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git a/scss/_off.scss b/scss/_off.scss
@@ -1855,3 +1855,37 @@ a.panel_title {
   margin:0;
   padding: 0.25rem 0.5rem;
 }
+
+.moderator-only {
+  background-color: #FFCC00;
+  border: 2px solid #FFA500;
+  padding-left: 40px;
+  position: relative;
+  cursor: help;
+}
+
+.moderator-only::before {
+  content: "\1F6E1";
+  font-family: "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", sans-serif;
+  position: absolute;
+  left: 5px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 20px;
+}
+
+.moderator-only:hover::after {
+  content: "This feature is exclusive to moderators.";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: black;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 5px;
+  opacity: 1;
+  transition: opacity 0.3s, visibility 0.3s;
+  visibility: visible;
+}
+
diff --git a/templates/web/pages/product_edit/product_edit_form_display.tt.html b/templates/web/pages/product_edit/product_edit_form_display.tt.html
@@ -63,13 +63,13 @@ <h1>[% title %]</h1>
 
 
         [% IF moderator %]
-            <label for="new_code" id="label_new_code">[% label_new_code %]</label>
+            <label for="new_code" id="label_new_code" class="moderator-only">[% label_new_code %]</label>
             <input type="text" name="new_code" id="new_code" class="text" value="" /><br/>
         [% END %]
 
         [% IF moderator || owner_id %]
             <input type="checkbox" id="obsolete" name="obsolete" [% obsolete_checked %]/>
-            <label for="obsolete" class="checkbox_label">[% lang("obsolete") %]</label>
+            <label for="obsolete" class="checkbox_label moderator-only">[% lang("obsolete") %]</label>
             [% display_field_obsolete %]
         [% END %]
 
@@ -89,7 +89,7 @@ <h1>[% title %]</h1>
         [% IF moderator %]
             <ul id="manage_images_accordion" class="accordion" data-accordion>
                 <li class="accordion-navigation">
-                    <a href="#manage_images_drop">[% display_icon('collections') %] [% lang("manage_images") %]</a>
+                    <a href="#manage_images_drop" class="moderator-only">[% display_icon('collections') %] [% lang("manage_images") %]</a>
                     <div id="manage_images_drop" class="content" style="background:#eeeeee">
                         [% display_select_manage %]
                         <p>[% manage_images_info %]</p>
@@ -262,7 +262,9 @@ <h1>[% title %]</h1>
                     </div>
 
                 [% IF moderator %]
+                <div class="moderator-only">  
                     <div><a class="small button" onclick="\$('.nutriment_value').val('')">[% lang('remove_all_nutrient_values') %]</a></div>
+                </div>
                 [% END %]
 
                 <p class="asterisk">&rarr;*[% sep %]:[% lang('nutrition_data_table_asterisk') %]</p>
@@ -287,7 +289,7 @@ <h1>[% title %]</h1>
                 <p>[% lang('photos_and_data_check_description') %]</p>
 
                 <input type="checkbox" id="photos_and_data_checked" name="photos_and_data_checked" [% product_check_checked %] />
-                <label for="photos_and_data_checked" class="checkbox_label">[% lang('photos_and_data_checked') %]</label><br/>
+                <label for="photos_and_data_checked" class="checkbox_label moderator-only">[% lang('photos_and_data_checked') %]</label><br/>
 
                 [% IF product_ref_checked.defined && product_ref_checked == 'on' %]
                     <input type="checkbox" id="photos_and_data_rechecked" name="photos_and_data_rechecked" />