UX P2: keyboard nav, dark stage, shot checklist, presence, DE/EN chrome

ScriptumX/Dockerfile

@@ -12,6 +12,7 @@ WORKDIR /app
 RUN apt-get update \
     && apt-get install -y --no-install-recommends \
         build-essential \
+        gettext \
         libjpeg62-turbo-dev \
         zlib1g-dev \
         libfreetype6-dev \
@@ -26,6 +27,7 @@ COPY . /app
 
 RUN mkdir -p /data /app/static \
     && chmod +x /app/docker/entrypoint.sh \
+    && python manage.py compilemessages \
     && chown -R app:app /app /data
 
 USER app

ScriptumX/ScriptumX/settings.py

@@ -52,6 +52,7 @@
                 'django.template.context_processors.static',
                 'django.template.context_processors.tz',
                 'django.contrib.messages.context_processors.messages',
+                'X.context_processors.ux_chrome',
             ],
         },
     },
@@ -62,7 +63,14 @@
 LOGOUT_REDIRECT_URL = '/'
 
 TIME_ZONE = 'Europe/Berlin'
-LANGUAGE_CODE = 'de-de'
+LANGUAGE_CODE = 'de'
+LANGUAGES = (
+    ('de', 'Deutsch'),
+    ('en', 'English'),
+)
+LOCALE_PATHS = (
+    path.join(PROJECT_ROOT, 'locale'),
+)
 SITE_ID = 1
 USE_I18N = True
 USE_TZ = True
@@ -108,6 +116,7 @@
     'django.middleware.security.SecurityMiddleware',
     'whitenoise.middleware.WhiteNoiseMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.locale.LocaleMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',

ScriptumX/X/common.py

@@ -1,23 +1,24 @@
 from django.db.models import Q
+from django.utils.translation import gettext_lazy as _
 
 from X.models import Project, Script, Scene
 
 ###############################################################################
 
 # Base tab definitions. Use get_tab_list(env) for hrefs that embed project/script.
 _TAB_DEFS = (
-    {'id': 'P', 'name': 'Project', 'path': '/project', 'class': 'x-project', 'img': 'img/tab/project-24.png'},
-    {'id': 'C', 'name': 'Script', 'path': '/script', 'class': 'x-script', 'img': 'img/tab/script-24.png'},
-    {'id': 'S', 'name': 'Scene', 'path': '/scene', 'class': 'x-scene', 'img': 'img/tab/scene-24.png'},
-    {'id': 'H', 'name': 'Shot', 'path': '/shot', 'class': 'x-scene', 'img': 'img/tab/shot-24.png'},
-    {'id': 'R', 'name': 'Role', 'path': '/role', 'class': 'x-role', 'img': 'img/tab/role-24.png'},
-    {'id': 'L', 'name': 'Location', 'path': '/location', 'class': 'x-location', 'img': 'img/tab/location-24.png'},
-    {'id': 'T', 'name': 'Time', 'path': '/time', 'class': 'x-time', 'img': 'img/tab/time-24.png'},
-    {'id': 'F', 'name': 'Person', 'path': '/person', 'class': 'x-person', 'img': 'img/tab/person-24.png'},
-    {'id': 'G', 'name': 'Gadget', 'path': '/gadget', 'class': 'x-gadget', 'img': 'img/tab/gadget-24.png'},
-    {'id': 'X', 'name': 'SFX', 'path': '/sfx', 'class': 'x-sfx', 'img': 'img/tab/sfx-24.png'},
-    {'id': 'A', 'name': 'Audio', 'path': '/audio', 'class': 'x-audio', 'img': 'img/tab/audio-24.png'},
-    {'id': 'B', 'name': 'Plan', 'path': '/planner', 'class': 'x-planner', 'img': 'img/tab/scheduler-24.png'},
+    {'id': 'P', 'name': _('Project'), 'path': '/project', 'class': 'x-project', 'img': 'img/tab/project-24.png'},
+    {'id': 'C', 'name': _('Script'), 'path': '/script', 'class': 'x-script', 'img': 'img/tab/script-24.png'},
+    {'id': 'S', 'name': _('Scene'), 'path': '/scene', 'class': 'x-scene', 'img': 'img/tab/scene-24.png'},
+    {'id': 'H', 'name': _('Shot'), 'path': '/shot', 'class': 'x-scene', 'img': 'img/tab/shot-24.png'},
+    {'id': 'R', 'name': _('Role'), 'path': '/role', 'class': 'x-role', 'img': 'img/tab/role-24.png'},
+    {'id': 'L', 'name': _('Location'), 'path': '/location', 'class': 'x-location', 'img': 'img/tab/location-24.png'},
+    {'id': 'T', 'name': _('Time'), 'path': '/time', 'class': 'x-time', 'img': 'img/tab/time-24.png'},
+    {'id': 'F', 'name': _('Person'), 'path': '/person', 'class': 'x-person', 'img': 'img/tab/person-24.png'},
+    {'id': 'G', 'name': _('Gadget'), 'path': '/gadget', 'class': 'x-gadget', 'img': 'img/tab/gadget-24.png'},
+    {'id': 'X', 'name': _('SFX'), 'path': '/sfx', 'class': 'x-sfx', 'img': 'img/tab/sfx-24.png'},
+    {'id': 'A', 'name': _('Audio'), 'path': '/audio', 'class': 'x-audio', 'img': 'img/tab/audio-24.png'},
+    {'id': 'B', 'name': _('Plan'), 'path': '/planner', 'class': 'x-planner', 'img': 'img/tab/scheduler-24.png'},
 )
 
 

