WuttaWeb 0.21.5__tar.gz → 0.22.0__tar.gz

{wuttaweb-0.21.5 → wuttaweb-0.22.0}/CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to wuttaweb will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## v0.22.0 (2025-06-29)
+
+### Feat
+
+- add basic theme system
+
+### Fix
+
+- improve styles for testing watermark background image
+- fix timezone offset bug for datepicker
+
 ## v0.21.5 (2025-02-21)
 
 ### Fix

{wuttaweb-0.21.5 → wuttaweb-0.22.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: WuttaWeb
-Version: 0.21.5
+Version: 0.22.0
 Summary: Web App for Wutta Framework
 Project-URL: Homepage, https://wuttaproject.org/
 Project-URL: Repository, https://forgejo.wuttaproject.org/wutta/wuttaweb
@@ -39,7 +39,7 @@ Requires-Dist: pyramid-tm
 Requires-Dist: pyramid>=2
 Requires-Dist: waitress
 Requires-Dist: webhelpers2
-Requires-Dist: wuttjamaican[db]>=0.20.4
+Requires-Dist: wuttjamaican[db]>=0.20.6
 Requires-Dist: zope-sqlalchemy>=1.5
 Provides-Extra: continuum
 Requires-Dist: wutta-continuum; extra == 'continuum'

{wuttaweb-0.21.5 → wuttaweb-0.22.0}/pyproject.toml

@@ -6,7 +6,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "WuttaWeb"
-version = "0.21.5"
+version = "0.22.0"
 description = "Web App for Wutta Framework"
 readme = "README.md"
 authors = [{name = "Lance Edgar", email = "lance@wuttaproject.org"}]
@@ -44,7 +44,7 @@ dependencies = [
         "pyramid_tm",
         "waitress",
         "WebHelpers2",
-        "WuttJamaican[db]>=0.20.4",
+        "WuttJamaican[db]>=0.20.6",
         "zope.sqlalchemy>=1.5",
 ]
 

{wuttaweb-0.21.5 → wuttaweb-0.22.0}/src/wuttaweb/app.py

@@ -2,7 +2,7 @@
 ################################################################################
 #
 #  wuttaweb -- Web App for Wutta Framework
-#  Copyright © 2024 Lance Edgar
+#  Copyright © 2024-2025 Lance Edgar
 #
 #  This file is part of Wutta Framework.
 #
@@ -35,6 +35,7 @@ from pyramid.config import Configurator
 
 import wuttaweb.db
 from wuttaweb.auth import WuttaSecurityPolicy
+from wuttaweb.util import get_effective_theme, get_theme_template_path
 
 
 log = logging.getLogger(__name__)
@@ -132,6 +133,9 @@ def make_pyramid_config(settings):
     settings.setdefault('pyramid_deform.template_search_path',
                         'wuttaweb:templates/deform')
 
+    # update settings per current theme
+    establish_theme(settings)
+
     pyramid_config = Configurator(settings=settings)
 
     # configure user authorization / authentication
@@ -248,3 +252,33 @@ def make_asgi_app(main_app=None, config=None):
     """
     wsgi_app = make_wsgi_app(main_app, config=config)
     return WsgiToAsgi(wsgi_app)
+
+
+def establish_theme(settings):
+    """
+    Establishes initial theme on app startup.  This mostly involves
+    updating the given ``settings`` dict.
+
+    This function is called automatically from within
+    :func:`make_pyramid_config()`.
+
+    It will first call :func:`~wuttaweb.util.get_effective_theme()` to
+    read the current theme from the :term:`settings table`, and store
+    this within ``settings['wuttaweb.theme']``.
+
+    It then calls :func:`~wuttaweb.util.get_theme_template_path()` and
+    will update ``settings['mako.directories']`` such that the theme's
+    template path is listed first.
+    """
+    config = settings['wutta_config']
+
+    theme = get_effective_theme(config)
+    settings['wuttaweb.theme'] = theme
+
+    directories = settings['mako.directories']
+    if isinstance(directories, str):
+        directories = config.parse_list(directories)
+
+    path = get_theme_template_path(config)
+    directories.insert(0, path)
+    settings['mako.directories'] = directories

{wuttaweb-0.21.5 → wuttaweb-0.22.0}/src/wuttaweb/subscribers.py

@@ -2,7 +2,7 @@
 ################################################################################
 #
 #  wuttaweb -- Web App for Wutta Framework
-#  Copyright © 2024 Lance Edgar
+#  Copyright © 2024-2025 Lance Edgar
 #
 #  This file is part of Wutta Framework.
 #
@@ -38,11 +38,13 @@ hooks contained here, depending on the circumstance.
 import functools
 import json
 import logging
+from collections import OrderedDict
 
 from pyramid import threadlocal
 
 from wuttaweb import helpers
 from wuttaweb.db import Session
+from wuttaweb.util import get_available_themes
 
 
 log = logging.getLogger(__name__)
@@ -79,6 +81,43 @@ def new_request(event):
        Flag indicating whether the frontend should be displayed using
        Vue 3 + Oruga (if ``True``), or else Vue 2 + Buefy (if
        ``False``).  This flag is ``False`` by default.
+
+    .. function:: request.register_component(tagname, classname)
+
+       Request method which registers a Vue component for use within
+       the app templates.
+
+       :param tagname: Component tag name as string.
+
+       :param classname: Component class name as string.
+
+       This is meant to be analogous to the ``Vue.component()`` call
+       which is part of Vue 2.  It is good practice to always call
+       both at the same time/place:
+
+       .. code-block:: mako
+
+          ## define component template
+          <script type="text/x-template" id="my-example-template">
+            <div>my example</div>
+          </script>
+
+          <script>
+
+            ## define component logic
+            const MyExample = {
+                template: 'my-example-template'
+            }
+
+            ## register the component both ways here..
+
+            ## this is for Vue 2 - note the lack of quotes for classname
+            Vue.component('my-example', MyExample)
+
+            ## this is for Vue 3 - note the classname must be quoted
+            <% request.register_component('my-example', 'MyExample') %>
+
+          </script>
     """
     request = event.request
     config = request.registry.settings['wutta_config']
@@ -104,10 +143,34 @@ def new_request(event):
         if spec:
             func = app.load_object(spec)
             return func(request)
+
+        theme = request.registry.settings.get('wuttaweb.theme')
+        if theme == 'butterfly':
+            return True
         return False
 
     request.set_property(use_oruga, reify=True)
 
+    def register_component(tagname, classname):
+        """
+        Register a Vue 3 component, so the base template knows to
+        declare it for use within the app (page).
+        """
+        if not hasattr(request, '_wuttaweb_registered_components'):
+            request._wuttaweb_registered_components = OrderedDict()
+
+        if tagname in request._wuttaweb_registered_components:
+            log.warning("component with tagname '%s' already registered "
+                        "with class '%s' but we are replacing that "
+                        "with class '%s'",
+                        tagname,
+                        request._wuttaweb_registered_components[tagname],
+                        classname)
+
+        request._wuttaweb_registered_components[tagname] = classname
+
+    request.register_component = register_component
+
 
 def default_user_getter(request, db_session=None):
     """
@@ -290,6 +353,23 @@ def before_render(event):
 
        Reference to the request method,
        :meth:`~pyramid:pyramid.request.Request.route_url()`.
+
+    .. data:: 'theme'
+
+       String name of the current theme.  This will be ``'default'``
+       unless a custom theme is in effect.
+
+    .. data:: 'expose_theme_picker'
+
+       Boolean indicating whether the theme picker should *ever* be
+       exposed.  For a user to see it, this flag must be true *and*
+       the user must have permission to change theme.
+
+    .. data:: 'available_themes'
+
+       List of theme names from which user may choose, if they are
+       allowed to change theme.  Only set/relevant if
+       ``expose_theme_picker`` is true (see above).
     """
     request = event.get('request') or threadlocal.get_current_request()
     config = request.wutta_config
@@ -311,6 +391,13 @@ def before_render(event):
     menus = web.get_menu_handler()
     context['menus'] = menus.do_make_menus(request)
 
+    # theme
+    context['theme'] = request.registry.settings.get('wuttaweb.theme', 'default')
+    context['expose_theme_picker'] = config.get_bool('wuttaweb.themes.expose_picker',
+                                                     default=False)
+    if context['expose_theme_picker']:
+        context['available_themes'] = get_available_themes(config)
+
 
 def includeme(config):
     config.add_subscriber(new_request, 'pyramid.events.NewRequest')

{wuttaweb-0.21.5 → wuttaweb-0.22.0}/src/wuttaweb/templates/appinfo/configure.mako

@@ -39,6 +39,13 @@
                   @input="settingsNeedSaved = true">
         Production Mode
       </b-checkbox>
+      <span style="width: 1rem;" />
+      <b-checkbox name="wuttaweb.themes.expose_picker"
+                  v-model="simpleSettings['wuttaweb.themes.expose_picker']"
+                  native-value="true"
+                  @input="settingsNeedSaved = true">
+        Expose Theme Picker
+      </b-checkbox>
     </b-field>
 
     <b-field label="Menu Handler">

{wuttaweb-0.21.5 → wuttaweb-0.22.0}/src/wuttaweb/templates/base.mako

@@ -130,7 +130,7 @@
     }
 
     % if not request.wutta_config.production():
