Translator Directory: UI to Foundation 6

TYPE: Feature
LINK: OGC-1748

src/onegov/org/views/settings.py

@@ -4,7 +4,7 @@
 from dectate import Query
 from markupsafe import Markup
 from webob.exc import HTTPForbidden
-from onegov.core.elements import Link, Confirm, Intercooler
+from onegov.core.elements import Link, Confirm, Intercooler, BackLink
 from onegov.core.security import Secret
 from onegov.core.templates import render_macro
 from onegov.form import Form
@@ -89,6 +89,8 @@ def handle_generic_settings(
 ) -> 'RenderData | Response':
 
     layout = layout or SettingsLayout(self, request, title)
+    layout.edit_mode = True
+    layout.editmode_links[1] = BackLink(attrs={'class': 'cancel-link'})
     request.include('fontpreview')
 
     if form.submitted(request):

src/onegov/town6/templates/macros.pt

@@ -382,16 +382,16 @@
 </metal:directory>
 
 <metal:form define-macro="form">
-    <form tal:attributes="action form.action|'.';data-image-upload-url layout.image_upload_json_url; data-image-list-url layout.image_list_url;data-file-upload-url layout.file_upload_json_url; data-file-list-url layout.file_list_url; data-sitecollection-url layout.sitecollection_url; id form_id|''" class="${form.css_class|''}" method="${form.method|'POST'}" enctype="multipart/form-data">
+    <form tal:attributes="action form.action|'.';data-image-upload-url layout.image_upload_json_url; data-image-list-url layout.image_list_url;data-file-upload-url layout.file_upload_json_url; data-file-list-url layout.file_list_url; data-sitecollection-url layout.sitecollection_url; id form_id|''" class="${form.css_class|''}" method="${form.method|'POST'}" enctype="multipart/form-data" tal:define="form_two_columns form_two_columns|False">
         <tal:b repeat="fieldset form.fieldsets">
             <fieldset tal:condition="fieldset.is_visible" id="fieldset-${fieldset.label.lower().replace(' ', '-')}">
                 <legend>${fieldset.label}</legend>
-                <div class="formfields">
+                <div class="formfields ${'grid-x grid-padding-x wrapper' if form_two_columns else ''}">
                     <metal:fields use-macro="layout.macros['fields']" tal:define="fields fieldset.fields.values()" />
                 </div>
             </fieldset>
             <tal:b condition="not:fieldset.is_visible">
-                <div class="formfields">
+                <div class="formfields ${'grid-x grid-padding-x wrapper' if form_two_columns else ''}">
                     <metal:fields use-macro="layout.macros['fields']" tal:define="fields fieldset.fields.values()" />
                 </div>
             </tal:b>
@@ -421,7 +421,7 @@
 
 <metal:fields define-macro="fields">
     <tal:b repeat="field fields">
-        <div tal:define="hidden form.is_hidden(field)|False" class="grid-x field-${field.id} field-type-${field.type.lower()} ${'field-hidden' if hidden else ''}">
+        <div tal:define="hidden form.is_hidden(field)|False" class="${'small-12 large-6 cell' if form_two_columns else 'grid-x'} field-${field.id} field-type-${field.type.lower()} ${'field-hidden' if hidden else ''}">
             <div class="large-12 cell">
                 <tal:b define="input_type field.widget.input_type|None">
                     <tal:b condition="input_type == 'hidden'">

src/onegov/town6/templates/usermanagement.pt

@@ -4,8 +4,8 @@
     </tal:b>
     <tal:b metal:fill-slot="content">
         <div class="grid-x grid-padding-x">
-            <div class="cell small-12 medium-9 small-order-2 medium-order-1 large-order-1">
-                <table class="usermanagement stack" tal:define="enable_yubikey request.app.enable_yubikey; enable_mtan request.app.mtan_second_factor_enabled">
+            <div class="medium-7 cell main-content small-order-2 medium-order-1 large-order-1">
+                <table class="usermanagement stack hover table" tal:define="enable_yubikey request.app.enable_yubikey; enable_mtan request.app.mtan_second_factor_enabled">
                     <tal:b repeat="role ('admin', 'editor', 'member')">
                         <thead>
                             <tr>
@@ -66,22 +66,24 @@
                     </tal:b>
                 </table>
             </div>
