refactor: split translation keys for about screen (#845)

* fix(translations): remove errant `<b>` tag

* refactor: split translation keys for about screen

* ui: change form field style

* fix: split new translation keys

* fix: remove unused key

* translations: re-split toki pona "about.content"

Author: CyanVoxel

src/tagstudio/qt/modals/about.py

@@ -3,12 +3,23 @@
 # Created for TagStudio: https://github.com/CyanVoxel/TagStudio
 
 
+import math
+
 from PIL import ImageQt
 from PySide6.QtCore import Qt
-from PySide6.QtGui import QPixmap
-from PySide6.QtWidgets import QHBoxLayout, QLabel, QPushButton, QVBoxLayout, QWidget
+from PySide6.QtGui import QGuiApplication, QPixmap
+from PySide6.QtWidgets import (
+    QFormLayout,
+    QHBoxLayout,
+    QLabel,
+    QPushButton,
+    QSizePolicy,
+    QVBoxLayout,
+    QWidget,
+)
 
 from tagstudio.core.constants import VERSION, VERSION_BRANCH
+from tagstudio.core.enums import Theme
 from tagstudio.core.palette import ColorType, UiColor, get_ui_color
 from tagstudio.qt.modals.ffmpeg_checker import FfmpegChecker
 from tagstudio.qt.resource_manager import ResourceManager
@@ -23,60 +34,134 @@ def __init__(self, config_path):
         self.fc: FfmpegChecker = FfmpegChecker()
         self.rm: ResourceManager = ResourceManager()
 
+        # TODO: There should be a global button theme somewhere.
+        self.form_content_style = (
+            f"background-color:{Theme.COLOR_BG.value
+            if QGuiApplication.styleHints().colorScheme() is Qt.ColorScheme.Dark
+            else Theme.COLOR_BG_LIGHT.value};"
+            "border-radius:3px;"
+            "font-weight: 500;"
+            "padding: 2px;"
+        )
+
         self.setWindowModality(Qt.WindowModality.ApplicationModal)
-        self.setMinimumSize(360, 480)
+        self.setMinimumSize(360, 540)
+        self.setMaximumSize(600, 600)
         self.root_layout = QVBoxLayout(self)
-        self.root_layout.setContentsMargins(24, 24, 24, 6)
-        self.root_layout.setSpacing(12)
-        self.root_layout.setAlignment(Qt.AlignmentFlag.AlignTop)
+        self.root_layout.setContentsMargins(0, 12, 0, 0)
+        self.root_layout.setSpacing(0)
+        self.root_layout.setAlignment(Qt.AlignmentFlag.AlignTop | Qt.AlignmentFlag.AlignCenter)
+
+        self.content_widget = QWidget()
+        self.content_layout = QVBoxLayout(self.content_widget)
+        self.content_layout.setContentsMargins(12, 12, 12, 12)
+        self.content_layout.setSpacing(12)
 
+        # TagStudio Icon Logo --------------------------------------------------
         self.logo_widget = QLabel()
-        self.logo_widget.setObjectName("logo")
         self.logo_pixmap = QPixmap.fromImage(ImageQt.ImageQt(self.rm.get("icon")))
+        self.logo_pixmap.setDevicePixelRatio(self.devicePixelRatio())
         self.logo_pixmap = self.logo_pixmap.scaledToWidth(
-            128, Qt.TransformationMode.SmoothTransformation
+            math.floor(128 * self.devicePixelRatio()), Qt.TransformationMode.SmoothTransformation
         )
         self.logo_widget.setPixmap(self.logo_pixmap)
-        self.logo_widget.setAlignment(Qt.AlignmentFlag.AlignHCenter)
-        self.logo_widget.setContentsMargins(0, 0, 0, 24)
+        self.logo_widget.setContentsMargins(0, 0, 0, 0)
+        self.logo_widget.setAlignment(Qt.AlignmentFlag.AlignCenter)
+
+        # Title ----------------------------------------------------------------
+        branch: str = (" (" + VERSION_BRANCH + ")") if VERSION_BRANCH else ""
+        self.title_label = QLabel(f"<h2>TagStudio Alpha {VERSION}{branch}</h2>")
+        self.title_label.setAlignment(Qt.AlignmentFlag.AlignCenter)
+
+        # Description ----------------------------------------------------------
+        self.desc_label = QLabel(Translations["about.description"])
+        self.desc_label.setAlignment(Qt.AlignmentFlag.AlignCenter)
+        self.desc_label.setWordWrap(True)
+        self.desc_label.setSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Expanding)
 