-        html, .navbar, .footer {
+        html, body, .navbar, .footer {
           background-image: url(${request.static_url('wuttaweb:static/img/testing.png')});
         }
     % endif
@@ -440,7 +440,27 @@
   </div>
 </%def>
 
-<%def name="render_theme_picker()"></%def>
+<%def name="render_theme_picker()">
+  % if expose_theme_picker and request.has_perm('common.change_theme'):
+      <div class="level-item">
+        ${h.form(url('change_theme'), method='POST', ref='themePickerForm')}
+          ${h.csrf_token(request)}
+          <input type="hidden" name="referrer" :value="referrer" />
+          <div style="display: flex; align-items: center; gap: 0.5rem;">
+            <span>Theme:</span>
+            <${b}-select name="theme"
+                      v-model="globalTheme"
+                      @input="changeTheme()">
+              % for name in available_themes:
+                  <option value="${name}">${name}</option>
+              % endfor
+            </${b}-select>
+          </div>
+        ${h.end_form()}
+      </div>
+  % endif
+
+</%def>
 
 <%def name="render_feedback_button()">
   % if request.has_perm('common.feedback'):
@@ -459,8 +479,8 @@
         Feedback
       </b-button>
 
-      <b-modal has-modal-card
-               :active.sync="showDialog">
+      <${b}-modal has-modal-card
+                  :active.sync="showDialog">
         <div class="modal-card">
 
           <header class="modal-card-head">
@@ -507,7 +527,7 @@
             </b-button>
           </footer>
         </div>
-      </b-modal>
+      </${b}-modal>
 
     </div>
   </script>
@@ -631,6 +651,12 @@
                 },
 
             % endif