-            <div class="cell small-12 medium-3 filter-panel small-order-1 medium-order-2 large-order-2">
-                <div tal:condition="filters['active']|nothing" class="filter-active">
-                    <h3 class="filter-title" i18n:translate>State</h3>
-                    <div metal:use-macro="layout.macros['tags']" tal:define="tags filters['active']" />
-                </div>
-                <div tal:condition="filters['role']|nothing" class="filter-role">
-                    <h3 class="filter-title" i18n:translate>Role</h3>
-                    <div metal:use-macro="layout.macros['tags']" tal:define="tags filters['role']" />
-                </div>
-                <div tal:condition="filters['tag']|nothing" class="filter-tags">
-                    <h3 class="filter-title" i18n:translate>Tags</h3>
-                    <div metal:use-macro="layout.macros['tags']" tal:define="tags filters['tag']" />
-                </div>
-                <div tal:condition="filters['source']|nothing" class="filter-source">
-                    <h2 class="filter-title" i18n:translate>Source</h2>
-                    <div metal:use-macro="layout.macros['tags']" tal:define="tags filters['source']" />
+            <div class="medium-4 cell medium-offset-1 sidebar filter-panel small-order-1 medium-order-2 large-order-2" id="right-sidebar">
+                <div class="sidebar-wrapper">
+                    <div tal:condition="filters['active']|nothing" class="side-panel filter-active">
+                        <h2 class="filter-title h3" i18n:translate>State</h2>
+                        <div metal:use-macro="layout.macros['tags']" tal:define="tags filters['active']" />
+                    </div>
+                    <div tal:condition="filters['role']|nothing" class="side-panel filter-role">
+                        <h2 class="filter-title h3" i18n:translate>Role</h2>
+                        <div metal:use-macro="layout.macros['tags']" tal:define="tags filters['role']" />
+                    </div>
+                    <div tal:condition="filters['tag']|nothing" class="side-panel filter-tags">
+                        <h2 class="filter-title h3" i18n:translate>Tags</h2>
+                        <div metal:use-macro="layout.macros['tags']" tal:define="tags filters['tag']" />
+                    </div>
+                    <div tal:condition="filters['source']|nothing" class="side-panel filter-source">
+                        <h2 class="filter-title h3" i18n:translate>Source</h2>
+                        <div metal:use-macro="layout.macros['tags']" tal:define="tags filters['source']" />
+                    </div>
                 </div>
             </div>
         </div>

src/onegov/town6/theme/styles/alert.scss

@@ -7,7 +7,7 @@ $success-icon: '\f058';
 $warning-icon: '\f071';
 
 #alert-boxes {
