|
| 1 | +<!-- |
| 2 | + Community members who would like to propose an idea or feature should begin |
| 3 | + by creating a GitHub Discussion. See the repo README.md for more info. |
| 4 | +
|
| 5 | + To use this template: create a new, empty file in the repo under `proposals/${ID}.md`. |
| 6 | + Replace `${ID}` with the official accepted proposal ID, found in the GitHub Issue |
| 7 | + of the accepted proposal. |
| 8 | +--> |
| 9 | + |
| 10 | +**If you have feedback and the feature is released as experimental, please leave it on the Stage 3 PR. Otherwise, comment on the Stage 2 issue (links below).** |
| 11 | + |
| 12 | +- Start Date: 2024-10-01 |
| 13 | +- Reference Issues: [withstudiocms/studiocms Issue #304](https://github.com/withstudiocms/studiocms/issues/304) |
| 14 | +- Implementation PR: [withstudiocms/studiocms PR #333](https://github.com/withstudiocms/studiocms/pull/333) |
| 15 | +- Stage 2 Issue: [withstudiocms/studiocms Discussion #294](https://github.com/withstudiocms/studiocms/discussions/294) |
| 16 | +- Stage 3 PR: [withstudiocms/roadmap PR #1](https://github.com/withstudiocms/roadmap/pull/1) |
| 17 | + |
| 18 | +# Summary |
| 19 | + |
| 20 | +A proposal to redesign (and, if necessary, rewrite parts of) the StudioCMS dashboard. |
| 21 | + |
| 22 | +## Champions |
| 23 | + |
| 24 | +- Louis Escher ([@louisescher](https://github.com/louisescher)) |
| 25 | +- Adam Matthiesen ([@Adammatthiesen](https://github.com/Adammatthiesen)) |
| 26 | + |
| 27 | +## Overview / Motivation |
| 28 | + |
| 29 | +The current StudioCMS dashboard, while functional, leaves a lot to be desired in terms of UI/UX design. Since this project aspires to be the default CMS for all Astro projects big and small, a better dashboard is needed to facilitate the needs of multiple types of users - be it developers or office workers. |
| 30 | + |
| 31 | +### Principles: |
| 32 | + |
| 33 | +- The dashboard should function on all devices. |
| 34 | +- The dashboard should provide an easy way to manage StudioCMS for everyone, not just developers |
| 35 | +- The dashboard should be easy to get used to |
| 36 | +- The dashboard should provide functionality that can be extended as needed, in future updates and with plugins |
| 37 | + |
| 38 | +## Figma Prototype |
| 39 | + |
| 40 | +I have created a [Figma board](https://www.figma.com/design/9ilUXDWbBVEv6FMSMzUTmf/StudioCMS-Concept?m=auto&t=8EDyorFtqAOuojKZ-1) and a matching [Figma prototype](https://www.figma.com/proto/9ilUXDWbBVEv6FMSMzUTmf/Untitled?page-id=0:1&node-id=12-323&node-type=frame&viewport=582,489,0.07&t=SN8G0ZTJgFZED3I5-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=25:1543&disable-default-keyboard-nav=1&hide-ui=1) that can be used to see an interactive early version of this concept. |
| 41 | + |
| 42 | +## Things that are needed for this to work |
| 43 | + |
| 44 | +- The plugin definition syntax needs to be reworked in order for plugins to be able to: |
| 45 | + - Transform content before it is saved in the database |
| 46 | + - Add cards to the homepage to display info at a glance |
| 47 | + - Create their own settings pages based on a template/fields syntax that gives them access to input components |
| 48 | + - Allow plugins to add their own page content fields & implementations |
| 49 | +- [Issue #293 (Optional diff option)](https://github.com/astrolicious/studiocms/issues/293) would need to be implemented |
| 50 | +- The permissions system would need to be overhauled: |
| 51 | + - A new `Owner` permission, given to the person who did the onboarding |
| 52 | +- A new invite system to add new users via a link |
| 53 | +- A shared component library for all inputs, modals, layouts etc. |
| 54 | +- The onboarding logic would need to be reworked somewhat to allow for OAuth accounts to be added during setup |
| 55 | +- Some changes would need to be made to the current markdown editor |
| 56 | + |
| 57 | +**Feedback on design & functionality would be greatly appreciated! 😊** |
| 58 | + |
| 59 | +> [!NOTE] |
| 60 | +> This UI change has been discussed on the [Astrolicious Discord Server](https://chat.astrolicious.dev/) in the `#studiocms` channel for a few days now. Refer to that for suggestions that have already been made. |
| 61 | +
|
| 62 | +## Amendments |
| 63 | + |
| 64 | +### Amendment 1 |
| 65 | + |
| 66 | +#### Login Page Prototype |
| 67 | + |
| 68 | +We (the community & I) have created a prototype for a login page that you can view in your browser: |
| 69 | +- [Webpage](https://louisescher.github.io/studiocms-login-test/) |
| 70 | +- [GitHub Repo](https://github.com/louisescher/studiocms-login-test) |
| 71 | + |
| 72 | +Contributions for new StudioCMS-specific backgrounds or new looks (better glass material / outline) are appreciated. Just open a PR on the repo. A guide can be found in the `README.md` file. If you find any bugs / performance issues, please open up an issue on the repo. |
| 73 | + |
| 74 | +#### Palettes |
| 75 | + |
| 76 | +Here's the palette found in the prototype, plus a light mode version: |
| 77 | + |
| 78 | + |
| 79 | + |
| 80 | + |
| 81 | +### Amendment 2 |
| 82 | + |
| 83 | +#### Double-Sidebar on Mobile POC |
| 84 | + |
| 85 | +@jdtjenkins asked me to create a mobile version of the double sidebar, so here you go: |
| 86 | + |
| 87 | +- [GitHub Pages deployment](https://louisescher.github.io/studiocms-sidebar-poc/) |
| 88 | +- [GitHub repo](https://github.com/louisescher/studiocms-sidebar-poc) |
| 89 | + |
| 90 | +The general idea goes as follows: |
| 91 | + |
| 92 | +1. When visiting the content management page on mobile, you start with seeing the "inner" sidebar |
| 93 | +2. You select a folder to navigate into, and eventually click on a page |
| 94 | +3. The sidebar gets hidden and the editing content is revealed to you |
| 95 | +4. At any time, you can choose a different page via the hamburger menu in the top left corner |
| 96 | +*Side note, might wanna have a modal warning about leaving the site without saving changes* |
| 97 | +5. You either select a different page or head back to the "outer" sidebar with the arrow button |
| 98 | + |
| 99 | +A couple things to note about the POC: |
| 100 | + |
| 101 | +- A few animations are broken in the POC, I expect them to work properly once this is a well implemented system and not just some thrown-together HTML |
| 102 | +- After talking with @jdtjenkins, we agreed that it makes the most sense if the sidebar extends to full size on mobile devices, to cover the whole screen. This is something we will implement in the actual dashboard, but not in the POC. |
0 commit comments