+
+            % if expose_theme_picker and request.has_perm('common.change_theme'):
+                changeTheme() {
+                    this.$refs.themePickerForm.submit()
+                },
+            % endif
         },
     }
 
@@ -638,6 +664,10 @@
         contentTitleHTML: ${json.dumps(capture(self.content_title))|n},
         referrer: location.href,
         mountedHooks: [],
+
+        % if expose_theme_picker and request.has_perm('common.change_theme'):
+            globalTheme: ${json.dumps(theme or None)|n},
+        % endif
     }
 
     ## declare nested menu visibility toggle flags
@@ -774,11 +804,13 @@
   <script>
     WholePage.data = function() { return WholePageData }
     Vue.component('whole-page', WholePage)
+    <% request.register_component('whole-page', 'WholePage') %>
   </script>
   % if request.has_perm('common.feedback'):
       <script>
         WuttaFeedbackForm.data = function() { return WuttaFeedbackFormData }
         Vue.component('wutta-feedback-form', WuttaFeedbackForm)
+        <% request.register_component('wutta-feedback-form', 'WuttaFeedbackForm') %>
       </script>
   % endif
 </%def>

{wuttaweb-0.21.5 → wuttaweb-0.22.0}/src/wuttaweb/templates/forms/vue_template.mako

@@ -95,3 +95,5 @@
   }
 
 </script>
