Content
View differences
Updated by Marc Alcobé about 3 years ago
**As** an instance admin a _\[enter role of user\]_
**I want to** be able to change between OpenProject default themes or create my own theme in the "Design" admin settings _\[enter objective\]_
**so that** I have a branded instance _\[enter desired result\]_
**Acceptance criteria**
* Reorganise the sections of the screen:
1. **Theme**
2. **Colours**
3. **Logo, favicon and touch icon**
* **Theme** changes:
* Include the new OpenProject default themes defined in <mention class="mention" data-id="47056" data-type="work_package" data-text="#47056">#47056</mention> in the dropdown " Theme selection".
* Add a "Custom theme" last option to the "Theme selection" dropdown. As soon as the admin changes any of the values on the "Colours" section this should be automatically chosen.
* There is no save button in this section as this one is moved to the end of the screen to confirm all the changes like in the rest of admin setting pages. The selection of the dropdown should actualise the colours bellow but not change the theme in the complete instance until the user clicks on the save at the bottom of the page. _\[enter acceptance criteria\]_
* **Colours** changes:
* In this section we display all the colours that the admin can change to create a custom theme divided in three blocks:
1. **Theme colours:**
* Principal colours of the theme: Main, Accent and Danger.
* Each colour automatically generates in the backend 6 deviation colours, 3 Major (darker) and 3 Minor (lighter).
* The principle colours are visible in the screen in a button coloured with the colour that contains an icon and the HEX code of the colour. Once the user clicks on this button a default HTML colour picker is triggered where the user can change the colour.
* The deviated colours can be overwritten using the link next to the principle colour button "Edit deviations" which will open a modal with the 6 deviated colours available to be modified. A reset all values is also available in this modal to go back to the automatic deviated values.
2. **Top navigation bar colours:**
* 4 colours are available here to be modified. These control the UI of the top navigation bar.
3. **Sidebar menu colour:**
* 4 colours are available here to be modified. These control the UI of the sidebar menu.
* **Logo, favicon and touch icon** changes:
* This section should be collapsable and expandable.
* By default the logos, favicon and touch icon of OpenProject will be loaded (no need to show them). And a text will explain this and allow the user to override if desired.
* The UI is actualised and uses the current buttons to upload a file.
## TBD:
* Do we want the deviated colours to be visible directly like in V2 or hidden like in V1?
* Do we want the **Colours** section to be collapsable? This will make the "Save" button more visible.
* Texts here need to be reviewed. <mention class="mention" data-id="72513" data-type="user" data-text="@Parimal Satyal">@Parimal Satyal</mention>, can you help with this part?
* Is deviations the correct word to descrive the automatic colours? Is it clear?
* Should we rename the whole setting page? "Design" seems pretty ambiguous for me. Maybe something like "Theming"?
## Visuals:
#### V1:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/53117/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/53118/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/53119/content">
#### V2:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/53120/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/53121/content">
## Figma:
https://www.figma.com/file/QT2DjrZkEcHiKE2dKxgzGp/Scale-Theming-2023?node-id=146%3A44956 _..._
**I want to** be able to change between OpenProject default themes or create my own theme in the "Design" admin settings
**so that** I have a branded instance
**Acceptance criteria**
* Reorganise the sections of the screen:
1. **Theme**
2. **Colours**
3. **Logo, favicon and touch icon**
* **Theme** changes:
* Include the new OpenProject default themes defined in <mention class="mention" data-id="47056" data-type="work_package" data-text="#47056">#47056</mention> in the dropdown " Theme selection".
* Add a "Custom theme" last option to the "Theme selection" dropdown. As soon as the admin changes any of the values on the "Colours" section this should be automatically chosen.
* There is no save button in this section as this one is moved to the end of the screen to confirm all the changes like in the rest of admin setting pages. The selection of the dropdown should actualise the colours bellow but not change the theme in the complete instance until the user clicks on the save at the bottom of the page.
* **Colours** changes:
* In this section we display all the colours that the admin can change to create a custom theme divided in three blocks:
1. **Theme colours:**
* Principal colours of the theme: Main, Accent and Danger.
* Each colour automatically generates in the backend 6 deviation colours, 3 Major (darker) and 3 Minor (lighter).
* The principle colours are visible in the screen in a button coloured with the colour that contains an icon and the HEX code of the colour. Once the user clicks on this button a default HTML colour picker is triggered where the user can change the colour.
* The deviated colours can be overwritten using the link next to the principle colour button "Edit deviations" which will open a modal with the 6 deviated colours available to be modified. A reset all values is also available in this modal to go back to the automatic deviated values.
2. **Top navigation bar colours:**
* 4 colours are available here to be modified. These control the UI of the top navigation bar.
3. **Sidebar menu colour:**
* 4 colours are available here to be modified. These control the UI of the sidebar menu.
* **Logo, favicon and touch icon** changes:
* This section should be collapsable and expandable.
* By default the logos, favicon and touch icon of OpenProject will be loaded (no need to show them). And a text will explain this and allow the user to override if desired.
* The UI is actualised and uses the current buttons to upload a file.
## TBD:
* Do we want the deviated colours to be visible directly like in V2 or hidden like in V1?
* Do we want the **Colours** section to be collapsable? This will make the "Save" button more visible.
* Texts here need to be reviewed. <mention class="mention" data-id="72513" data-type="user" data-text="@Parimal Satyal">@Parimal Satyal</mention>, can you help with this part?
* Is deviations the correct word to descrive the automatic colours? Is it clear?
* Should we rename the whole setting page? "Design" seems pretty ambiguous for me. Maybe something like "Theming"?
## Visuals:
#### V1:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/53117/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/53118/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/53119/content">
#### V2:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/53120/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/53121/content">
## Figma:
https://www.figma.com/file/QT2DjrZkEcHiKE2dKxgzGp/Scale-Theming-2023?node-id=146%3A44956