theme: Move icons to app folders

- This improves modularity. Each app brings its own icons in its directory
instead of a centralized directory.

Tests:

- Install an app and notice that the installation notification has the icon.

- Visit an app's page in Apps and System (cockpit) section and ensure that the
app's icon is being shown.

- Visit the Apps and System section and notice that apps' icons are being shown.

- Visit the home page and notice that shortcuts' icons are being shown.

- Visit the URL /plinth/api/0/shortcuts and notice that the URLs for icons are
accessible and lead to proper icon files.

- Build developer documentation and notice that Tutorial -> View and Reference >
Menu pages show the expected updates.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>

debian/copyright

@@ -5,8 +5,8 @@ Files: *
 Copyright: 2011-2023 FreedomBox Authors
 License: AGPL-3+
 
-Files: static/themes/default/icons/jsxc.png
+Files: plinth/modules/jsxc/static/icons/jsxc.png
-       static/themes/default/icons/jsxc.svg
+       plinth/modules/jsxc/static/icons/jsxc.svg
 Copyright: 2011-2019 FreedomBox Authors
 License: AGPL-3+
 
@@ -38,40 +38,40 @@ Copyright: Marie Van den Broeck (https://thenounproject.com/marie49/)
 Comment: https://thenounproject.com/icon/162372/
 License: CC-BY-SA-3.0
 
-Files: static/themes/default/icons/bepasty.svg
+Files: plinth/modules/bepasty/static/icons/bepasty.svg
 Copyright: (c) 2014 by the Bepasty Team, see the AUTHORS file.
 Comment: https://github.com/bepasty/bepasty-server/blob/master/src/bepasty/static/app/bepasty.svg
 License: BSD-2-clause
 
-Files: static/themes/default/icons/cockpit.svg
+Files: plinth/modules/cockpit/static/icons/cockpit.svg
 Copyright: Cockpit Authors (https://github.com/cockpit-project/cockpit/blob/master/AUTHORS)
 Comment: https://github.com/cockpit-project/cockpit/blob/master/src/branding/default/logo.svg
 License: LGPL-2.1+
 
-Files: static/themes/default/icons/coturn.png
+Files: plinth/modules/coturn/static/icons/coturn.png
-       static/themes/default/icons/coturn.svg
+       plinth/modules/coturn/static/icons/coturn.svg
 Copyright: Kmg Design (https://thenounproject.com/kmgdesignid/)
 Comment: Video Call by Kmg Design from the Noun Project https://thenounproject.com/term/video-call/3256092/
 License: CC-BY-3.0-US
 
-Files: static/themes/default/icons/deluge.png
+Files: plinth/modules/deluge/static/icons/deluge.png
-       static/themes/default/icons/deluge.svg
+       plinth/modules/deluge/static/icons/deluge.svg
 Copyright: 2007 Andrew Wedderburn
 Comment: https://commons.wikimedia.org/wiki/File:Deluge-Logo.svg
 License: GPL-2+
 
-Files: static/themes/default/icons/ejabberd.png
+Files: plinth/modules/ejabberd/static/icons/ejabberd.png
-       static/themes/default/icons/ejabberd.svg
+       plinth/modules/ejabberd/static/icons/ejabberd.svg
-       static/themes/default/icons/email.png
+       plinth/modules/email/static/icons/email.png
-       static/themes/default/icons/email.svg
+       plinth/modules/email/static/icons/email.svg
-       static/themes/default/icons/matrixsynapse.svg
+       plinth/modules/matrixsynapse/static/icons/matrixsynapse.svg
-       static/themes/default/icons/privoxy.png
+       plinth/modules/privoxy/static/icons/privoxy.png
-       static/themes/default/icons/privoxy.svg
+       plinth/modules/privoxy/static/icons/privoxy.svg
-       static/themes/default/icons/radicale.svg
+       plinth/modules/radicale/static/icons/radicale.svg
-       static/themes/default/icons/rssbridge.png
+       plinth/modules/rssbridge/static/icons/rssbridge.png
-       static/themes/default/icons/rssbridge.svg
+       plinth/modules/rssbridge/static/icons/rssbridge.svg
-       static/themes/default/icons/zoph.png
+       plinth/modules/zoph/static/icons/zoph.png
-       static/themes/default/icons/zoph.svg
+       plinth/modules/zoph/static/icons/zoph.svg
        static/themes/default/img/network-connection.svg
        static/themes/default/img/network-connection-vertical.svg
        static/themes/default/img/network-ethernet.svg
@@ -101,8 +101,8 @@ Copyright: 2012 William Theaker
 Comment: https://gitlab.com/fdroid/artwork/blob/master/fdroid-logo-2015/fdroid-logo.svg
 License: CC-BY-SA-3.0 or GPL-3+
 
-Files: static/themes/default/icons/gitweb.png
+Files: plinth/modules/gitweb/static/icons/gitweb.png
-       static/themes/default/icons/gitweb.svg
+       plinth/modules/gitweb/static/icons/gitweb.svg
 Copyright: 2010 Git Authors
 Comment: https://github.com/git/git/blob/master/gitweb/static/git-logo.png
 License: GPL-2
@@ -116,19 +116,19 @@ Files: static/themes/default/icons/gnu-linux.png
 Copyright: 2017 Cowemoji
 License: CC0-1.0
 
-Files: static/themes/default/icons/ikiwiki.png
+Files: plinth/modules/ikiwiki/static/icons/ikiwiki.png
-       static/themes/default/icons/ikiwiki.svg
+       plinth/modules/ikiwiki/static/icons/ikiwiki.svg
 Copyright: 2006 Recai Oktaş <roktas@debian.org>
 Comment: https://commons.wikimedia.org/wiki/File:Ikiwiki.svg
 License: GPL-2+
 
-Files: static/themes/default/icons/infinoted.png
+Files: plinth/modules/infinoted/static/icons/infinoted.png
-       static/themes/default/icons/infinoted.svg
+       plinth/modules/infinoted/static/icons/infinoted.svg
 Copyright: 2008-2014 Armin Burgmeier <armin@arbur.net>
 License: ISC
 
-Files: static/themes/default/icons/janus.png
+Files: plinth/modules/janus/static/icons/janus.png
-       static/themes/default/icons/janus.svg
+       plinth/modules/janus/static/icons/janus.svg
 Copyright: 2014-2022 Meetecho
 License: GPL-3 with OpenSSL exception
 
@@ -138,54 +138,54 @@ Copyright: Vectors Market (https://thenounproject.com/vectorsmarket/)
 Comment: https://thenounproject.com/icon/1203053/
 License: CC-BY-SA-3.0
 
-Files: static/themes/default/icons/matrixsynapse.png
+Files: plinth/modules/matrixsynapse/static/icons/matrixsynapse.png
 Copyright: 2017 Kishan Raval
 Comment: https://github.com/thekishanraval/Logos
 License: GPL-3+
 
-Files: static/themes/default/icons/mediawiki.png
+Files: plinth/modules/mediawiki/static/icons/mediawiki.png
-       static/themes/default/icons/mediawiki.svg
+       plinth/modules/mediawiki/static/icons/mediawiki.svg
 Copyright: 2020 Serhio Magpie
 Comment: https://commons.wikimedia.org/wiki/File:MediaWiki-2020-icon.svg
 License: CC-BY-SA-4.0
 
-Files: static/themes/default/icons/minetest.png
+Files: plinth/modules/minetest/static/icons/minetest.png
 Copyright: 2011 erlehmann
 License: CC-BY-SA-3.0
 
-Files: static/themes/default/icons/minetest.svg
+Files: plinth/modules/minetest/static/icons/minetest.svg
 Copyright: 2015 Calinou, Nils Dagsson Moskopp
 Comment: https://github.com/minetest/minetest/blob/master/misc/minetest.svg
 License: CC-BY-SA-3.0
 
-Files: static/themes/default/icons/mumble.png
+Files: plinth/modules/mumble/static/icons/mumble.png
 Copyright: 2009 Martin Skilnand
 Comment: https://commons.wikimedia.org/wiki/File:Icons_mumble.svg
 License: BSD-3-clause
 
-Files: static/themes/default/icons/mumble.svg
+Files: plinth/modules/mumble/static/icons/mumble.svg
 Copyright: 2005-2019 The Mumble Developers
 Comment: https://github.com/mumble-voip/mumble/blob/master/icons/mumble.svg
          https://github.com/mumble-voip/mumble/blob/master/LICENSE
 License: BSD-3-clause
 
-Files: static/themes/default/icons/openvpn.png
+Files: plinth/modules/openvpn/static/icons/openvpn.png
 Copyright: 2017 Kishan Raval
 Comment: https://github.com/thekishanraval/Logos
 License: GPL-3+
 
-Files: static/themes/default/icons/openvpn.svg
+Files: plinth/modules/openvpn/static/icons/openvpn.svg
 Copyright: OpenVPN Technologies, Inc.
 Comment: https://commons.wikimedia.org/wiki/File:Ovpntech_logo-s_REVISED.png
 License: CC-BY-SA-3.0
 
-Files: static/themes/default/icons/quassel.png
+Files: plinth/modules/quassel/static/icons/quassel.png
-       static/themes/default/icons/quassel.svg
+       plinth/modules/quassel/static/icons/quassel.svg
 Copyright: 2005-2019 Quassel Project <devel@quassel-irc.org>
 Comment: https://github.com/quassel/quassel/blob/master/pics/quassel-64.svg
 License: GPL-2 or GPL-3
 
-Files: static/themes/default/icons/radicale.png
+Files: plinth/modules/radicale/static/icons/radicale.png
 Copyright: 2008, Nicolas Kandel
   2008, Pascal Halter
   2008-2017, Guillaume Ayoub <guillaume.ayoub@kozea.fr>
@@ -193,7 +193,7 @@ Copyright: 2008, Nicolas Kandel
   2017, Unrud <unrud@outlook.com>
 License: GPL-3+
 
-Files: static/themes/default/icons/roundcube.png
+Files: plinth/modules/roundcube/static/icons/roundcube.png
 Copyright: 2000 Edmund Grimley Evans <edmundo@rano.org>
            2013 Thomas Yu - Sian, Liu
            Copyright (C) 2005-2017, The Roundcube Dev Team
@@ -201,21 +201,21 @@ Copyright: 2000 Edmund Grimley Evans <edmundo@rano.org>
            2005-2007, Jon Abernathy <jon@chuggnutt.com>
 License: GPL-3+
 
-Files: static/themes/default/icons/roundcube.svg
+Files: plinth/modules/roundcube/static/icons/roundcube.svg
 Copyright: Thomas B. (https://github.com/thomascube)
            Aleksander Machniak (https://github.com/alecpl)
 Comment: https://raw.githubusercontent.com/roundcube/roundcubemail/master/skins/elastic/images/logo.svg
 License: CC-BY-SA-3.0
 
-Files: static/themes/default/icons/samba.png
+Files: plinth/modules/samba/static/icons/samba.png
-       static/themes/default/icons/samba.svg
+       plinth/modules/samba/static/icons/samba.svg
 Copyright: None
 Comment: 2010 Samba Team
          https://commons.wikimedia.org/wiki/File:Samba_logo_2010.svg
 License: public-domain
 
-Files: static/themes/default/icons/searx.png
+Files: plinth/modules/searx/static/icons/searx.png
-       static/themes/default/icons/searx.svg
+       plinth/modules/searx/static/icons/searx.svg
 Copyright:
  2013-2017 Adam Tauber <asciimoo@gmail.com>
  2016 Alexandre Flament <alex@al-f.net>
@@ -223,65 +223,65 @@ Copyright:
  2014 Thomas Pointhuber <thomas.pointhuber@gmx.at>
 License: AGPL-3+
 
-Files: static/themes/default/icons/shaarli.png
+Files: plinth/modules/shaarli/static/icons/shaarli.png
-       static/themes/default/icons/shaarli.svg
+       plinth/modules/shaarli/static/icons/shaarli.svg
 Copyright: 2011-2015 Sébastien SAUVAGE <sebsauvage@sebsauvage.net>
            2011-2018 The Shaarli Community
 Comment: https://github.com/shaarli/Shaarli/blob/master/doc/md/images/doc-logo.svg
          https://github.com/shaarli/Shaarli/blob/master/assets/default/img/favicon.png
 License: Zlib
 
-Files: static/themes/default/icons/shadowsocks.png
+Files: plinth/modules/shadowsocks/static/icons/shadowsocks.png
 Copyright: 2014-2018 Symeon Huang (librehat) <hzwhuang@gmail.com>
 Comment: https://commons.wikimedia.org/wiki/File:Shadowsocks_logo.png
 License: LGPL-3+
 
-Files: static/themes/default/icons/shadowsocks.svg
+Files: plinth/modules/shadowsocks/static/icons/shadowsocks.svg
 Copyright: Clowwindy
 Comment: https://commons.wikimedia.org/wiki/File:Shadowsocks-Logo.svg
 License: Apache-2.0
 
-Files: static/themes/default/icons/sharing.png
+Files: plinth/modules/sharing/static/icons/sharing.png
-       static/themes/default/icons/sharing.svg
+       plinth/modules/sharing/static/icons/sharing.svg
 Copyright: Interface (https://www.shareicon.net/author/interface)
 Comment: https://www.shareicon.net/universal-interface-interface-sharing-share-697502
 License: CC-BY-3.0
 
-Files: static/themes/default/icons/syncthing.png
+Files: plinth/modules/syncthing/static/icons/syncthing.png
 Copyright: 2015 Jack Palevich <jack.palevich@gmail.com>
            2014 The Syncthing Authors
            2015 Audrius Butkevicius and Contributors
 License: MPL-2.0
 
-Files: static/themes/default/icons/syncthing.svg
+Files: plinth/modules/syncthing/static/icons/syncthing.svg
 Copyright: Jakob Borg and the Syncthing project
 Comment: https://commons.wikimedia.org/wiki/File:SyncthingLogoHorizontal.svg
 License: MPL-2.0
 
-Files: static/themes/default/icons/tor.png
+Files: plinth/modules/tor/static/icons/tor.png
-       static/themes/default/icons/tor.svg
+       plinth/modules/tor/static/icons/tor.svg
 Copyright: The Tor Project, Inc.
 Comment: https://commons.wikimedia.org/wiki/File:Tor_logo1.png
          https://commons.wikimedia.org/wiki/File:Tor-logo-2011-flat.svg
 License: CC-BY-3.0-US
 
-Files: static/themes/default/icons/transmission.png
+Files: plinth/modules/transmission/static/icons/transmission.png
-       static/themes/default/icons/transmission.svg
+       plinth/modules/transmission/static/icons/transmission.svg
 Copyright: Transmission Authors
 Comment: https://github.com/transmission/transmission/blob/master/gtk/icons/hicolor_apps_scalable_transmission.svg
 License: GPL-3
 
-Files: static/themes/default/icons/ttrss.png
+Files: plinth/modules/ttrss/static/icons/ttrss.png
 Copyright: Mark James <mjames@gmail.com>
 License: CC-BY-3.0
 
-Files: static/themes/default/icons/ttrss.svg
+Files: plinth/modules/ttrss/static/icons/ttrss.svg
 Copyright: 2005 Andrew Dolgov
 Comment: https://git.tt-rss.org/fox/tt-rss/src/master/images/favicon-72px.png
 License: GPL-3+
 
-Files: static/themes/default/icons/wordpress.png
+Files: plinth/modules/wordpress/static/icons/wordpress.png
-       static/themes/default/icons/wordpress.svg
+       plinth/modules/wordpress/static/icons/wordpress.svg
 Copyright: 2011-2021 WordPress Contributors
 Comment: https://github.com/WordPress/wordpress-develop/blob/master/src/wp-admin/images/wordpress-logo.svg
 License: GPL-2+
@@ -292,8 +292,8 @@ Copyright: 2007 ruli (https://thenounproject.com/2007ruli/)
 Comment: https://thenounproject.com/icon/1206946/
 License: CC-BY-SA-3.0
 
-Files: static/themes/default/icons/wireguard.png
+Files: plinth/modules/wireguard/static/icons/wireguard.png
-       static/themes/default/icons/wireguard.svg
+       plinth/modules/wireguard/static/icons/wireguard.svg
 Copyright: 2019 WireGuard LLC
 Comment: https://git.zx2c4.com/wireguard-windows/plain/ui/icon/wireguard.svg
 License: Expat

doc/dev/tutorial/view.rst

@@ -64,8 +64,8 @@ menu item we want to present.
 * The third parameter is a short description for the menu item.
 
 * The fourth parameter is the name of the icon to use when showing the menu
-  item. An SVG file and a PNG should be created in the ``static/theme/icons/``
+  item. An SVG file and a PNG should be created in the
-  directory.
+  ``plinth/modules/transmission/static/icons/`` directory.
 
 * The fifth parameter is the URL that the user should be directed to when the
   menu item is clicked. This is a Django URL name and we have already created a

plinth/menu.py

@@ -23,11 +23,12 @@ class Menu(app.FollowerComponent):
         name of a glyphicon from the Fork Awesome font's icon set:
         https://forkawesome.github.io/Fork-Awesome/icons/. In this case, the
         icon name starts with the string 'fa-'. Alternatively, the icon can
-        also be a file under the directory static/theme/icons/, provided
+        also be a file under the directory plinth/modules/<app>/static/icons/,
-        without an extension. SVG icons are preferred. Currently, both PNG and
+        provided without an extension. SVG icons are preferred. Currently, both
-        SVG icons with the same name are used. For example, if the value of
+        PNG and SVG icons with the same name are used. For example, if the
-        icon is 'myapp', then two icons files static/theme/icons/myapp.svg and
+        value of icon is 'myicon' and app_id in App class is 'myapp', then two
-        static/theme/icons/myapp.png are used in the interface.
+        icons files plinth/modules/myapp/static/icons/myicon.svg and
+        plinth/modules/myapp/static/icons/myicon.png are used in the interface.
 
         url_name is the name of url location that will be activated when the
         menu item is selected. This is not optional. url_args and url_kwargs

plinth/modules/api/views.py

@@ -50,7 +50,7 @@ def _get_shortcut_data(shortcut):
         'name': shortcut.name,
         'short_description': shortcut.short_description,
         'description': shortcut.description,
-        'icon_url': _get_icon_url(shortcut.icon),
+        'icon_url': _get_icon_url(shortcut.app_id, shortcut.icon),
         'clients': copy.deepcopy(shortcut.clients),
     }
     # XXX: Fix the hardcoding
@@ -60,9 +60,12 @@ def _get_shortcut_data(shortcut):
     return shortcut_data
 
 
-def _get_icon_url(icon_name):
+def _get_icon_url(app_id, icon_name):
-    """Return icon path given icon name."""
+    """Return icon path given app's ID and icon name."""
     if not icon_name:
         return None
 
-    return static('theme/icons/{}.png'.format(icon_name))
+    if app_id:
+        return static(f'{app_id}') + f'/icons/{icon_name}.png'
+
+    return static(f'theme/icons/{icon_name}.png')

plinth/templates/app-header.html

@@ -10,7 +10,11 @@
 
   {% if app_info.icon_filename %}
 
-    <img src="{% static 'theme/icons/' %}{{ app_info.icon_filename }}.svg" alt="{{ app_info.name  }}"/>
+    {% if app_info.app_id %}
+      <img src="{% static app_info.app_id %}/icons/{{ app_info.icon_filename }}.svg" alt="{{ app_info.name  }}"/>
+    {% else %}
+      <img src="{% static 'theme/icons/' %}{{ app_info.icon_filename }}.svg" alt="{{ app_info.name  }}"/>
+    {% endif %}
 
   {% endif %}
 

plinth/templates/card.html

@@ -11,7 +11,11 @@
       {% if 'fa-' in item.icon %}
         <span class="fa {{ item.icon }}"></span>
       {% else %}
-        <img src="{% static 'theme/icons/' %}{{ item.icon }}.svg"/>
+        {% if item.app_id %}
+          <img src="{% static item.app_id %}/icons/{{ item.icon }}.svg"/>
+        {% else %}
+          <img src="{% static 'theme/icons/' %}{{ item.icon }}.svg"/>
+        {% endif %}
       {% endif %}
     </div>
     <div class="card-description">{{ item.short_description|default:'' }}</div>

plinth/templates/index.html

@@ -68,7 +68,11 @@
                           {% if "custom" in shortcut.icon %}
                             <img src="{{ shortcut.icon }}"/>
                           {% else %}
-                            <img src="{% static 'theme/icons/' %}{{ shortcut.icon }}.svg"/>
+                            {% if shortcut.app_id %}
+                              <img src="{% static shortcut.app_id %}/icons/{{ shortcut.icon }}.svg"/>
+                            {% else %}
+                              <img src="{% static 'theme/icons/' %}{{ shortcut.icon }}.svg"/>
+                            {% endif %}
                           {% endif %}
                         </div>
                         <div class="card-description">

plinth/templates/notifications.html

@@ -17,9 +17,15 @@
               {% if note.data.app_icon %}
                 <div class="app-icon fa {{ note.data.app_icon }}"></div>
               {% elif note.data.app_icon_filename %}
-                <img src="{% static 'theme/icons/' %}{{ note.data.app_icon_filename }}.svg"
+                {% if note.app_id %}
-                     alt="{{ note.data.app_name }}"
+                  <img src="{% static note.app_id %}/icons/{{ note.data.app_icon_filename }}.svg"
-                     class="notification-icon" />
+                       alt="{{ note.data.app_name }}"
+                       class="notification-icon" />
+                {% else %}
+                  <img src="{% static 'theme/icons/' %}{{ note.data.app_icon_filename }}.svg"
+                       alt="{{ note.data.app_name }}"
+                       class="notification-icon" />
+                {% endif %}
               {% endif %}
 
               {{ note.data.app_name }}