This PR contains new Radiobutton components that are needed for the signature-check-plugin. Additionally the ref passing for ControlledChipInputs was also fixed. The current styling of the Radio Buttons need to be discussed with Philipp again. The Signature Check Plugin provides an example use of it.
Co-authored-by: Konstantin Schaper<konstantin.schaper@cloudogu.com>
Squash commits of branch feature/popover:
- -added: popover and ci status story
- -fixed: license formats
- work in progress
- -added: popover stories
- work in progress
- work in progress
- work in progressclear
- work in progress
- -changed: realigned close button
added aria label to close button
- -added: comments
- -added: changelog file
- -fixed: findings
- -fixed: background
- -fixed: close button
- -fixed: arrow fill color
- -removed: has box shadow class, because popover already box-shadow
- -added: popover export
Co-authored-by: tzerr <thomas.zerr@cloudogu.com>
We introduced a new accessible combobox component. This component is based on headless ui and made compatible with our components and forms. Also we replaced the outdated `Autocomplete` component with the new combobox.
Co-authored-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Reviewed-by: Florian Scholdei <florian.scholdei@cloudogu.com>
Extends existing functionality, provides new fallbacks for translations and adds capabilities to manage array properties in configurations.
Committed-by: Florian Scholdei <florian.scholdei@cloudogu.com>
Co-authored-by: Florian Scholdei <florian.scholdei@cloudogu.com>
Our current tooltip component has been causing ui glitches for over a year now because it did not use react portal to render the tooltip content outside the react render tree which interfered with html/css. The new component is based on a fully accessible component by radix-ui. The styling, for now, has been kept from the original tooltip.
Committed-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
When set programmatically, browsers don't always consistently show a focus indicator which is required for list navigation via keyboard to function properly. We already implemented a custom focus indicator for buttons which has now been expanded with slight tweaks to anchor tags as well. This is by no means a complete solution and will be revisited at a later date.
After many days invested in making tailwind work in the SCM-Manager environment as well as a long discussion last week, we have decided not to move further with tailwind, but still keep adding new, independent modules for frontend components. Tailwind simply overcomplicated our build pipeline because bulma was already part of the api and the two were incompatible on several occasions. Styling will continue to be guided by bulma and all parts related to tailwind are removed. We therefore continue the trend of focusing on improving our existing stack rather than adding further complexity.
Introduce tailwind as new frontend styling library to replace bulma in the longer run. Also create the first new ui library `ui-buttons` which will be the new standard for buttons ins SCM-Manager. In this library we reconsidered which types of buttons should be used to create a clean and consistent ui.
Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
The styling for the focused line (e.g. permalink) in the source view with syntax highlighting was hard-coded and did not meet accessibility standards, especially in high-contrast mode. This pull request introduces two new css variables that are fine-tuned to meet contrast requirements for each theme. An additional "bar" with specifically high contrast has been added to the left of the focused line, because it was impossible to find one background color that would provide sufficient contrast with both the page background as well as all highlighting colors.
Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
In .card-tables there was an action area that had a darker background. Now this area only contains the delete action. Also, users mistakenly assumed that the hovered area could be clicked. It has therefore been removed and the icons themselves have received a hover effect.
The focus state of buttons should be clearly visible in all modes to help find the focused element. Buttons are especially important and therefore receive a special outline in a unique color. The colored outline can be set with CSS-variables.
* The scss variable $popover-border-color is now also used throughout the internal styles
* Derived css variable is exported only once
* Scss definitions are now organized and structured with descriptive comments
* Fix incorrect styling due to a too dark and at the same time very thick border in the CreateButton component
* Darken $border-light a little, so that it is not brighter than the border in dark mode
This commit introduces a new more relaxed theme, the dark theme!
In addition, the theme can now be selected according to the system defaults.
And the other themes, as well as the general structure were unified/simplified.
Co-authored-by: Philipp Ahrendt <philipp.ahrendt@cloudogu.com>
Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>
Co-authored-by: Matthias Thieroff <matthias.thieroff@cloudogu.com>
Enable breaking of content to be fully available on small screens or highly zoomed displays. This should help improve accessibility.
Co-authored-by: Florian Scholdei <florian.scholdei@cloudogu.com>
Co-authored-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Fixes several accessibility issues:
- Provide a style for empty table column headers
- Add aria references and aria-labels
- Remove aria references if the referenced element is not rendered
There has been the requirement to improve accessibility for our tooltips by allowing tooltips to be closed via the escape key as well as allowing users to hover over the tooltip text. These combined requirements were not possible with the previous implementation that used a bulma-tooltip extension. That meant we had to implement the full tooltip html and css from scratch. A declared goal was to keep the new implementation as close to the previous look-and-feel as possible. The redundant dependency has been removed in the process.
This is the fixed re-commit of #1938 (Commit 67bd96ea81)
Co-authored-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>
If the plugin center authentication fails,
the plugins are fetched without authentication
and a warning is displayed on the plugin page.
Co-authored-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>
There has been the requirement to improve accessibility for our tooltips by allowing tooltips to be closed via the escape key as well as allowing users to hover over the tooltip text. These combined requirements were not possible with the previous implementation that used a bulma-tooltip extension. That meant we had to implement the full tooltip html and css from scratch. A declared goal was to keep the new implementation as close to the previous look-and-feel as possible. The redundant dependency has been removed in the process.
Implement initial focus for modals. Change all modals including forms to put initial focus on the first input. When Enter is pressed on any input (CTRL + Enter for Textareas), the form is submitted if it is valid.
Co-authored-by: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Add branch/tag/revision compare to see diffs and changesets between the source and target revisions. This feature is reachable from the branch/tag detail page and also the source code view.
Co-authored-by: Florian Scholdei <florian.scholdei@cloudogu.com>
Co-authored-by: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Unify and enhance font stack for mono-fonts. The updated font stack should provide a better UX on diverse platforms by using standard fonts. Fallbacks are more diverse. The amount of similar but not equal fonts in relation to 3rd-party plugins should be reduced.
Further fixes for the high contrast mode, modly regarded to the autocomplete component.
This is a fixup for #1892
Co-authored-by: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Allows scm-manager instances to authenticate with the configured plugin center. If the default plugin center is used, a myCloudogu account is used for authentication which in turn enables downloading special myCloudogu plugins directly through the plugin administration page.
Co-authored-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Co-authored-by: Matthias Thieroff <93515444+mthieroff@users.noreply.github.com>
Co-authored-by: Philipp Ahrendt <philipp.ahrendt@cloudogu.com>
Add an experimental high contrast color theme to SCM-Manager. The high contrast mode uses a dark background and color with a high contrast for a better accessibility.
The change adds the theme to ui-styles and theme switcher to the storybook of ui-components.
The landing-page-plugin is being reworked and integrated into the repository overview. This requires new extension points and slightly adjusted components to better match the repository overview page visually. Also, binder options can now be passed as an object which offer a new priority option that causes sorting in descending order.
