Browse Source

light/dark mode and other new features from DTP Sites

develop
Rob Colbert 2 years ago
parent
commit
52a3d21af2
  1. 7
      app/controllers/user.js
  2. 3
      app/models/user.js
  3. 7
      app/services/display-engine.js
  4. 1
      app/services/user.js
  5. 10
      app/views/layouts/main.pug
  6. 6
      app/views/user/settings.pug
  7. 6
      client/less/dtp-dark.less
  8. 6
      client/less/dtp-light.less
  9. 5
      client/less/site/header-section.less
  10. 16
      client/less/site/uikit-theme.dtp-dark.less
  11. 25
      client/less/site/uikit-theme.dtp-light.less
  12. 1
      client/less/site/variables.less
  13. 5
      client/less/style.common.less
  14. 40
      gulpfile.js
  15. 4
      lib/client/js/dtp-display-engine.js

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

3
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 },
});

7
app/services/display-engine.js

@ -109,6 +109,13 @@ class DisplayList {
params: { href },
});
}
reload ( ) {
this.commands.push({
action: 'reload',
params: { },
});
}
}
class DisplayEngineService extends SiteService {

1
app/services/user.js

@ -254,6 +254,7 @@ class UserService {
username: userDefinition.username,
username_lc,
displayName: userDefinition.displayName,
theme: userDefinition.theme || 'dtp-light',
},
},
);

10
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

6
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

6
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";

6
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";

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

16
client/less/site/uikit-theme.less → 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";
@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";

25
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";

1
client/less/site/variables.less

@ -1,2 +1 @@
@site-brand-color: #d01a2a;
@site-navbar-height: 64px;

5
client/less/style.less → 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";

40
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,
);

4
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();
}
}
Loading…
Cancel
Save