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>
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.
