feat: Implement Theme Management, i18n, and Advanced Widget Controls#53
Open
zeedif wants to merge 6 commits intotjaworski:mainfrom
Open
feat: Implement Theme Management, i18n, and Advanced Widget Controls#53zeedif wants to merge 6 commits intotjaworski:mainfrom
zeedif wants to merge 6 commits intotjaworski:mainfrom
Conversation
Adds two essential files for new contributors and project maintenance: - CONTRIBUTING.md: Provides a detailed, step-by-step guide for setting up the development environment on Windows. This addresses common compilation issues with native dependencies like node-canvas by specifying the correct Node.js version and required tools (GTK 2, C++ Build Tools). - .gitignore: A standard gitignore file to exclude dependencies, logs, build outputs, and editor-specific files from version control, ensuring a cleaner repository.
This commit introduces full internationalization (i18n) support for the s1panel GUI. Key changes include: - Integration of `vue-i18n` library for managing translations. - Addition of a new API endpoint `/api/set_language` to allow users to change and persist the interface language in `config.json`. - Dynamic loading of locale files (`en.json`, `es.json`) based on user preference or auto-detection. - All static text strings in core GUI components (`App.vue`, `FontEdit.vue`, `RectEdit.vue`) are now replaced with dynamic translation keys. - A new computed property `widgetPropertyNames` in `App.vue` centralizes the mapping of widget property keys to their translated display names, improving code clarity and maintainability. - The settings dialog now includes a language selection dropdown. - Initial support for English and Spanish languages is provided.
This commit introduces a complete theme management system, enabling users to create, delete, and switch between different themes directly from the web interface. The "Manage Themes" dialog is now fully functional, providing an interface for the new capabilities. Users can add new themes, which are created from a default template, and delete existing ones. To support this, the backend API has been extended with the following endpoints: - `POST /api/theme_create`: Creates a new theme directory and config file. - `POST /api/theme_delete`: Removes a theme. - `POST /api/switch_theme`: Changes the active theme. - `POST /api/theme_save`: Persists all theme-related changes, including creations and deletions. - `POST /api/theme_revert`: Discards all pending changes and reloads the configuration from disk.
This commit introduces two major enhancements to widget configuration, addressing the ambiguity between literal values and sensor references, and adding a powerful new customization feature. **1. Explicit Sensor Reference Toggle:** Resolves the issue where a widget's 'Value' field would incorrectly interpret a literal string as a sensor if the string matched a sensor's name. - An `InputSwitch` toggle now appears next to the 'Value' field if, and only if, the entered text is ambiguous (matches an existing sensor name). - This allows the user to explicitly declare their intent: - **Toggle ON:** The value is treated as a reference to a sensor. - **Toggle OFF:** The value is treated as a literal string. - The logic for selecting a sensor from the dropdown has been updated to automatically set the toggle to ON, improving user experience. **2. Dynamic Value Mapping Rule Engine:** A new "Value Mapping" feature has been implemented for widgets linked to a sensor. This allows users to transform sensor output into different values before they are passed to the widget, enabling dynamic behavior without modifying sensor or widget code. - A new `ValueMapper.vue` component provides a UI to build a set of conditional rules. - Users can define multiple rules with one or more conditions (`AND`/`OR` logic). - Supported operators include: `equals`, `notEqual`, `greaterThan`, `lessThan`, `contains`, `notEmpty`, and more. - Each rule maps a qualifying sensor output to a specific `then` value. - A default `else` value is used if no rules match. Example Use Case: A user can now configure an `iconify` widget to listen to the `clock` sensor and map the "am" output to a `weather-sunny` icon and the "pm" output to a `weather-night` icon, all directly from the GUI. The backend logic in `main.js` has been updated to process these mapping rules during the render cycle, ensuring the correct transformed value is passed to the widget's `draw` function. Closes: tjaworski#37
…erence After switching or reverting a theme, the preview renderer would not update and would become "frozen," still displaying the previous theme's screen. This was caused by reassigning the `context.theme` and `context.config` objects in the API. The main render loop in `main.js` held a reference to the original objects and was unaware of the new assignments. This commit changes the `switch_theme` and `theme_revert` functions to mutate the existing state objects instead of reassigning them. By clearing the old objects and using `Object.assign` to copy in the new data, the original object reference is preserved, allowing the renderer to correctly reflect state changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces several major enhancements to
s1panel, focusing on improving user customizability, developer experience, and international support. The changes are organized into the following key areas:1. Full Theme Management (
c394e37)The theme management system is now fully implemented. Users can create, delete, and switch between themes via the web interface. The backend API has been extended with endpoints (
/theme_create,/theme_delete,/switch_theme,/theme_save,/theme_revert) to support these operations and ensure changes are persisted correctly.2. Internationalization (i18n) Support (
254801a)The GUI now supports multiple languages.
vue-i18nfor translation management.en.json,es.json)./api/set_language) saves the user's language preference toconfig.json.3. Advanced Widget Configuration (
eb549fb)Two critical improvements have been made to widget configuration to resolve ambiguity and enable dynamic behavior.
InputSwitchnow appears next to the "Value" field when the input text matches a sensor name. This allows the user to explicitly define whether the input should be treated as a literal string or a sensor reference.main.jsprocesses these rules during the render cycle.4. Project and Contribution Guidelines (
467087a)CONTRIBUTING.mdfile with detailed instructions for setting up a development environment on Windows, addressing common native dependency issues..gitignorefile to standardize version control and maintain a clean repository.These changes collectively make
s1panelmore robust, flexible, and accessible to a wider range of users and contributors.