Icon + text for edit button (#303)

MinBZK · Oct 22, 2024 · 1c54a8d · 1c54a8d
2 parents 06cfc9a + 4634be6
commit 1c54a8d
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 100 deletions.
diff --git a/amt/locale/base.pot b/amt/locale/base.pot
@@ -267,17 +267,18 @@ msgstr ""
 msgid "Algorithmic Management Toolkit (AMT)"
 msgstr ""
 
-#: amt/site/templates/macros/editable.html.j2:21
+#: amt/site/templates/macros/editable.html.j2:23
+#: amt/site/templates/macros/editable.html.j2:26
 #: amt/site/templates/projects/details_requirements.html.j2:55
 msgid "Edit"
 msgstr ""
 
-#: amt/site/templates/macros/editable.html.j2:58
+#: amt/site/templates/macros/editable.html.j2:62
 #: amt/site/templates/projects/details_measure_modal.html.j2:84
 msgid "Save"
 msgstr ""
 
-#: amt/site/templates/macros/editable.html.j2:63
+#: amt/site/templates/macros/editable.html.j2:67
 #: amt/site/templates/projects/details_measure_modal.html.j2:88
 msgid "Cancel"
 msgstr ""
@@ -295,10 +296,10 @@ msgid "Reviewing"
 msgstr ""
 
 #: amt/site/templates/macros/tasks.html.j2:32
-#: amt/site/templates/projects/details_base.html.j2:28
-#: amt/site/templates/projects/details_base.html.j2:54
-#: amt/site/templates/projects/details_base.html.j2:83
-#: amt/site/templates/projects/details_base.html.j2:106
+#: amt/site/templates/projects/details_base.html.j2:29
+#: amt/site/templates/projects/details_base.html.j2:55
+#: amt/site/templates/projects/details_base.html.j2:84
+#: amt/site/templates/projects/details_base.html.j2:107
 msgid "Done"
 msgstr ""
 
@@ -448,28 +449,28 @@ msgstr ""
 msgid "Select publication category"
 msgstr ""
 
-#: amt/site/templates/projects/details_base.html.j2:25
+#: amt/site/templates/projects/details_base.html.j2:26
 msgid "Does the algorithm meet the requirements?"
 msgstr ""
 
-#: amt/site/templates/projects/details_base.html.j2:50
-#: amt/site/templates/projects/details_base.html.j2:104
+#: amt/site/templates/projects/details_base.html.j2:51
+#: amt/site/templates/projects/details_base.html.j2:105
 msgid "To do"
 msgstr ""
 
-#: amt/site/templates/projects/details_base.html.j2:52
+#: amt/site/templates/projects/details_base.html.j2:53
 msgid "In progress"
 msgstr ""
 
-#: amt/site/templates/projects/details_base.html.j2:69
+#: amt/site/templates/projects/details_base.html.j2:70
 msgid "Go to all requirements"
 msgstr ""
 
-#: amt/site/templates/projects/details_base.html.j2:80
+#: amt/site/templates/projects/details_base.html.j2:81
 msgid "Which instruments are executed?"
 msgstr ""
 
-#: amt/site/templates/projects/details_base.html.j2:121
+#: amt/site/templates/projects/details_base.html.j2:122
 msgid "Go to all instruments"
 msgstr ""
 
@@ -601,7 +602,7 @@ msgid "Algorithm System name"
 msgstr ""
 
 #: amt/site/templates/projects/new.html.j2:26
-msgid "Your algorithm system name here"
+msgid "Name of the algorithm system"
 msgstr ""
 
 #: amt/site/templates/projects/new.html.j2:39

diff --git a/amt/locale/en_US/LC_MESSAGES/messages.mo b/amt/locale/en_US/LC_MESSAGES/messages.mo
diff --git a/amt/locale/en_US/LC_MESSAGES/messages.po b/amt/locale/en_US/LC_MESSAGES/messages.po
@@ -268,17 +268,18 @@ msgstr ""
 msgid "Algorithmic Management Toolkit (AMT)"
 msgstr ""
 
-#: amt/site/templates/macros/editable.html.j2:21
+#: amt/site/templates/macros/editable.html.j2:23
+#: amt/site/templates/macros/editable.html.j2:26
 #: amt/site/templates/projects/details_requirements.html.j2:55
 msgid "Edit"
 msgstr ""
 
-#: amt/site/templates/macros/editable.html.j2:58
+#: amt/site/templates/macros/editable.html.j2:62
 #: amt/site/templates/projects/details_measure_modal.html.j2:84
 msgid "Save"
 msgstr ""
 
-#: amt/site/templates/macros/editable.html.j2:63
+#: amt/site/templates/macros/editable.html.j2:67
 #: amt/site/templates/projects/details_measure_modal.html.j2:88
 msgid "Cancel"
 msgstr ""
@@ -296,10 +297,10 @@ msgid "Reviewing"
 msgstr ""
 
 #: amt/site/templates/macros/tasks.html.j2:32
-#: amt/site/templates/projects/details_base.html.j2:28
-#: amt/site/templates/projects/details_base.html.j2:54
-#: amt/site/templates/projects/details_base.html.j2:83
-#: amt/site/templates/projects/details_base.html.j2:106
+#: amt/site/templates/projects/details_base.html.j2:29
+#: amt/site/templates/projects/details_base.html.j2:55
+#: amt/site/templates/projects/details_base.html.j2:84
+#: amt/site/templates/projects/details_base.html.j2:107
 msgid "Done"
 msgstr ""
 
@@ -449,28 +450,28 @@ msgstr ""
 msgid "Select publication category"
 msgstr ""
 
-#: amt/site/templates/projects/details_base.html.j2:25
+#: amt/site/templates/projects/details_base.html.j2:26
 msgid "Does the algorithm meet the requirements?"
 msgstr ""
 
-#: amt/site/templates/projects/details_base.html.j2:50
-#: amt/site/templates/projects/details_base.html.j2:104
+#: amt/site/templates/projects/details_base.html.j2:51
+#: amt/site/templates/projects/details_base.html.j2:105
 msgid "To do"
 msgstr ""
 
-#: amt/site/templates/projects/details_base.html.j2:52
+#: amt/site/templates/projects/details_base.html.j2:53
 msgid "In progress"
 msgstr ""
 
-#: amt/site/templates/projects/details_base.html.j2:69
+#: amt/site/templates/projects/details_base.html.j2:70
 msgid "Go to all requirements"
 msgstr ""
 
-#: amt/site/templates/projects/details_base.html.j2:80
+#: amt/site/templates/projects/details_base.html.j2:81
 msgid "Which instruments are executed?"
 msgstr ""
 
-#: amt/site/templates/projects/details_base.html.j2:121
+#: amt/site/templates/projects/details_base.html.j2:122
 msgid "Go to all instruments"
 msgstr ""
 
@@ -602,7 +603,7 @@ msgid "Algorithm System name"
 msgstr ""
 
 #: amt/site/templates/projects/new.html.j2:26
-msgid "Your algorithm system name here"
+msgid "Name of the algorithm system"
 msgstr ""
 
 #: amt/site/templates/projects/new.html.j2:39

diff --git a/amt/locale/nl_NL/LC_MESSAGES/messages.mo b/amt/locale/nl_NL/LC_MESSAGES/messages.mo
diff --git a/amt/locale/nl_NL/LC_MESSAGES/messages.po b/amt/locale/nl_NL/LC_MESSAGES/messages.po
@@ -276,17 +276,18 @@ msgstr "Er is een fout opgetreden. Probeer het later opnieuw."
 msgid "Algorithmic Management Toolkit (AMT)"
 msgstr "Algoritme Management Toolkit (AMT)"
 
-#: amt/site/templates/macros/editable.html.j2:21
+#: amt/site/templates/macros/editable.html.j2:23
+#: amt/site/templates/macros/editable.html.j2:26
 #: amt/site/templates/projects/details_requirements.html.j2:55
 msgid "Edit"
-msgstr "Bewerken"
+msgstr "Bewerk"
 
-#: amt/site/templates/macros/editable.html.j2:58
+#: amt/site/templates/macros/editable.html.j2:62
 #: amt/site/templates/projects/details_measure_modal.html.j2:84
 msgid "Save"
 msgstr "Opslaan"
 
-#: amt/site/templates/macros/editable.html.j2:63
+#: amt/site/templates/macros/editable.html.j2:67
 #: amt/site/templates/projects/details_measure_modal.html.j2:88
 msgid "Cancel"
 msgstr "Annuleren"
@@ -304,10 +305,10 @@ msgid "Reviewing"
 msgstr "Beoordelen"
 
 #: amt/site/templates/macros/tasks.html.j2:32
-#: amt/site/templates/projects/details_base.html.j2:28
-#: amt/site/templates/projects/details_base.html.j2:54
-#: amt/site/templates/projects/details_base.html.j2:83
-#: amt/site/templates/projects/details_base.html.j2:106
+#: amt/site/templates/projects/details_base.html.j2:29
+#: amt/site/templates/projects/details_base.html.j2:55
+#: amt/site/templates/projects/details_base.html.j2:84
+#: amt/site/templates/projects/details_base.html.j2:107
 msgid "Done"
 msgstr "Afgerond"
 
@@ -467,28 +468,28 @@ msgstr "Selecteer levenscyclus"
 msgid "Select publication category"
 msgstr "Selecteer publicatiecategorie"
 
-#: amt/site/templates/projects/details_base.html.j2:25
+#: amt/site/templates/projects/details_base.html.j2:26
 msgid "Does the algorithm meet the requirements?"
 msgstr "Voldoet het algoritme aan de vereisten?"
 
-#: amt/site/templates/projects/details_base.html.j2:50
-#: amt/site/templates/projects/details_base.html.j2:104
+#: amt/site/templates/projects/details_base.html.j2:51
+#: amt/site/templates/projects/details_base.html.j2:105
 msgid "To do"
 msgstr "Te doen"
 
-#: amt/site/templates/projects/details_base.html.j2:52
+#: amt/site/templates/projects/details_base.html.j2:53
 msgid "In progress"
 msgstr "Onderhanden"
 
-#: amt/site/templates/projects/details_base.html.j2:69
+#: amt/site/templates/projects/details_base.html.j2:70
 msgid "Go to all requirements"
 msgstr "Ga naar alle Vereisten"
 
-#: amt/site/templates/projects/details_base.html.j2:80
+#: amt/site/templates/projects/details_base.html.j2:81
 msgid "Which instruments are executed?"
 msgstr "Welke instrumenten zijn uitgevoerd?"
 
-#: amt/site/templates/projects/details_base.html.j2:121
+#: amt/site/templates/projects/details_base.html.j2:122
 msgid "Go to all instruments"
 msgstr "Ga naar all instrumenten"
 
@@ -619,11 +620,11 @@ msgstr "Creëer een Algoritme Systeem"
 
 #: amt/site/templates/projects/new.html.j2:23
 msgid "Algorithm System name"
-msgstr "Algoritmekader"
+msgstr "Naam algoritme systeem"
 
 #: amt/site/templates/projects/new.html.j2:26
-msgid "Your algorithm system name here"
-msgstr "Jouw algoritme systeem naam hier"
+msgid "Name of the algorithm system"
+msgstr "Naam van het algoritme systeem"
 
 #: amt/site/templates/projects/new.html.j2:39
 msgid "Select the lifecycle your algorithm system is currently in."

diff --git a/amt/site/templates/macros/editable.html.j2 b/amt/site/templates/macros/editable.html.j2
@@ -14,57 +14,62 @@
                 {{ value }}
             {% endif %}
         {% endif %}
-        <span class="utrecht-icon rvo-icon rvo-icon-bewerken rvo-icon--sm"
+        <span class="rvo-link rvo-link--hover rvo-link--with-icon"
               hx-get="edit/{{ field_path | replace('.', '/') }}"
               hx-swap="outerHTML"
-              role="img"
-              aria-label="{% trans %}Edit{% endtrans %}"
-              style="cursor: pointer"></span>
-    </span>
-{% endmacro %}
-{% macro edit(obj, field_path) %}
-    <span hx-target="this">
-        <form hx-put="update/{{ field_path | replace('.', '/') }}"
-              hx-ext="json-enc"
-              hx-headers='{"X-CSRF-Token": "{{ csrftoken }}"}'
-              hx-swap="outerHTML">
-            <div class="rvo-layout-grid-container">
-                <div class="rvo-layout-grid rvo-layout-gap--md rvo-layout-grid-columns--two rvo-layout-grid-layout--1fr">
-                    <div>
-                        {% set value = nested_value(obj, field_path) %}
-                        {% if is_nested_enum(obj, field_path) %}
-                            <div class="rvo-select-wrapper">
-                                <select id="field"
-                                        name="value"
-                                        class="utrecht-select utrecht-select--html-select">
-                                    {% for e in nested_enum(obj, field_path, language) %}
-                                        <option value="{{ e.value }}"
-                                                {% if e.value == value %}selected="selected"{% endif %}>
-                                            {{ e.display_value }}
-                                        </option>
-                                    {% endfor %}
-                                </select>
-                            </div>
-                        {% else %}
-                            <input type="text"
-                                   name="value"
-                                   value="{{ value }}"
-                                   class="utrecht-textbox utrecht-textbox--html-input" />
-                        {% endif %}
-                    </div>
-                    <div>
-                        <button type="submit"
-                                class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-md">
-                            {% trans %}Save{% endtrans %}
-                        </button>
-                        <button hx-get="cancel/{{ field_path | replace('.', '/') }}"
-                                hx-swap="outerHTML"
-                                class="utrecht-button utrecht-button--secondary-action utrecht-button-group__align-right utrecht-button--rvo-md">
-                            {% trans %}Cancel{% endtrans %}
-                        </button>
+              style="cursor: pointer;
+                     float:right">
+            <span class="utrecht-icon rvo-icon rvo-icon-bewerken rvo-icon--md rvo-icon--hemelblauw"
+                  role="img"
+                  aria-label="{% trans %}Edit{% endtrans %}"></span> <a class="rvo-link"
+    href="#"
+    style="font-size: 14px !important;
+           color: rgb(0, 123, 199) !important">{% trans %}Edit{% endtrans %}</a>
+        </span>
+    {% endmacro %}
+    {% macro edit(obj, field_path) %}
+        <span hx-target="this">
+            <form hx-put="update/{{ field_path | replace('.', '/') }}"
+                  hx-ext="json-enc"
+                  hx-headers='{"X-CSRF-Token": "{{ csrftoken }}"}'
+                  hx-swap="outerHTML">
+                <div class="rvo-layout-grid-container">
+                    <div class="rvo-layout-grid rvo-layout-gap--md rvo-layout-grid-columns--two rvo-layout-grid-layout--1fr">
+                        <div>
+                            {% set value = nested_value(obj, field_path) %}
+                            {% if is_nested_enum(obj, field_path) %}
+                                <div class="rvo-select-wrapper">
+                                    <select id="field"
+                                            name="value"
+                                            class="utrecht-select utrecht-select--html-select">
+                                        {% for e in nested_enum(obj, field_path, language) %}
+                                            <option value="{{ e.value }}"
+                                                    {% if e.value == value %}selected="selected"{% endif %}>
+                                                {{ e.display_value }}
+                                            </option>
+                                        {% endfor %}
+                                    </select>
+                                </div>
+                            {% else %}
+                                <input type="text"
+                                       name="value"
+                                       value="{{ value }}"
+                                       class="utrecht-textbox utrecht-textbox--html-input" />
+                            {% endif %}
+                        </div>
+                        <div>
+                            <button type="submit"
+                                    class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-md">
+                                {% trans %}Save{% endtrans %}
+                            </button>
+                            <button hx-get="cancel/{{ field_path | replace('.', '/') }}"
+                                    hx-swap="outerHTML"
+                                    class="utrecht-button utrecht-button--secondary-action utrecht-button-group__align-right utrecht-button--rvo-md">
+                                {% trans %}Cancel{% endtrans %}
+                            </button>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </form>
-    </span>
-{% endmacro %}
+            </form>
+        </span>
+    {% endmacro %}
diff --git a/amt/site/templates/projects/details_base.html.j2 b/amt/site/templates/projects/details_base.html.j2
@@ -1,4 +1,5 @@
 {% extends 'layouts/base.html.j2' %}
+{% from "macros/editable.html.j2" import editable with context %}
 {% block title %}{{ project.name }} | AMT{% endblock %}
 {% block content %}
     <div id="measure-modal" class="minbzk-modal display-none">
@@ -10,7 +11,7 @@
     </div>
     <div class="rvo-max-width-layout rvo-max-width-layout--md rvo-max-width-layout-inline-padding--none">
         <div class="rvo-content">
-            <h1 class="utrecht-heading-1">{{ project.name }}</h1>
+            <h1 class="utrecht-heading-1">{{ editable(project, "name") }}</h1>
         </div>
         <!-- Requirements Widget -->
         <div class="rvo-layout-grid-container">

diff --git a/amt/site/templates/projects/new.html.j2 b/amt/site/templates/projects/new.html.j2
@@ -23,7 +23,7 @@
                                     <label class="rvo-label rvo-label--required">{% trans %}Algorithm System name{% endtrans %}</label>
                                 </div>
                                 <input id="name"
-                                       placeholder="{% trans %}Your algorithm system name here{% endtrans %}"
+                                       placeholder="{% trans %}Name of the algorithm system{% endtrans %}"
                                        name="name"
                                        type="text"
                                        class="utrecht-textbox utrecht-textbox--html-input"