Skip to main content

Styling

Um Einfluss auf das Styling der Viewer-Komponenten nehmen zu können, müssen SCSS-Variablen überschrieben werden.

Verwendung des Stylesheets​

Der Viewer liefert ein Default-Style mit, dieses muss im Projekt referenziert werden.

Es kann dabei zwischen 3 Themes gewählt werden:

  • Dark
  • Light
  • Automatisch

Das automatische Theme wählt das Dark oder Light-Theme automatisch je nach Einstellung des Browsers/Betriebssystems aus.

Für das Einbinden existieren zwei Wege.

Import via angular.json​

In der angular.json-Datei kann die SCSS-Datei im Block styles referenziert werden.

Der Block kann folgendermaßen gefunden werden: projects.<project-name>.architect.build.configurations.<development AND production>.styles.

"styles": [
    "src/styles.scss", // Angular Default
    "./node_modules/@levigo/jadice-web-icons/assets/icon-font.scss", // jadice Icons
    "./node_modules/@levigo/webtoolkit-ng-client/assets/adaptive-theme.scss" // Default-Style
    "./node_modules/@levigo/webtoolkit-ng-client/assets/dark-theme.scss" // Alternativ: Dark
    "./node_modules/@levigo/webtoolkit-ng-client/assets/light-theme.scss" // Alternativ: Light
    "src/assets/themes/my-theme.scss" // Projektspezifisch
]

Import via SCSS​

Alternativ kann auch innerhalb der src/styles.css (Angular Default) auch ein Import durchgeführt werden:

@import "assets/my-theme";

Eigene Styles​

Nachdem ein integrationsspezifisches Stylesheet (SCSS-Datei) angelegt wurde, muss dieses in dem Projekt referenziert werden. Dies erfolgt auf selbem Wege wie im ersten Absatz beschrieben.

Farben​

Die Farben können über die folgenden SCSS-Variablen überschrieben werden:

$background-level-0: #FFFFFF;
$background-level-1: #DEDFE0;
$background-level-1-half-opacity: rgba(171, 186, 204, 0.5);
$background-level-2: #ADBBCD;
$background-level-3: #8D9095;
$background-level-4: #595F67;
$foreground-level-0: #000000;
$foreground-level-1: #30363F;
$foreground-level-2: #434952;
$foreground-level-2-half-opacity: rgba(48, 54, 63, 0.85);
$foreground-level-3: #5C6168;
$foreground-level-4: #131619;

$accent-level-0: #70a0ff;
$accent-level-1: #367aff;
$accent-level-1-half-opacity: rgba(54, 121, 255, 0.5);
$accent-level-2: #2D65CE;

$warn-level-0: #ffb870;
$warn-level-1: #ff9a36;

$gradient-background-level-1: #ffffff;
$gradient-background-level-2: #cbd0d2;

@import "@levigo/jadice-common-components/assets/light-theme";
@include JADICE_RIGID_THEME((

    annotation-panel: (
        background : $background-level-0,
        foreground: $foreground-level-0,
        entry-background-hover: $background-level-3,
        entry-background-selected: $accent-level-1,
        selection-delete-button-background: $accent-level-1,
        selection-delete-button-background-hover: $accent-level-0,
        selection-delete-button-foreground: $foreground-level-0,
        separator: $foreground-level-2-half-opacity,
        scrollbar: $foreground-level-1,
    ),

    search-bar: (
        background: $background-level-0,
        foreground: $foreground-level-0
    ),

    advanced-search-panel: (
        background: $background-level-2,
        foreground: $foreground-level-0,
        search-bar-background: $foreground-level-4,
        result-hover-background: $foreground-level-4,
        result-active-background: $accent-level-1,
        separator: $foreground-level-4,
        progress-bar: $foreground-level-0,
        checkbox: $foreground-level-4,
        checkbox-active: $accent-level-1,
        checkbox-hover: $background-level-0,
        checkbox-hover-outline: $accent-level-1
    ),

    bookmark-panel: (
        background: $background-level-2,
        foreground: $foreground-level-0,
        result-hover-background: $foreground-level-4,
        result-active-background: $accent-level-1,
        separator: $foreground-level-4
    ),

    search-panel: (
        background: $background-level-0,
        foreground: $foreground-level-0
    ),

    line-width-editor: (
        background: $background-level-1,
        background-hover: $background-level-2,
        foreground: $foreground-level-0
    ),

    thumbnail-panel: (
        background: $background-level-2,
        foreground: $foreground-level-0,
        slider-thumb: $foreground-level-0,
        slider-track-background: $foreground-level-2,
        slider-track-fill: $foreground-level-1
    ),

    thumbnail-view: (
        highlight: $accent-level-1,
        outline: $accent-level-1-half-opacity,
        label: $foreground-level-0,
        active-label: $foreground-level-0
    ),

    open-file-modal: (
        dnd-border: $foreground-level-0,
        dnd-hint: $background-level-0,
        overlay: $background-level-0,
        scrollbar-thumb: $foreground-level-0,
        scrollbar-firefox-rail: $background-level-1,
        button-background: $accent-level-1,
        button-background-hover: $accent-level-0,
        foreground: $foreground-level-0,
        background: linear-gradient(to bottom, $gradient-background-level-1, $gradient-background-level-2)
    ),

    accessible-viewer: (
        background: linear-gradient(to bottom, $background-level-3, $background-level-2)
    )

));

