#324 added possibility to replace script-server theme

bugy · Dec 25, 2020 · 79f128a · 79f128a
1 parent f61311a
commit 79f128a
Show file tree

Hide file tree

Showing 68 changed files with 3,329 additions and 2,939 deletions.
diff --git a/.gitignore b/.gitignore
@@ -63,6 +63,7 @@ target/
 .ipynb_checkpoints
 
 conf/runners
+conf/theme
 conf/conf.json
 conf/.htpasswd
 logs

diff --git a/LICENSE b/LICENSE
@@ -22,12 +22,11 @@ The file is a part of the Font Software Project and distributed under SIL Open F
 
 images/search.png (modified)
 images/clear.png (modified)
-images/logout.png (modified)
 https://material.io/icons/
 The icon is available under the Apache License Version 2.0
 
-images/github.png (modified)
-"github_logo_social_social_network_icon" by pixan (https://www.iconfinder.com/iconsimple) is licensed under Creative Commons (Attribution 2.5 Generic). Image color was changed by the buggygm@gmail.com for this project.
+MainAppSidebar.vue: svg.github-icon:
+The svg is copied from https://github.com/logos page
 
 images/titleBackground.jpg
 The image is from free set of material design backgrounds, published by oxygenna.com and absolutely free to use (Source: http://www.oxygenna.com/news/brand-new-set-of-40-material-design-backgrounds)
@@ -45,6 +44,19 @@ https://material.io/icons/#ic_file_download
 
 
 images/g-logo-plain.png (modified)
-images/g-logo-plain-pressed.png (modified)
 https://developers.google.com/identity/branding-guidelines
 Licensed under the Creative Commons Attribution 3.0 License
+
+samples/themes/dark/darkBackground_header.jpg (modified)
+samples/themes/dark/darkBackground_login.jpg (modified)
+Copyright © 2018 onlyvectorbackgrounds.com
+The images are taken from https://onlyvectorbackgrounds.com/abstract-geometric-background-dark-3/ and modified for this project
+License:
+https://onlyvectorbackgrounds.com/terms/
+Extract:
+YOU CAN
+Use the images for personal use as they are, in part or remix to make other designs.
+Use the images for commercial use as they are, in part or remix to make other designs.
+YOU CANNOT
+Claim that the images are your property or were designed by you.
+Redistribute, sell, licence, sublicense or rent the images (e.g. selling on stock imagery sites).
diff --git a/samples/themes/dark/darkBackground_header.jpg b/samples/themes/dark/darkBackground_header.jpg
diff --git a/samples/themes/dark/darkBackground_login.jpg b/samples/themes/dark/darkBackground_login.jpg
diff --git a/samples/themes/dark/theme.css b/samples/themes/dark/theme.css
@@ -0,0 +1,42 @@
+html:root {
+    --hover-color: rgba(255, 255, 255, 0.04);
+    --focus-color: rgba(255, 255, 255, 0.12);
+    --focus-color-solid: #424242;
+
+    --font-color-main: rgba(255, 255, 255, 0.87);
+    --font-color-medium: rgba(255, 255, 255, 0.60);
+    --font-color-disabled: rgba(255, 255, 255, 0.38);
+
+    --primary-color: #dce775;
+    --primary-color-raised-hover-solid: #E6F17F;
+    --primary-color-raised-focus-solid: #FAFF93;
+    --primary-color-when-focused: rgba(0, 0, 0, 0.12);
+    --primary-color-when-hovered: rgba(0, 0, 0, 0.04);
+    --font-on-primary-color-main: rgba(0, 0, 0, 0.87);
+    --font-on-primary-color-medium: rgba(0, 0, 0, 0.60);
+
+    --primary-color-dark-color: #a8b545;
+    --primary-color-dark-when-focused: rgba(0, 0, 0, 0.12);
+    --primary-color-dark-when-hovered: rgba(0, 0, 0, 0.04);
+    --font-on-primary-color-dark-main: rgba(0, 0, 0, 0.87);
+    --font-on-primary-color-dark-medium: rgba(0, 0, 0, 0.60);
+
+    --primary-color-light-color: #F0F4C3;
+
+    --surface-color: #121212;
+
+    --background-color: #242424;
+    --background-color-slight-emphasis: rgba(255, 255, 255, 0.05);
+    --background-color-high-emphasis: rgba(255, 255, 255, 0.09);
+    --background-color-level-4dp: rgba(255, 255, 255, 0.09);
+    --background-color-level-8dp: rgba(255, 255, 255, 0.12);
+    --background-color-level-16dp: rgba(255, 255, 255, 0.15);
+    --background-color-disabled: rgba(255, 255, 255, 0.12);
+
+    --script-header-background: url('../theme/darkBackground_header.jpg') center / cover no-repeat;
+    --login-header-background: url('../theme/darkBackground_login.jpg') center / cover no-repeat;
+
+    --separator-color: #424242;
+
+    --outline-color: rgba(255, 255, 255, 0.18);
+}
diff --git a/samples/themes/orange/theme.css b/samples/themes/orange/theme.css
@@ -0,0 +1,14 @@
+html:root {
+
+    --primary-color: #E64A19;
+    --primary-color-raised-hover-solid: #F05423;
+    --primary-color-raised-focus-solid: #FF7241;
+
+    --primary-color-dark-color: #BF360C;
+
+    --primary-color-light-color: #FBE9E7;
+
+    --script-header-background: #FFCC80;
+    --login-header-background: var(--primary-color-dark-color);
+
+}
diff --git a/src/main.py b/src/main.py
@@ -137,7 +137,8 @@ def main():
         file_upload_feature,
         file_download_feature,
         secret,
-        server_version)
+        server_version,
+        CONFIG_FOLDER)
 
 
 if __name__ == '__main__':

