feat(ui): use local fonts (#5966)

ovh · Oct 6, 2021 · c44b723 · c44b723
1 parent bde3317
commit c44b723
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 11 deletions.
diff --git a/.gitignore b/.gitignore
@@ -44,8 +44,15 @@ ui/coverage
 ui/tests
 ui/typings
 ui/src/app/**/*.js
-ui/semantic
 ui/semantic\\
+ui/semantic/*
+!ui/semantic/src
+ui/semantic/src/*
+!ui/semantic/src/site
+ui/semantic/src/site/*
+!ui/semantic/src/site/globals
+ui/semantic/src/site/globals/*
+!ui/semantic/src/site/globals/site.variables
 ui/e2e/*.png
 ui/documentation
 ui/dist

diff --git a/ui/Makefile b/ui/Makefile
@@ -5,7 +5,7 @@ VERSION := $(if ${CDS_VERSION},${CDS_VERSION},snapshot)
 clean:
 	@rm -rf dist
 	@rm -rf node_modules
-	@rm -rf semantic
+	@find semantic -name "*" -not -path "*/site/globals/site.variables" -delete
 	@rm -rf semantic\\
 	@rm -f package-lock.json
 

diff --git a/ui/angular.json b/ui/angular.json
@@ -29,16 +29,15 @@
               "node_modules/codemirror/addon/hint/show-hint.css",
               "node_modules/codemirror/addon/lint/lint.css",
               "node_modules/codemirror/theme/darcula.css",
-              "node_modules/fomantic-ui/dist/semantic.css",
               "node_modules/angular2-toaster-sgu/toaster.css",
               "node_modules/font-awesome/css/font-awesome.css",
               "node_modules/animate.css/animate.min.css",
               "node_modules/prismjs/themes/prism-okaidia.css",
+              "semantic/dist/semantic.min.css",
               "src/styles.scss"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.js",
-              "node_modules/fomantic-ui/dist/semantic.min.js",
               "node_modules/codemirror/lib/codemirror.js",
               "node_modules/codemirror/mode/shell/shell.js",
               "node_modules/codemirror/addon/mode/simple.js",
@@ -62,7 +61,8 @@
               "node_modules/js-yaml/dist/js-yaml.js",
               "resources/cds-hint.js",
               "node_modules/ansi_up/ansi_up.js",
-              "node_modules/prismjs/prism.js"
+              "node_modules/prismjs/prism.js",
+              "semantic/dist/semantic.min.js"
             ],
             "allowedCommonJsDependencies": [
                 "raven-js",
@@ -137,7 +137,6 @@
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [
               "node_modules/jquery/dist/jquery.js",
-              "node_modules/fomantic-ui/dist/semantic.min.js",
               "node_modules/codemirror/lib/codemirror.js",
               "node_modules/codemirror/mode/shell/shell.js",
               "node_modules/codemirror/addon/mode/simple.js",
@@ -155,16 +154,17 @@
               "node_modules/codemirror/addon/edit/matchbrackets.js",
               "node_modules/codemirror/addon/display/autorefresh.js",
               "resources/cds-hint.js",
-              "node_modules/ansi_up/ansi_up.js"
+              "node_modules/ansi_up/ansi_up.js",
+              "semantic/dist/semantic.min.js"
             ],
             "styles": [
               "node_modules/dragula/dist/dragula.css",
               "node_modules/codemirror/lib/codemirror.css",
               "node_modules/codemirror/addon/hint/show-hint.css",
-              "node_modules/fomantic-ui/dist/semantic.css",
               "node_modules/angular2-toaster-sgu/toaster.css",
               "node_modules/font-awesome/css/font-awesome.css",
               "node_modules/animate.css/animate.min.css",
+              "semantic/dist/semantic.min.css",
               "src/styles.scss"
             ],
             "assets": [

diff --git a/ui/karma.conf.js b/ui/karma.conf.js
@@ -17,7 +17,7 @@ module.exports = function (config) {
             {pattern: './src/test.ts', watched: false},
             {pattern: './src/assets/**/*.png', watched: false, included: false, served: true},
             {pattern: './node_modules/jquery/dist/jquery.js', watch: false, included: true, served: true},
-            {pattern: './node_modules/fomantic-ui/dist/semantic.js', watch: false, included: true, served: true},
+            {pattern: './semantic/dist/semantic.js', watch: false, included: true, served: true},
             {pattern: './node_modules/codemirror/lib/codemirror.js', watch: false, included: true, served: true},
             {pattern: './node_modules/dragula/dist/dragula.js', watch: false, included: true, served: true}
         ],

diff --git a/ui/package.json b/ui/package.json
@@ -9,6 +9,8 @@
   },
   "scripts": {
     "ng": "ng",
+    "gulp": "gulp",
+    "build:semantic": "gulp -f ./semantic/gulpfile.js build",
     "start": "ng serve -c development",
     "test": "ng test --watch false --code-coverage",
     "e2e": "testcafe chromium:headless ./e2e/tests/* -S -s screenshots",
@@ -40,6 +42,7 @@
     "@angular/platform-browser": "11.2.14",
     "@angular/platform-browser-dynamic": "11.2.14",
     "@angular/router": "11.2.14",
+    "@fontsource/lato": "4.5.0",
     "@icholy/duration": "5.0.0",
     "@ngui/auto-complete": "3.0.0",
     "@ngx-translate/core": "12.1.2",

diff --git a/ui/semantic/src/site/globals/site.variables b/ui/semantic/src/site/globals/site.variables
@@ -0,0 +1,5 @@
+/*******************************
+     User Global Variables
+*******************************/
+
+@importGoogleFonts : false;
diff --git a/ui/src/styles.scss b/ui/src/styles.scss
@@ -2,6 +2,16 @@
 
 @import "common";
 
+@import "~@fontsource/lato/scss/mixins";
+
+@include fontFace($style: italic, $weight: 400);
+
+@include fontFace($style: italic, $weight: 700);
+
+@include fontFace($style: normal, $weight: 400);
+
+@include fontFace($style: normal, $weight: 700);
+
 html,
 body {
     overflow-y: hidden;
@@ -50,11 +60,11 @@ a.disabled:hover {
 }
 
 .CodeMirror-empty {
-  color: $polar_grey_2 !important;
+    color: $polar_grey_2 !important;
 }
 
 app-workflow-admin .CodeMirror-scroll {
-  min-height: 180px;
+    min-height: 180px;
 }
 
 .fullheight {