MOBILE-3320 course: Add customization css options

2021-06-03 14:46:36 +02:00 · 2021-06-03 14:46:36 +02:00 · 7a4cd09f73
commit 7a4cd09f73
parent 5aeee61fbe
10 changed files with 78 additions and 32 deletions
--- a/src/core/components/progress-bar/progress-bar.scss
+++ b/src/core/components/progress-bar/progress-bar.scss
@ -2,8 +2,11 @@
    display: flex;
    width: 100%;

+    --line-height: 40px;
+    --bar-margin: 16px 0;
+
    .core-progress-text {
-        line-height: 40px;
+        line-height: var(--line-height);
        font-size: 1rem;
        color: var(--text-color);
        width: 55px;
@ -14,7 +17,7 @@
        -webkit-appearance: none;
        appearance: none;
        height: var(--height);
-        margin: 16px 0;
+        margin: var(--bar-margin);
        padding: 0;
        display: block;
        width: 100%;
--- a/src/core/features/course/components/format/format.scss
+++ b/src/core/features/course/components/format/format.scss
@ -17,13 +17,14 @@

    .core-course-thumb {
        display: none;
-        height: 150px;
+        height: #{$core-courseimage-on-course-height};
        width: 100%;
        overflow: hidden;
        cursor: pointer;
        pointer-events: auto;
        position: relative;
        background: var(--ion-item-background);
+        border-bottom: 1px solid var(--gray);

        img {
            position: absolute;
@ -34,6 +35,19 @@
        }
    }

+    @if ($core-show-courseimage-on-course) {
+        .core-course-thumb {
+            display: block;
+        }
+    }
+
+    @if ($core-hide-progress-on-course) {
+        .core-course-progress {
+            display: none;
+        }
+    }
+
+
    .core-button-selector-row {
        display: flex;
        core-combobox {
--- a/src/core/features/course/components/section-selector/section-selector.scss
+++ b/src/core/features/course/components/section-selector/section-selector.scss
@ -1,17 +1,15 @@
-:host {
-    core-progress-bar {
-        .core-progress-text {
-            line-height: 24px;
-            position: absolute;
-            top: -8px;
-            right: 10px;
-        }
-        progress {
-            margin: 8px 0 4px 0;
-        }
-    }
+@import '~theme/globals.scss';
+core-progress-bar {
+    --bar-margin: 8px 0 4px 0;
+    --line-height: 20px;
+}

-    ion-badge {
-        text-align: start;
+@if ($core-hide-progress-on-section-selector) {
+    core-progress-bar {
+        display: none;
    }
-}
+}
+
+ion-badge {
+    text-align: start;
+}
--- a/src/core/features/course/components/section-selector/section-selector.ts
+++ b/src/core/features/course/components/section-selector/section-selector.ts
@ -26,6 +26,7 @@ import { ModalController } from '@singletons';
@Component({
    selector: 'core-course-section-selector',
    templateUrl: 'section-selector.html',
+    styleUrls: ['section-selector.scss'],
 })
 export class CoreCourseSectionSelectorComponent implements OnInit {

--- a/src/core/features/courses/components/course-progress/core-courses-course-progress.html
+++ b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
@ -55,7 +55,8 @@
            </ion-button>
        </div>
    </ion-item>
-    <ion-item *ngIf="showAll && course.progress! >= 0 && course.completionusertracked !== false" lines="none">
+    <ion-item *ngIf="showAll && course.progress! >= 0 && course.completionusertracked !== false" lines="none"
+        class="core-course-progress">
        <ion-label>
            <core-progress-bar [progress]="course.progress" a11yText="core.courses.aria:courseprogress"></core-progress-bar>
        </ion-label>
--- a/src/core/features/courses/components/course-progress/course-progress.scss
+++ b/src/core/features/courses/components/course-progress/course-progress.scss
@ -41,6 +41,18 @@
            }
        }

+        @if ($core-course-hide-thumb-on-cards) {
+            .core-course-thumb {
+                display: none;
+            }
+        }
+
+        @if ($core-course-thumb-on-cards-background) {
+            .core-course-thumb {
+                background: $core-course-thumb-on-cards-background !important;
+            }
+        }
+
        .core-course-additional-info {
            margin-bottom: 8px;
        }
@ -86,6 +98,12 @@
                width: 50px;
            }
        }
+
+        @if ($core-course-hide-progress-on-cards) {
+            .core-course-progress {
+                display: none;
+            }
+        }
    }

    button {
--- a/src/theme/globals.variables.scss
+++ b/src/theme/globals.variables.scss
@ -324,12 +324,13 @@ $core-side-blocks-max-width: 30% !default;
 $core-side-blocks-min-width: 280px !default;

 $core-combobox-color: $black !default;
+$core-combobox-background: $ion-item-background !default;
 $core-combobox-color-dark: $white !default;
+$core-combobox-background-dark: $ion-item-background-dark !default;
 $core-combobox-border-color: $primary !default;
 $core-combobox-border-color-dark: $primary-dark !default;
 $core-combobox-border-width: 3px !default;

-
 $core-selected-item-color: $primary !default;
 $core-selected-item-color-dark: $primary-dark !default;
 $core-selected-item-border-width: 5px !default;
@ -358,6 +359,25 @@ $core-avatar-size:  44px !default;
 $core-send-message-input-background: $gray !default;
 $core-send-message-input-color: $black !default;

+$core-more-icon-color: null !default;
+$core-more-item-border: null !default;
+$core-more-hide-siteinfo: false !default;
+$core-more-hide-sitename: false !default;
+$core-more-hide-siteurl: false !default;
+
+$core-fixed-url: false !default;
+$core-dashboard-logo: false !default;
+$core-always-show-main-menu: false !default;
+
+$core-show-courseimage-on-course: false !default;
+$core-hide-progress-on-course: false !default;
+$core-courseimage-on-course-height: 150px !default;
+$core-hide-progress-on-section-selector: false !default;
+
+$core-course-hide-thumb-on-cards: false !default;
+$core-course-thumb-on-cards-background: null !default;
+$core-course-hide-progress-on-cards: false !default;
+
 $addon-calendar-event-category-color: $purple !default;
 $addon-calendar-event-course-color: $red !default;
 $addon-calendar-event-group-color: $yellow !default;
@ -392,13 +412,3 @@ $addon-forum-highlight-color: $gray-lighter !default;

 $addon-forum-border-color-dark: $gray-dark !default;
 $addon-forum-highlight-color-dark: $gray-darker !default;
-
-$core-more-icon-color: null !default;
-$core-more-item-border: null !default;
-$core-more-hide-siteinfo: false !default;
-$core-more-hide-sitename: false !default;
-$core-more-hide-siteurl: false !default;
-
-$core-fixed-url: false !default;
-$core-dashboard-logo: false !default;
-$core-always-show-main-menu: false !default;
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@ -462,7 +462,7 @@ img.large-avatar,
    margin-bottom: 10px;
    border-radius : 50%;
    padding: 4px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--gray);
    background-color: transparent;
 }

--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@ -97,7 +97,7 @@
    --item-divider-color: #{$ion-item-divider-color-dark};
    --spacer-background: #{$core-spacer-background-dark};

-    --core-combobox-background: var(--ion-item-background);
+    --core-combobox-background: #{$core-combobox-background-dark};
    --core-combobox-color: #{$core-combobox-color-dark};

    --selected-item-color: #{$core-selected-item-color-dark};
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@ -222,6 +222,7 @@

    --core-combobox-background: var(--ion-item-background);
    --core-combobox-color: #{$core-combobox-color};
+    --core-combobox-background: #{$core-combobox-background};
    --core-combobox-border-color: #{$core-combobox-border-color};
    --core-combobox-border-width: #{$core-combobox-border-width};