diff --git a/src/web/server.py b/src/web/server.py
@@ -96,7 +96,7 @@ def is_allowed_during_login(request_path, login_url, request_handler):
                        '/fonts/roboto-latin-400.woff',
                        '/img/titleBackground_login.jpg']
 
-    return request_path in login_resources
+    return (request_path in login_resources) or (request_path.startswith('/theme/'))
 
 
 # In case of REST requests we don't redirect explicitly, but reply with Unauthorized code.
@@ -650,6 +650,18 @@ def is_admin_file(self, relative_path):
         return False
 
 
+class ThemeStaticFileHandler(AuthorizedStaticFileHandler):
+
+    async def get(self, path: str, include_body: bool = True) -> None:
+        if path == 'theme.css':
+            self.absolute_path = self.get_absolute_path(self.root, path)
+            if not os.path.exists(self.absolute_path):
+                # if custom theme doesn't exist, return empty body
+                return
+
+        return await super().get(path, include_body)
+
+
 class ScriptParameterListFiles(BaseRequestHandler):
 
     @check_authorization
@@ -928,6 +940,7 @@ def init(server_config: ServerConfig,
          file_download_feature: FileDownloadFeature,
          secret,
          server_version,
+         conf_folder,
          *,
          start_server=True):
     ssl_context = None
@@ -972,6 +985,7 @@ def init(server_config: ServerConfig,
         handlers.append((r'/auth/config', AuthConfigHandler))
         handlers.append((r'/logout', LogoutHandler))
 
+    handlers.append((r'/theme/(.*)', ThemeStaticFileHandler, {'path': os.path.join(conf_folder, 'theme')}))
     handlers.append((r"/(.*)", AuthorizedStaticFileHandler, {"path": "web"}))
 
     settings = {

diff --git a/web-src/package.json b/web-src/package.json
@@ -7,7 +7,7 @@
     "core-js": "^3.6.4",
     "marked": "^0.7.0",
     "material-design-icons": "^3.0.1",
-    "materialize-css": "^1.0.0",
+    "materialize-css": "git://github.com/bugy/materialize.git#bugy-stable",
     "typeface-roboto": "0.0.75",
     "vue": "^2.6.11",
     "vue-router": "^3.1.5",
@@ -39,8 +39,8 @@
     "karma-webpack": "^4.0.2",
     "mocha": "^6.2.0",
     "mock-socket": "^9.0.2",
-    "node-sass": "^4.13.1",
-    "sass-loader": "^8.0.2",
+    "sass": "^1.29.0",
+    "sass-loader": "^10.1.0",
     "sinon": "^7.5.0",
     "vue-cli-plugin-unit-karmajs": "git+https://git@github.com/bugy/vue-cli-plugin-unit-karmajs.git",
     "vue-template-compiler": "^2.6.11"

diff --git a/web-src/public/admin.html b/web-src/public/admin.html
@@ -6,9 +6,10 @@
     <meta content="width=device-width, initial-scale=1" name="viewport">
 
     <link href="<%= BASE_URL %>favicon.ico" rel="icon">
+    <link href="./theme/theme.css" rel="stylesheet">
 
 </head>
-<body>
+<body class="script-server">
 <div id='admin-page'>
 
 </div>

diff --git a/web-src/public/index.html b/web-src/public/index.html
@@ -7,10 +7,11 @@
     <meta content="width=device-width, initial-scale=1" name="viewport">
 
     <link href="<%= BASE_URL %>favicon.ico" rel="icon">
+    <link href="./theme/theme.css" rel="stylesheet">
 
 </head>
 
-<body>
+<body class="script-server">
 <div id="app"></div>
 </body>
 

diff --git a/web-src/public/login.html b/web-src/public/login.html
@@ -7,10 +7,11 @@
     <meta content="width=device-width, initial-scale=1" name="viewport">
 
     <link href="<%= BASE_URL %>favicon.ico" rel="icon">
+    <link href="./theme/theme.css" rel="stylesheet">
 
 </head>
 
-<body id="login-body" class="valign-wrapper">
+<body id="login-body" class="valign-wrapper script-server">
 <div id="login-panel" class="card">
     <div class="card-image"></div>
     <div class="card-content" id="login-content-container">
@@ -38,14 +39,15 @@
 
 <script type="text/template" id="login-google_oauth-template">
     <div>
-        <input type="submit" id="login-google_oauth-button" class="login-button" value="Sign in with Google">
+        <input type="submit" id="login-google_oauth-button" class="login-button oauth-button"
+               value="Sign in with Google">
         <div class="login-info-label"></div>
     </div>
 </script>
 
 <script type="text/template" id="login-gitlab-template">
     <div>
-        <input type="submit" id="login-gitlab-button" class="login-button" value="Sign in with Gitlab">
+        <input type="submit" id="login-gitlab-button" class="login-button oauth-button" value="Sign in with Gitlab">
         <div class="login-info-label"></div>
     </div>
 </script>