From 52a3d21af2b489e3554b115f1306226d4d7a4bd4 Mon Sep 17 00:00:00 2001 From: rob Date: Thu, 3 Mar 2022 15:33:37 -0500 Subject: [PATCH] light/dark mode and other new features from DTP Sites --- app/controllers/user.js | 7 +--- app/models/user.js | 3 ++ app/services/display-engine.js | 7 ++++ app/services/user.js | 1 + app/views/layouts/main.pug | 10 ++--- app/views/user/settings.pug | 6 +++ client/less/dtp-dark.less | 6 +++ client/less/dtp-light.less | 6 +++ client/less/site/header-section.less | 5 +-- ...t-theme.less => uikit-theme.dtp-dark.less} | 16 +++++--- client/less/site/uikit-theme.dtp-light.less | 25 ++++++++++++ client/less/site/variables.less | 1 - client/less/{style.less => style.common.less} | 5 --- gulpfile.js | 40 ++++++++++--------- lib/client/js/dtp-display-engine.js | 4 ++ 15 files changed, 99 insertions(+), 43 deletions(-) create mode 100644 client/less/dtp-dark.less create mode 100644 client/less/dtp-light.less rename client/less/site/{uikit-theme.less => uikit-theme.dtp-dark.less} (74%) create mode 100644 client/less/site/uikit-theme.dtp-light.less rename client/less/{style.less => style.common.less} (71%) diff --git a/app/controllers/user.js b/app/controllers/user.js index 19c5996..a71ede5 100644 --- a/app/controllers/user.js +++ b/app/controllers/user.js @@ -226,12 +226,7 @@ class UserController extends SiteController { await userService.updateSettings(req.user, req.body); - displayList.showNotification( - 'Member account settings updated successfully.', - 'success', - 'bottom-center', - 6000, - ); + displayList.reload(); res.status(200).json({ success: true, displayList }); } catch (error) { this.log.error('failed to update account settings', { error }); diff --git a/app/models/user.js b/app/models/user.js index bed0dca..14d681b 100644 --- a/app/models/user.js +++ b/app/models/user.js @@ -10,6 +10,8 @@ const Schema = mongoose.Schema; const { ResourceStats, ResourceStatsDefaults } = require('./lib/resource-stats'); +const DTP_THEME_LIST = ['dtp-light', 'dtp-dark']; + const UserFlagsSchema = new Schema({ isAdmin: { type: Boolean, default: false, required: true }, isModerator: { type: Boolean, default: false, required: true }, @@ -42,6 +44,7 @@ const UserSchema = new Schema({ flags: { type: UserFlagsSchema, select: false }, permissions: { type: UserPermissionsSchema, select: false }, optIn: { type: UserOptInSchema, required: true, select: false }, + theme: { type: String, enum: DTP_THEME_LIST, default: 'dtp-light', required: true }, stats: { type: ResourceStats, default: ResourceStatsDefaults, required: true }, }); diff --git a/app/services/display-engine.js b/app/services/display-engine.js index ba725d4..3dd76eb 100644 --- a/app/services/display-engine.js +++ b/app/services/display-engine.js @@ -109,6 +109,13 @@ class DisplayList { params: { href }, }); } + + reload ( ) { + this.commands.push({ + action: 'reload', + params: { }, + }); + } } class DisplayEngineService extends SiteService { diff --git a/app/services/user.js b/app/services/user.js index 2a274a2..202e39a 100644 --- a/app/services/user.js +++ b/app/services/user.js @@ -254,6 +254,7 @@ class UserService { username: userDefinition.username, username_lc, displayName: userDefinition.displayName, + theme: userDefinition.theme || 'dtp-light', }, }, ); diff --git a/app/views/layouts/main.pug b/app/views/layouts/main.pug index a99d95a..37d56a4 100644 --- a/app/views/layouts/main.pug +++ b/app/views/layouts/main.pug @@ -20,7 +20,7 @@ html(lang='en') block vendorcss - link(rel='stylesheet', href=`/dist/css/style.css?v=${pkg.version}`) + link(rel='stylesheet', href=`/dist/css/${user ? (user.theme || 'dtp-light') : 'dtp-light'}.css?v=${pkg.version}`) block js script(src=`/uikit/js/uikit.min.js?v=${pkg.version}`) @@ -101,14 +101,14 @@ html(lang='en') dtp.channel = !{JSON.stringify(channel || null)}; if DTP_SCRIPT_DEBUG - script(src=`/dist/js/dtpsites-app.js?v=${pkg.version}`, type="module") + script(src=`/dist/js/dtpweb-app.js?v=${pkg.version}`, type="module") else - script(src=`/dist/js/dtpsites-app.min.js?v=${pkg.version}`, type="module") + script(src=`/dist/js/dtpweb-app.min.js?v=${pkg.version}`, type="module") if user && user.flags.isAdmin if DTP_SCRIPT_DEBUG - script(src=`/dist/js/dtpsites-admin.js?v=${pkg.version}`, type="module") + script(src=`/dist/js/dtpweb-admin.js?v=${pkg.version}`, type="module") else - script(src=`/dist/js/dtpsites-admin.min.js?v=${pkg.version}`, type="module") + script(src=`/dist/js/dtpweb-admin.min.js?v=${pkg.version}`, type="module") block viewjs \ No newline at end of file diff --git a/app/views/user/settings.pug b/app/views/user/settings.pug index 306bc70..67c9281 100644 --- a/app/views/user/settings.pug +++ b/app/views/user/settings.pug @@ -92,5 +92,11 @@ block content input(id="optin-marketing", name="optIn.marketing", type="checkbox", checked= user.optIn ? user.optIn.marketing : false).uk-checkbox | Sales / Marketing + .uk-margin + label(for="theme").uk-form-label UI Theme + select(id="theme", name="theme").uk-select + option(value="dtp-light", selected= user ? user.theme === 'dtp-light' : true) Light Mode + option(value="dtp-dark", selected= user ? user.theme === 'dtp-dark' : false) Dark Mode + .uk-margin button(type="submit").uk-button.dtp-button-primary Update account settings \ No newline at end of file diff --git a/client/less/dtp-dark.less b/client/less/dtp-dark.less new file mode 100644 index 0000000..35dd0cb --- /dev/null +++ b/client/less/dtp-dark.less @@ -0,0 +1,6 @@ +@import "site/variables.less"; + +@import "node_modules/uikit/src/less/uikit.theme.less"; +@import "site/uikit-theme.dtp-dark.less"; + +@import "style.common.less"; \ No newline at end of file diff --git a/client/less/dtp-light.less b/client/less/dtp-light.less new file mode 100644 index 0000000..182e35c --- /dev/null +++ b/client/less/dtp-light.less @@ -0,0 +1,6 @@ +@import "site/variables.less"; + +@import "node_modules/uikit/src/less/uikit.theme.less"; +@import "site/uikit-theme.dtp-light.less"; + +@import "style.common.less"; \ No newline at end of file diff --git a/client/less/site/header-section.less b/client/less/site/header-section.less index fe2ef77..2d84c17 100644 --- a/client/less/site/header-section.less +++ b/client/less/site/header-section.less @@ -1,6 +1,5 @@ .uk-section.uk-section-header { - background-color: @site-brand-color; - color: white; + color: @site-brand-color; .profile-header-name { font-size: 2.5em; @@ -20,5 +19,5 @@ .uk-section.uk-section-header h4, .uk-section.uk-section-header h5, .uk-section.uk-section-header h6 { - color: white; + color: @site-brand-color; } \ No newline at end of file diff --git a/client/less/site/uikit-theme.less b/client/less/site/uikit-theme.dtp-dark.less similarity index 74% rename from client/less/site/uikit-theme.less rename to client/less/site/uikit-theme.dtp-dark.less index b4cbfd2..afe7240 100644 --- a/client/less/site/uikit-theme.less +++ b/client/less/site/uikit-theme.dtp-dark.less @@ -2,6 +2,12 @@ // Colors // +@site-brand-color: #ff0013; +@button-label-color: #e8e8e8; +@button-label-hover: #2a2a2a; +@social-link-color: #e8e8e8; +@checkout-button-text-color: #e8e8e8; + @global-background: #1a1a1a; @global-muted-background: #3a3a3a; @global-primary-background: #1e87f0; @@ -82,8 +88,8 @@ // Form // -@internal-form-select-image: "../images/backgrounds/form-select.svg"; -@internal-form-datalist-image: "../images/backgrounds/form-datalist.svg"; -@internal-form-radio-image: "../images/backgrounds/form-radio.svg"; -@internal-form-checkbox-image: "../images/backgrounds/form-checkbox.svg"; -@internal-form-checkbox-indeterminate-image: "../images/backgrounds/form-checkbox-indeterminate.svg"; \ No newline at end of file +@internal-form-select-image: "/uikit/images/backgrounds/form-select.svg"; +@internal-form-datalist-image: "/uikit/images/backgrounds/form-datalist.svg"; +@internal-form-radio-image: "/uikit/images/backgrounds/form-radio.svg"; +@internal-form-checkbox-image: "/uikit/images/backgrounds/form-checkbox.svg"; +@internal-form-checkbox-indeterminate-image: "/uikit/images/backgrounds/form-checkbox-indeterminate.svg"; \ No newline at end of file diff --git a/client/less/site/uikit-theme.dtp-light.less b/client/less/site/uikit-theme.dtp-light.less new file mode 100644 index 0000000..a737de8 --- /dev/null +++ b/client/less/site/uikit-theme.dtp-light.less @@ -0,0 +1,25 @@ +// +// Colors +// + +@site-brand-color: #ff0013; +@button-label-color: #2a2a2a; +@button-label-hover: #ffffff; +@social-link-color: #2a2a2a; +@checkout-button-text-color: #2a2a2a; + +// +// Component: Navbar +// + +@navbar-nav-item-height: @site-navbar-height; + +// +// Form +// + +@internal-form-select-image: "/uikit/images/backgrounds/form-select.svg"; +@internal-form-datalist-image: "/uikit/images/backgrounds/form-datalist.svg"; +@internal-form-radio-image: "/uikit/images/backgrounds/form-radio.svg"; +@internal-form-checkbox-image: "/uikit/images/backgrounds/form-checkbox.svg"; +@internal-form-checkbox-indeterminate-image: "/uikit/images/backgrounds/form-checkbox-indeterminate.svg"; \ No newline at end of file diff --git a/client/less/site/variables.less b/client/less/site/variables.less index 36104fc..a4169bf 100644 --- a/client/less/site/variables.less +++ b/client/less/site/variables.less @@ -1,2 +1 @@ -@site-brand-color: #d01a2a; @site-navbar-height: 64px; \ No newline at end of file diff --git a/client/less/style.less b/client/less/style.common.less similarity index 71% rename from client/less/style.less rename to client/less/style.common.less index be13fad..9fb7aea 100644 --- a/client/less/style.less +++ b/client/less/style.common.less @@ -1,8 +1,3 @@ -@import "site/variables.less"; - -@import "node_modules/uikit/src/less/uikit.theme.less"; -@import "site/uikit-theme.less"; - @import "site/main.less"; @import "site/border.less"; @import "site/comment.less"; diff --git a/gulpfile.js b/gulpfile.js index 6913550..52f8d76 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -57,15 +57,22 @@ function util_start_browsersync ( ) { }); } -function dtp_less ( ) { +async function dtp_less_dark ( ) { return gulp - .src('./client/less/style.less') - .pipe(plumber()) - .pipe(less({ - math: 'always', - })) - .pipe(gulp.dest('./dist/css')) - .pipe(browserSync.stream()); + .src('./client/less/dtp-dark.less') + .pipe(plumber()) + .pipe(less({ paths: [ __dirname ], math: 'always' })) + .pipe(gulp.dest('./dist/css')) + .pipe(browserSync.stream()); +} + +async function dtp_less_light ( ) { + return gulp + .src('./client/less/dtp-light.less') + .pipe(plumber()) + .pipe(less({ paths: [ __dirname ], math: 'always' })) + .pipe(gulp.dest('./dist/css')) + .pipe(browserSync.stream()); } function dtp_jshint_client ( ) { @@ -220,9 +227,8 @@ function dtp_jsbuild_prod ( ) { function dtp_watch_client (done) { var files = [ './client/less/**/*.less', - './client/less/dtp/*.less' ]; - gulp.watch(files, dtp_less); + gulp.watch(files, exports.less); var jsfiles = [ path.join(__dirname, '..', 'dtp', 'dtp-lib', 'client', '**', '*.js'), @@ -284,7 +290,10 @@ function dtp_develop (done) { }); } -exports.less = dtp_less; +exports.less = gulp.series( + dtp_less_light, + dtp_less_dark, +); exports.jshint = gulp.parallel( dtp_jshint_models, @@ -296,13 +305,8 @@ exports.jshint = gulp.parallel( ); exports.build = gulp.parallel( - dtp_less, - dtp_jshint_models, - dtp_jshint_lib, - dtp_jshint_controllers, - dtp_jshint_client, - dtp_jshint_workers, - dtp_jshint_services, + exports.less, + exports.jshint, dtp_jsbuild_dev, dtp_jsbuild_prod, ); diff --git a/lib/client/js/dtp-display-engine.js b/lib/client/js/dtp-display-engine.js index 27d922a..009d4d5 100644 --- a/lib/client/js/dtp-display-engine.js +++ b/lib/client/js/dtp-display-engine.js @@ -215,4 +215,8 @@ export default class DtpDisplayEngine { async navigateTo (displayList, command) { window.location = command.params.href; } + + async reload ( ) { + window.location.reload(); + } } \ No newline at end of file