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;
}

Tutorial

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