@include DEFAULT_GWT_OVERRIDES(
    $viewer-background: linear-gradient(to bottom, $background-level-3, $background-level-2),
    $scrollbar-knob: $foreground-level-1,
    $scrollbar-knob-active: $foreground-level-0
);

html, body {
    .jadice-viewer-confirm-dialog-gwt {
        background: $background-level-2;
        color: white;
        border-radius: 5px;
    }

    .jadice-viewer-confirm-dialog-header-gwt {
        background: transparent;
        border-color: $background-level-3;
        font-weight: 400;
    }

    .jadice-viewer-confirm-dialog-content-gwt {
        background: transparent;
    }

    .jadice-viewer-confirm-dialog-actions-gwt > button {
        background-color: $accent-level-1;
    }

}

(Icon-)Fonts​

Der Viewer liefert die jadice Icons als Iconfont bereits mit. Diese enthält Icons für die gängigen Operationen im Viewer wie z.B. Drehen, Zoomen und so weiter. Alternativ können auch eigene Icons, beispielsweise bei Buttons, hinterlegt werden.

Dies wird an folgendem SCSS-Snippet veranschaulicht:

@import "@levigo/jadice-web-icons/assets/icon-font.scss";

@font-face {
    font-family: "Jadice Icons";
    font-style: normal;
    font-weight: 400;
    src: url(./assets/icons/icon-style-font.woff2) format('woff2');
    font-display: block; // Use FOIT text rendering strategy. While usually undesirable, it makes more sense than FOUT for icons.
}

.jadice-icon-font {
    $size: 28px;
    font-family: "Jadice Icons";
    font-weight: normal;
    font-style: normal;
    font-size: $size;
    height: $size !important;
    width: $size !important;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    pointer-events: none;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

Eigene Icons​

FontAwesome​

Durch die Encapsulation bei Web-Components ist es nicht ohne weiteres möglich, eigene Icons zu verwenden. Über den folgenden Weg ist es jedoch möglich, eigene Fontawesome-Icons zu verwenden.

package.json

"@fortawesome/fontawesome-common-types": "^7.2.0",
"@fortawesome/free-solid-svg-icons": "^7.2.0",

Komponente

import {IconDefinition} from "@fortawesome/fontawesome-common-types";
import {faUser} from "@fortawesome/free-solid-svg-icons";

...

faToSvg(
    faIcon: IconDefinition,
    opts: {
      /** default 'currentColor' */
      color?: string;
      /** px value for width/height; omit to let the SVG scale with its container */
      size?: number | string;
      className?: string;
      /** return only the <path>, without the <svg> wrapper */
      pathOnly?: boolean;
    } = {},
  ): string {
    const { color = 'currentColor', size, className, pathOnly = false } = opts;
    const [w, h, , , path] = faIcon.icon;
    const d: string = Array.isArray(path) ? path[path.length - 1] : path;
    const pathEl = `<path fill="${color}" d="${d}"/>`;
    if (pathOnly) return pathEl;
    const attrs = [
      'xmlns="http://www.w3.org/2000/svg"',
      `viewBox="0 0 ${w} ${h}"`,
      'role="img"',
      `aria-label="${faIcon.iconName}"`,
      className ? `class="${className}"` : '',
      size != null ? `width="${size}" height="${size}"` : '',
    ]
      .filter(Boolean)
      .join(' ');
    return `<svg ${attrs}>${pathEl}</svg>`;
  }
  
  ...
    ngOnInit(): void {
    AnnotationIconRegistry.get().addMapping("TEXT", {
      svgContent: this.faToSvg(faUser)
    })
...

Tutorial​

Ein ausführliches Beispiel zum Styling finden Sie auch in unserem Getting-Started-Repository.

Last updated on by David Werth