+
+<% request.register_component(form.vue_tagname, form.vue_component) %>

{wuttaweb-0.21.5 → wuttaweb-0.22.0}/src/wuttaweb/templates/grids/vue_template.mako

@@ -739,3 +739,5 @@
   }
 
 </script>
+
+<% request.register_component(grid.vue_tagname, grid.vue_component) %>

{wuttaweb-0.21.5 → wuttaweb-0.22.0}/src/wuttaweb/templates/page.mako

@@ -50,6 +50,6 @@
   <script>
     ThisPage.data = function() { return ThisPageData }
     Vue.component('this-page', ThisPage)
-    ## <% request.register_component('this-page', 'ThisPage') %>
+    <% request.register_component('this-page', 'ThisPage') %>
   </script>
 </%def>

wuttaweb-0.22.0/src/wuttaweb/templates/themes/butterfly/base.mako

@@ -0,0 +1,78 @@
+## -*- coding: utf-8; -*-
+<%inherit file="wuttaweb:templates/base.mako" />
+<%namespace file="/http-plugin.mako" import="make_http_plugin" />
+<%namespace file="/buefy-plugin.mako" import="make_buefy_plugin" />
+<%namespace file="/buefy-components.mako" import="make_buefy_components" />
+
+<%def name="core_javascript()">
+  <script type="importmap">
+    {
+        "imports": {
+            "vue": "${h.get_liburl(request, 'bb_vue')}",
+            "@oruga-ui/oruga-next": "${h.get_liburl(request, 'bb_oruga')}",
+            "@oruga-ui/theme-bulma": "${h.get_liburl(request, 'bb_oruga_bulma')}",
+            "@fortawesome/fontawesome-svg-core": "${h.get_liburl(request, 'bb_fontawesome_svg_core')}",
+            "@fortawesome/free-solid-svg-icons": "${h.get_liburl(request, 'bb_free_solid_svg_icons')}",
+            "@fortawesome/vue-fontawesome": "${h.get_liburl(request, 'bb_vue_fontawesome')}"
+        }
+    }
+  </script>
+  <script>
+    ## nb. empty stub to avoid errors for older buefy templates
+    const Vue = {
+        component(tagname, classname) {},
+    }
+  </script>
+</%def>
+
+<%def name="core_styles()">
+  ${h.stylesheet_link(h.get_liburl(request, 'bb_oruga_bulma_css'))}
+</%def>
+
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
+  ${make_buefy_components()}
+</%def>
+
+<%def name="extra_styles()">
+  ${parent.extra_styles()}
+  <style>
+    html, body, .navbar, .footer {
+        background-color: LightYellow;
+    }
+  </style>
+</%def>
+
+<%def name="make_vue_app()">
+  ${make_http_plugin()}
+  ${make_buefy_plugin()}
+  <script type="module">
+    import { createApp } from 'vue'
+    import { Oruga } from '@oruga-ui/oruga-next'
+    import { bulmaConfig } from '@oruga-ui/theme-bulma'
+    import { library } from "@fortawesome/fontawesome-svg-core"
+    import { fas } from "@fortawesome/free-solid-svg-icons"
+    import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
+    library.add(fas)
+
+    const app = createApp()
+    app.component('vue-fontawesome', FontAwesomeIcon)
+
+    % if hasattr(request, '_wuttaweb_registered_components'):
+        % for tagname, classname in request._wuttaweb_registered_components.items():
+            app.component('${tagname}', ${classname})
+        % endfor
+    % endif
+
+    app.use(Oruga, {
+        ...bulmaConfig,
+        iconComponent: 'vue-fontawesome',
+        iconPack: 'fas',
+    })
+
+    app.use(HttpPlugin)
+    app.use(BuefyPlugin)
+
+    app.mount('#app')
+  </script>
+</%def>