+        # System Info ----------------------------------------------------------
         ff_version = self.fc.version()
         red = get_ui_color(ColorType.PRIMARY, UiColor.RED)
         green = get_ui_color(ColorType.PRIMARY, UiColor.GREEN)
+        missing = Translations["generic.missing"]
+        found = Translations["about.module.found"]
 
-        ffmpeg = f'<span style="color:{red}">Missing</span>'
+        ffmpeg_status = f'<span style="color:{red}">{missing}</span>'
         if ff_version["ffmpeg"] is not None:
-            ffmpeg = f'<span style="color:{green}">Found</span> (' + ff_version["ffmpeg"] + ")"
+            ffmpeg_status = (
+                f'<span style="color:{green}">{found}</span> (' + ff_version["ffmpeg"] + ")"
+            )
 
-        ffprobe = f'<span style="color:{red}">Missing</span>'
+        ffprobe_status = f'<span style="color:{red}">{missing}</span>'
         if ff_version["ffprobe"] is not None:
-            ffprobe = f'<span style="color:{green}">Found</span> (' + ff_version["ffprobe"] + ")"
-
-        branch: str = (" (" + VERSION_BRANCH + ")") if VERSION_BRANCH else ""
-        self.title_label = QLabel(f"<h2>TagStudio Alpha {VERSION}{branch}</h2>")
-        self.title_label.setAlignment(Qt.AlignmentFlag.AlignHCenter)
-
-        self.content_label = QLabel(
-            Translations.format(
-                "about.content", config_path=config_path, ffmpeg=ffmpeg, ffprobe=ffprobe
+            ffprobe_status = (
+                f'<span style="color:{green}">{found}</span> (' + ff_version["ffprobe"] + ")"
             )
+
+        self.system_info_widget = QWidget()
+        self.system_info_layout = QFormLayout(self.system_info_widget)
+        self.system_info_layout.setLabelAlignment(Qt.AlignmentFlag.AlignRight)
+
+        # License
+        license_title = QLabel(f'{Translations["about.license"]}')
+        license_content = QLabel("GPLv3")
+        license_content.setStyleSheet(self.form_content_style)
+        license_content.setMaximumWidth(license_content.sizeHint().width())
+        self.system_info_layout.addRow(license_title, license_content)
+
+        # Config Path
+        config_path_title = QLabel(f'{Translations["about.config_path"]}')
+        config_path_content = QLabel(f"{config_path}")
+        config_path_content.setStyleSheet(self.form_content_style)
+        config_path_content.setWordWrap(True)
+        self.system_info_layout.addRow(config_path_title, config_path_content)
+
+        # FFmpeg Status
+        ffmpeg_path_title = QLabel("FFmpeg")
+        ffmpeg_path_content = QLabel(f"{ffmpeg_status}")
+        ffmpeg_path_content.setStyleSheet(self.form_content_style)
+        ffmpeg_path_content.setMaximumWidth(ffmpeg_path_content.sizeHint().width())
+        self.system_info_layout.addRow(ffmpeg_path_title, ffmpeg_path_content)
+
+        # FFprobe Status
+        ffprobe_path_title = QLabel("FFprobe")
+        ffprobe_path_content = QLabel(f"{ffprobe_status}")
+        ffprobe_path_content.setStyleSheet(self.form_content_style)
+        ffprobe_path_content.setMaximumWidth(ffprobe_path_content.sizeHint().width())
+        self.system_info_layout.addRow(ffprobe_path_title, ffprobe_path_content)
+
+        # Links ----------------------------------------------------------------
+        repo_link = "https://github.com/TagStudioDev/TagStudio"
+        docs_link = "https://docs.tagstud.io"
+        discord_link = "https://discord.com/invite/hRNnVKhF2G"
+
+        self.links_label = QLabel(
+            f'<p><a href="{repo_link}">GitHub</a> | '
+            f'<a href="{docs_link}">{Translations["about.documentation"]}</a> | '
+            f'<a href="{discord_link}">Discord</a></p>'
         )
-        self.content_label.setObjectName("contentLabel")
-        self.content_label.setWordWrap(True)
-        self.content_label.setOpenExternalLinks(True)
-        self.content_label.setAlignment(Qt.AlignmentFlag.AlignHCenter)
+        self.links_label.setWordWrap(True)
+        self.links_label.setOpenExternalLinks(True)
+        self.links_label.setAlignment(Qt.AlignmentFlag.AlignCenter)
 
+        # Buttons --------------------------------------------------------------
         self.button_widget = QWidget()
         self.button_layout = QHBoxLayout(self.button_widget)
+        self.button_layout.setContentsMargins(12, 12, 12, 12)
         self.button_layout.addStretch(1)
 
         self.close_button = QPushButton(Translations["generic.close"])
         self.close_button.clicked.connect(lambda: self.close())
-
         self.button_layout.addWidget(self.close_button)
 
-        self.root_layout.addWidget(self.logo_widget)
-        self.root_layout.addWidget(self.title_label)
-        self.root_layout.addWidget(self.content_label)
-        self.root_layout.addStretch(1)
+        # Add Widgets to Layouts -----------------------------------------------
+        self.content_layout.addWidget(self.logo_widget)
+        self.content_layout.addWidget(self.title_label)
+        self.content_layout.addWidget(self.desc_label)
+        self.content_layout.addWidget(self.system_info_widget)
+        self.content_layout.addWidget(self.links_label)
+        self.content_layout.addStretch(1)
+        self.content_layout.setAlignment(Qt.AlignmentFlag.AlignCenter)
+
+        self.root_layout.addWidget(self.content_widget)
         self.root_layout.addWidget(self.button_widget)

src/tagstudio/resources/translations/de.json

@@ -1,5 +1,8 @@
 {
-    "about.content": "<p>TagStudio ist eine Anwendung zum organisieren von Fotos & Dateien mit einem zugrunde liegendem Tag-basierten System, welches sich darauf konzentriert, dem Nutzer Freiraum und Flexibilität zu bieten. Keine proprietären Programme oder Formate, kein Meer an Hilfsdateien und keine komplette Umwälzung deiner Dateisystemstruktur.</p>Lizenz: GPLv3<br>Konfigurations-Pfad: {config_path}<br>FFmpeg: {ffmpeg}<br>FFprobe: {ffprobe}<p><a href=\"https://github.com/TagStudioDev/TagStudio\">GitHub</a> | <a href=\"https://docs.tagstud.io\">Dokumentation</a> | <a href=\"https://discord.com/invite/hRNnVKhF2G\">Discord</a></p>",
+    "about.config_path": "Konfigurations-Pfad",
+    "about.description": "TagStudio ist eine Anwendung zum organisieren von Fotos & Dateien mit einem zugrunde liegendem Tag-basierten System, welches sich darauf konzentriert, dem Nutzer Freiraum und Flexibilität zu bieten. Keine proprietären Programme oder Formate, kein Meer an Hilfsdateien und keine komplette Umwälzung deiner Dateisystemstruktur.",
+    "about.documentation": "Dokumentation",
+    "about.license": "Lizenz",
     "about.title": "Über TagStudio",
     "app.git": "Git Commit",
     "app.pre_release": "Pre-Release",
@@ -116,7 +119,6 @@
     "generic.save": "Speichern",
     "generic.skip": "Überspringen",
     "generic.skip_alt": "Über&springen",
-    "help.visit_github": "GitHub Repository besuchen",
     "home.search": "Suchen",
     "home.search_entries": "Nach Einträgen suchen",
     "home.search_library": "Bibliothek durchsuchen",

src/tagstudio/resources/translations/en.json

@@ -1,4 +1,11 @@
 {
+    "about.config_path": "Config Path",
+    "about.description": "TagStudio is a photo & file organization application with an underlying tag-based system that focuses on giving freedom and flexibility to the user. No proprietary programs or formats, no sea of sidecar files, and no complete upheaval of your filesystem structure.",
+    "about.documentation": "Documentation",
+    "about.license": "License",
+    "about.module.found": "Found",
+    "about.title": "About TagStudio",
+    "about.website": "Website",
     "app.git": "Git Commit",
     "app.pre_release": "Pre-Release",
     "app.title": "{base_title} - Library '{library_dir}'",
@@ -83,8 +90,6 @@
     "folders_to_tags.description": "Creates tags based on your folder structure and applies them to your entries.\n The structure below shows all the tags that will be created and what entries they will be applied to.",
     "folders_to_tags.open_all": "Open All",
     "folders_to_tags.title": "Create Tags From Folders",
-    "about.title": "About TagStudio",
-    "about.content": "<p>TagStudio is a photo & file organization application with an underlying tag-based system that focuses on giving freedom and flexibility to the user. No proprietary programs or formats, no sea of sidecar files, and no complete upheaval of your filesystem structure.</p>License: GPLv3<br>Config path: {config_path}<br>FFmpeg: {ffmpeg}<br>FFprobe: {ffprobe}<p><a href=\"https://github.com/TagStudioDev/TagStudio\">GitHub</a> | <a href=\"https://docs.tagstud.io\">Documentation</a> | <a href=\"https://discord.com/invite/hRNnVKhF2G\">Discord</a></p>",
     "generic.add": "Add",
     "generic.apply_alt": "&Apply",
     "generic.apply": "Apply",
@@ -101,6 +106,7 @@
     "generic.edit_alt": "&Edit",
     "generic.edit": "Edit",
     "generic.filename": "Filename",
+    "generic.missing": "Missing",
     "generic.navigation.back": "Back",
     "generic.navigation.next": "Next",
     "generic.none": "None",
@@ -114,7 +120,6 @@
     "generic.save": "Save",
     "generic.skip_alt": "&Skip",
     "generic.skip": "Skip",
-    "help.visit_github": "Visit GitHub Repository",
     "home.search_entries": "Search Entries",
     "home.search_library": "Search Library",
     "home.search_tags": "Search Tags",
@@ -275,7 +280,7 @@
     "trash.dialog.disambiguation_warning.singular": "This will remove it from TagStudio <i>AND</i> your file system!",
     "trash.dialog.move.confirmation.plural": "Are you sure you want to move these {count} files to the {trash_term}?",
     "trash.dialog.move.confirmation.singular": "Are you sure you want to move this file to the {trash_term}?",
-    "trash.dialog.permanent_delete_warning": "<b>WARNING!</b> If this file can't be moved to the {trash_term}, <b>it will be <b>permanently deleted!</b>",
+    "trash.dialog.permanent_delete_warning": "<b>WARNING!</b> If this file can't be moved to the {trash_term}, it will be <b>permanently deleted!</b>",
     "trash.dialog.title.plural": "Delete Files",
     "trash.dialog.title.singular": "Delete File",
     "trash.name.generic": "Trash",

src/tagstudio/resources/translations/es.json

@@ -1,5 +1,8 @@
 {
-    "about.content": "<p>TagStudio es una aplicación de fotografías y archivos con un sistema de etiquetas subyacentes que se centra en dar libertad y flexibilidad al usuario. Sin programas ni formatos propios, ni un mar de archivos y sin trastornar completamente tu sistema de estructurar los archivos.</p>. Licencia: GPLv3<br>Archivo de configuración: {config_path}<br>FFmpeg: {ffmpeg}<br>FFprobe: {ffprobe}<p><a href=\"https://github.com/TagStudioDev/TagStudio\">GitHub</a> | <a href=\"https://docs.tagstud.io\">Documentación</a> | <a href=\"https://discord.com/invite/hRNnVKhF2G\">Discord</a></p>",
+    "about.config_path": "Archivo de configuración",
+    "about.description": "TagStudio es una aplicación de fotografías y archivos con un sistema de etiquetas subyacentes que se centra en dar libertad y flexibilidad al usuario. Sin programas ni formatos propios, ni un mar de archivos y sin trastornar completamente tu sistema de estructurar los archivos.",
+    "about.documentation": "Documentación",
+    "about.license": "Licencia",
     "about.title": "Acerca de",
     "app.git": "Git Commit",
     "app.pre_release": "Previas al lanzamiento",
@@ -116,7 +119,6 @@
     "generic.save": "Guardar",
     "generic.skip": "Saltear",
     "generic.skip_alt": "&Saltear",
-    "help.visit_github": "Visitar el repositorio en GitHub",
     "home.search": "Buscar",
     "home.search_entries": "Buscar entradas",
     "home.search_library": "Buscar el biblioteca",

src/tagstudio/resources/translations/fil.json

@@ -1,5 +1,8 @@
 {
-    "about.content": "<p>Ang TagStudio ay isang application ng pagsasaayos ng file at larawan na may pinagbabatayan na tag-based na sistema na nakatutok sa pagbibigay ng kalayaan at kakayahang umangkop sa user. Walang mga proprietary na format o program, walang dagat ng mga sidecar file, at walang kaguluhan ng iyong estruktura ng filesystem.</p>Lisensya: GPLv3<br>Path ng config: {config_path}<br>FFMpeg: {ffmpeg}<br>FFProbe: {ffprobe}<p><a href=\"https://github.com/TagStudioDev/TagStudio\">GitHub</a> | <a href=\"https://docs.tagstud.io\">Dokumentasyon</a> | <a href=\"https://discord.gg/invite/hRNnVKhF2G\">Discord</a></p>",
+    "about.config_path": "Path ng Config",
+    "about.description": "Ang TagStudio ay isang application ng pagsasaayos ng file at larawan na may pinagbabatayan na tag-based na sistema na nakatutok sa pagbibigay ng kalayaan at kakayahang umangkop sa user. Walang mga proprietary na format o program, walang dagat ng mga sidecar file, at walang kaguluhan ng iyong estruktura ng filesystem.",
+    "about.documentation": "Dokumentasyon",
+    "about.license": "Lisensya",
     "about.title": "Tungkol sa TagStudio",
     "app.git": "Git Commit",
     "app.pre_release": "Pre-Release",
@@ -114,7 +117,6 @@
     "generic.save": "I-save",
     "generic.skip": "Laktawan",
     "generic.skip_alt": "&Laktawan",
-    "help.visit_github": "Bisitahin ang GitHub Repository",
     "home.search": "Maghanap",
     "home.search_entries": "Mga Entry sa Paghahanap",
     "home.search_library": "Maghanap sa Library",

src/tagstudio/resources/translations/fr.json

@@ -1,5 +1,6 @@
 {
-    "about.content": "<p>TagStudio est une application d'organisation de photos et de fichiers avec un système de tags qui mets en avant la liberté et flexibilité à l'utilisateur. Pas de programmes ou de formats propriétaires, pas la moindre trace de fichiers secondaires, et pas de bouleversement complet de la structure de votre système de fichiers.</p>License: GPLv3<br>Chemin de configuration: {config_path}<br>FFmpeg: {ffmpeg}<br>FFprobe: {ffprobe}<p><a href=\"https://github.com/TagStudioDev/TagStudio\">GitHub</a> | <a href=\"https://docs.tagstud.io\">Documentation</a> | <a href=\"https://discord.com/invite/hRNnVKhF2G\">Discord</a></p>",
+    "about.config_path": "Chemin de Configuration",
+    "about.description": "TagStudio est une application d'organisation de photos et de fichiers avec un système de tags qui mets en avant la liberté et flexibilité à l'utilisateur. Pas de programmes ou de formats propriétaires, pas la moindre trace de fichiers secondaires, et pas de bouleversement complet de la structure de votre système de fichiers.",
     "about.title": "À propos de TagStudio",
     "app.git": "Git Commit",
     "app.pre_release": "Version Préliminaire",
@@ -116,7 +117,6 @@
     "generic.save": "Sauvegarder",
     "generic.skip": "Passer",
     "generic.skip_alt": "&Passer",
-    "help.visit_github": "Visiter le Dépôt GitHub",
     "home.search": "Rechercher",
     "home.search_entries": "Recherche",
     "home.search_library": "Rechercher dans la Bibliothèque",