ScriptumX/X/context_processors.py

@@ -0,0 +1,33 @@
+"""Template context for UX chrome (theme, presence, language)."""
+from django.conf import settings
+from django.utils import translation
+
+from X.common import Env
+from X.ux import project_has_multi_users, theme_from_request
+
+
+def ux_chrome(request):
+    theme = theme_from_request(request)
+    presence_enabled = False
+    scene_id = None
+    presence_label = ''
+    try:
+        if getattr(request, 'user', None) and request.user.is_authenticated:
+            env = Env(request)
+            presence_enabled = project_has_multi_users(env.project)
+            scene_id = env.scene_id or None
+            if env.scene:
+                short = (env.scene.short or '').strip()
+                presence_label = short or (env.scene.name or '')[:40]
+    except Exception:
+        # Never break page render for chrome prefs
+        pass
+
+    return {
+        'ux_theme': theme,
+        'presence_enabled': presence_enabled,
+        'presence_scene_id': scene_id,
+        'presence_label': presence_label,
+        'ux_languages': getattr(settings, 'LANGUAGES', (('de', 'Deutsch'), ('en', 'English'))),
+        'ux_language': translation.get_language() or settings.LANGUAGE_CODE,
+    }

ScriptumX/X/static/X/css/ux-checklist.css

@@ -0,0 +1,146 @@
+/* Mobile-first on-set shot checklist */
+.ux-checklist-page {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 12px 12px 72px;
+}
+
+.ux-checklist-page h1 {
+  margin: 8px 0 4px;
+  font-size: 22px;
+}
+
+.ux-checklist-page .ux-check-sub {
+  margin-bottom: 16px;
+  color: #666;
+  font-size: 14px;
+}
+
+body.ux-stage-dark .ux-checklist-page .ux-check-sub {
+  color: #9aa3ad;
+}
+
+.ux-check-row {
+  display: block;
+  width: 100%;
+  margin: 0 0 10px;
+  padding: 14px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: #f5f5f5;
+  text-align: left;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ux-check-row:active,
+.ux-check-row.is-busy {
+  opacity: 0.75;
+}
+
+.ux-check-row.is-partial {
+  border-color: #ee5f5b;
+  background: #fff5f4;
+}
+
+.ux-check-row.is-done {
+  border-color: #62c462;
+  background: #f3fff3;
+}
+
+body.ux-stage-dark .ux-check-row {
+  background: #1e242b;
+  border-color: #3a424c;
+  color: #d8dde3;
+}
+
+body.ux-stage-dark .ux-check-row.is-partial {
+  background: #2a2222;
+  border-color: #ee5f5b;
+}
+
+body.ux-stage-dark .ux-check-row.is-done {
+  background: #1f2a22;
+  border-color: #62c462;
+}
+
+.ux-check-row-top {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.ux-check-mark {
+  font-size: 28px;
+  line-height: 1;
+  min-width: 32px;
+  color: #555;
+}
+
+.ux-check-row.is-done .ux-check-mark {
+  color: #3c763d;
+}
+
+.ux-check-meta {
+  flex: 1;
+  min-width: 0;
+}
+
+.ux-check-title {
+  font-size: 17px;
+  font-weight: 700;
+  margin: 0 0 4px;
+  word-wrap: break-word;
+}
+
+.ux-check-abstract {
+  font-size: 13px;
+  color: #666;
+  margin: 0;
+}
+
+body.ux-stage-dark .ux-check-abstract {
+  color: #9aa3ad;
+}
+
+.ux-check-bar {
+  margin-top: 10px;
+  height: 8px;
+  background: #ddd;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+body.ux-stage-dark .ux-check-bar {
+  background: #3a424c;
+}
+
+.ux-check-bar-fill {
+  height: 100%;
+  background: #ee5f5b;
+  width: 0;
+  transition: width 0.15s ease;
+}
+
+.ux-check-row.is-done .ux-check-bar-fill {
+  background: #62c462;
+}
+
+.ux-check-pct {
+  float: right;
+  font-size: 12px;
+  color: #888;
+  margin-top: 6px;
+}
+
+.ux-checklist-empty {
+  padding: 24px 8px;
+  text-align: center;
+  color: #888;
+}
+
+@media (min-width: 768px) {
+  .ux-checklist-page {
+    padding-top: 20px;
+  }
+}