The spacing is off and everything is hardcoded, but it's not my main
focus at the moment. I expect to enter a dialog over it with our
designer.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This is not feature complete but will hold the interactive element to
trigger the display of the Settings modal.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
The design is too complex as to not use it as a Component Modal. It took
me a little to wrap my head around the API but I think I'm on the right
track now.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
I realised that I must not show the sidebar everywhere. So to not move
code around I extracted it into its own component. This one is not
matching the design (because of the links etc.) but is a step in the
direction.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This shows an overlay when selecting an element.
The next part is populating the drawer with actual content.
I want to get feedback in the meantime, on whether the drawer is going
in the right direction (even if I need tweaking the size and
transition).
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This is now showing the MainMenu on the profile page which in turn
pulls in the Settings modal.
I wasn't able to register the modal on Storybook yet, which means
that there won't be any on the Profile template or page story.
The implementation in Skeleton is causing some accessibility
warnings. However, since there next version is taking a radical
different approach I'm inclined to let it be for now. We should
document it somewhere, I guess.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
I realised that I must not show the sidebar everywhere. So to not move
code around I extracted it into its own component. This one is not
matching the design (because of the links etc.) but is a step in the
direction.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This is in need of at least one refactoring. Skeleton is redesigning
the AppRail we are using here. The layout is hard to style.
This implementation interacts with a drawer, but it will likely be
dropped in the final version.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This is the top part of the main menu which includes the Avatar overlay.
I'm not quite sure how to label each part.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
I'm going to break up my MainMenu into smaller components, starting with
the OverlayAvatar. Testing it taught me how to handle stores in Vitest.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This allows for proper testing and documentation in Storybook.
I also moved the image into its own component. This required me to
adjust the vitest.config.ts slightly because it wasn't finding the image
during tests.
Since components are fully translatable, this means we have new keys
now.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This markup was commented. In case we ever need it, git will have it
stored in the repo history.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
I also introduce Person24 as fallback avatar and grant it a new icon in
Storybook as consequence.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
I dropped the examples while at it.
Since Svelte-Octicons are used as-is I have to declare the license as
MIT.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
I received confirmation that Inter is meant to be used for the whole
application. Therefore I'm loading it from a remote server.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
As it is visible here, part of the layout is deferred to the parent
component. See Login template.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
There is a v8 in the beta, so I update the dependencies to check whether
I need to adjust something.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This is the second form I have touched. Here, I even have a light
validation implemented on the server.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
I also extracted the Icons we use into a story and looked into how I
could potentially allow for changing the locale.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
Right now it is using the default Skeleton.dev palette.
I feel like we need to adjust it to our needs.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This will need a refactor at some point by computing the formatted value
as reactive variable depending on the created_at and locale.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
I had to downgrade Vite because the Storybook builder does not support
v5 yet. Therefore this will be on a separate branch and updated as we
move along with the codebase.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
By moving the fallback text into its own component I was able to move
the list element into the History molecule. Its API has changed
accordingly. I have written tests to prevent regressions.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