-    .alert-box {
+    .alert-box, .callout {
         margin-top: 1rem;
 
         &:last-child {

src/onegov/town6/theme/styles/header.scss

@@ -16,6 +16,7 @@ $edit-link-icon: '\f044';
 $save-link-icon: '\f0c7';
 $cancel-link-icon: '\f00d';
 $export-link-icon: '\f019';
+$envelope-icon: '\f0e0';
 $file-link-icon: '\f0c6';
 $image-link-icon: '\f03e';
 $import-link-icon: '\f093';
@@ -515,6 +516,7 @@ $editbar-fg-color-active: $white;
     .cancel-link::before { @include icon-bold($cancel-link-icon); }
     .move-link::before { @include icon-bold($move-link-icon); }
     .export-link::before { @include icon-bold($export-link-icon); }
+    .envelope::before { @include icon-bold($envelope-icon); }
     .file-url::before { @include icon($file-link-icon); }
     .image-url::before { @include icon($image-link-icon); }
     .import-link::before { @include icon-bold($import-link-icon); }

src/onegov/town6/theme/styles/town6.scss

@@ -114,13 +114,13 @@ footer {
 .main-title {
     line-height: 1.2;
     margin-bottom: 2rem;
-    max-width: 30ex;
 
     .small {
         display: block;
         font-size: 1.5rem;
         font-weight: normal;
     }
+
 }
 
 /*
@@ -1132,3 +1132,22 @@ ul.recipients {
         display: none;
     }
 }
+
+
+.chosen-container-multi {
+    .chosen-choices {
+        background: $white !important;
+        border: {
+            radius: 0 !important;
+        }
+        box-shadow: none !important;
+        padding: ($form-spacing / 3) ($form-spacing / 2) !important;
+
+        li.search-choice {
+            background: none !important;
+            border: 0 !important;
+            box-shadow: none !important;
+            float: none;
+        }
+    }
+}

src/onegov/town6/views/usermanagement.py

@@ -12,6 +12,7 @@
 
 from typing import TYPE_CHECKING
 if TYPE_CHECKING:
+    from collections.abc import Mapping
     from onegov.core.types import RenderData
     from onegov.org.forms import ManageUserForm
     from onegov.town6.request import TownRequest
@@ -25,10 +26,11 @@
 )
 def town_view_usermanagement(
     self: UserCollection,
-    request: 'TownRequest'
+    request: 'TownRequest',
+    roles: 'Mapping[str, str] | None' = None
 ) -> 'RenderData':
     return view_usermanagement(
-        self, request, UserManagementLayout(self, request))
+        self, request, UserManagementLayout(self, request), roles=roles)
 
 
 @TownApp.form(

src/onegov/translator_directory/app.py

@@ -2,9 +2,9 @@
 from onegov.core import utils
 from onegov.gis import Coordinates
 from onegov.translator_directory.initial_content import create_new_organisation
-from onegov.org import OrgApp
-from onegov.org.app import get_common_asset as default_common_asset
-from onegov.org.app import get_i18n_localedirs as get_org_i18n_localedirs
+from onegov.town6 import TownApp
+from onegov.town6.app import get_common_asset as default_common_asset
+from onegov.town6.app import get_i18n_localedirs as get_town_i18n_localedirs
 from onegov.org.models import Organisation, GeneralFile, GeneralFileCollection
 from onegov.translator_directory.request import TranslatorAppRequest
 from onegov.translator_directory.theme import TranslatorDirectoryTheme
@@ -19,7 +19,7 @@
     from onegov.gis.models.coordinates import AnyCoordinates
 
 
-class TranslatorDirectoryApp(OrgApp):
+class TranslatorDirectoryApp(TownApp):
 
     send_ticket_statistics = False
     request_class = TranslatorAppRequest
@@ -112,7 +112,7 @@ def get_create_new_organisation_factory(
 @TranslatorDirectoryApp.setting(section='i18n', name='localedirs')
 def get_i18n_localedirs() -> list[str]:
     mine = utils.module_path('onegov.translator_directory', 'locale')
-    return [mine] + get_org_i18n_localedirs()
+    return [mine] + get_town_i18n_localedirs()
 
 
 @TranslatorDirectoryApp.webasset_path()

src/onegov/translator_directory/custom.py

@@ -1,4 +1,5 @@
 from onegov.core.elements import Link
+from onegov.core.utils import Bunch
 from onegov.org.custom import logout_path
 from onegov.org.elements import LinkGroup
 from onegov.org.models import GeneralFileCollection
@@ -18,6 +19,7 @@
     from collections.abc import Iterator
     from onegov.core.types import RenderData
     from onegov.translator_directory.request import TranslatorAppRequest
+    from onegov.town6.layout import NavigationEntry
 
 
 def get_global_tools(
@@ -148,28 +150,41 @@ def get_global_tools(
         )
 
 
-def get_top_navigation(request: 'TranslatorAppRequest') -> 'Iterator[Link]':
+def get_top_navigation(
+        request: 'TranslatorAppRequest') -> 'Iterator[NavigationEntry]':
 
     # inject an activites link in front of all top navigation links
     if request.is_manager or request.is_member:
-        yield Link(
-            text=_("Translators"),
-            url=request.class_link(TranslatorCollection)
+        yield (  # type:ignore[misc]
+            Bunch(id=-1, access='public', published=True),
+            Link(
+                text=_("Translators"),
+                url=request.class_link(TranslatorCollection)
+            ),
+            ()
         )
 
     if (
         request.is_translator
         and (translator := request.current_user.translator)  # type:ignore
     ):
-        yield Link(
-            text=_("Personal Information"),
-            url=request.link(translator)
+        yield (  # type:ignore[misc]
+            Bunch(id=-1, access='public', published=True),
+            Link(
+                text=_("Personal Information"),
+                url=request.link(translator)
+            ),
+            ()
         )
 
     if request.is_manager:
-        yield Link(
-            text=_('Languages'),
-            url=request.class_link(LanguageCollection)
+        yield (  # type:ignore[misc]
+            Bunch(id=-1, access='public', published=True),
+            Link(
+                text=_('Languages'),
+                url=request.class_link(LanguageCollection)
+            ),
+            ()
         )
 
     layout = DefaultLayout(request.app.org, request)

src/onegov/translator_directory/layout.py

@@ -7,7 +7,7 @@
 from onegov.translator_directory import _
 from onegov.core.elements import Block, Link, LinkGroup, Confirm, Intercooler
 from onegov.core.utils import linkify
-from onegov.org.layout import DefaultLayout as BaseLayout
+from onegov.town6.layout import DefaultLayout as BaseLayout
 from onegov.org.models import Organisation
 from onegov.translator_directory.collections.documents import (
     TranslatorDocumentCollection)

src/onegov/translator_directory/request.py

@@ -1,14 +1,14 @@
 from functools import cached_property
 
-from onegov.org.request import OrgRequest
+from onegov.town6.request import TownRequest
 
 
 from typing import TYPE_CHECKING
 if TYPE_CHECKING:
     from onegov.translator_directory.app import TranslatorDirectoryApp
 
 
-class TranslatorAppRequest(OrgRequest):
+class TranslatorAppRequest(TownRequest):
 
     app: 'TranslatorDirectoryApp'
 

src/onegov/translator_directory/templates/languages.pt

@@ -13,7 +13,7 @@
                             </p>
                             <h4 i18n:translate="">By letter</h4>
                             <div tal:condition="languages" metal:use-macro="layout.macros['tags']" tal:define="tags letters" />
-                            <table id="languages-table" class="fullwidth" tal:condition="languages">
+                            <table id="languages-table" class="fullwidth table hover" tal:condition="languages">
                                 <thead>
                                     <th i18n:translate="">Name</th>
                                     <th i18n:translate="">Native speakers</th>
@@ -32,7 +32,7 @@
                                 </tbody>
                             </table>
                             <div class="pagination-centered">
-                                <div metal:use-macro="layout.macros['pagination']" tal:define="collection model; current_page model;" />
+                                <div metal:use-macro="layout.macros['pagination']" tal:define="collection model; current_page model; pagination_centered True" />
                             </div>
                         </div>
                     </div>