From 97d6a97d16081fa8d09f627f5ae7f4bd0aafb5a9 Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Fri, 28 May 2021 09:45:47 +0530 Subject: [PATCH] improve index*.html --- gulpfile.js | 17 +- package-lock.json | 448 ++++++++++-- package.json | 19 +- src/assets/js/dashboard.js | 99 +++ src/assets/js/dashboard2.js | 120 ++++ src/index.html | 249 ++++++- src/index2.html | 723 ++++++++++++++++++++ src/partials/_head.html | 3 + src/partials/_scripts.html | 13 +- src/scss/_cards.scss | 4 +- src/scss/_direct-chat.scss | 224 ++++++ src/scss/_mixins.scss | 1 + src/scss/_products.scss | 55 ++ src/scss/_users-list.scss | 45 ++ src/scss/_variables.scss | 10 + src/scss/adminlte.scss | 2 + src/scss/bootstrap-dark/_variables-alt.scss | 2 +- src/scss/mixins/_direct-chat.scss | 17 + src/scss/mixins/_miscellaneous.scss | 6 +- src/scss/parts/_extra-components.scss | 3 + src/ts/layout.ts | 22 + tsconfig.json | 2 + 22 files changed, 1983 insertions(+), 101 deletions(-) create mode 100644 src/assets/js/dashboard.js create mode 100644 src/assets/js/dashboard2.js create mode 100644 src/scss/_direct-chat.scss create mode 100644 src/scss/_products.scss create mode 100644 src/scss/_users-list.scss create mode 100644 src/scss/mixins/_direct-chat.scss diff --git a/gulpfile.js b/gulpfile.js index 82f7a27f8..1dbde3a5a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -11,6 +11,7 @@ const { src, dest, lastRun, watch, series } = require('gulp') const cleanCss = require('gulp-clean-css') const eslint = require('gulp-eslint7') const fileinclude = require('gulp-file-include') +const gulpIf = require('gulp-if') const npmDist = require('gulp-npm-dist') const postcss = require('gulp-postcss') const rename = require('gulp-rename') @@ -110,7 +111,7 @@ const lintScss = () => { })) } -const ts = () => { +const tsCompile = () => { return esbuild.build({ entryPoints: [paths.src.ts + '/adminlte.ts'], banner: { @@ -127,10 +128,17 @@ const ts = () => { } // Lint TS +function isFixed(file) { + // Has ESLint fixed the file contents? + return file.eslint !== null && file.eslint.fixed +} + const lintTs = () => { return src([paths.src.ts + '/**/*.ts'], { since: lastRun(lintTs) }) - .pipe(eslint()) + .pipe(eslint({ fix: true })) .pipe(eslint.format()) + .pipe(gulpIf(isFixed, dest(paths.src.ts))) + .pipe(eslint.failAfterError()) } const index = () => { @@ -178,10 +186,9 @@ const serve = () => { watch([paths.src.scss], series(lintScss)) watch([paths.src.scss + '/**/*.scss', '!' + paths.src.scss + '/bootstrap-dark/**/*.scss', '!' + paths.src.scss + '/dark/**/*.scss'], series(scss)) watch([paths.src.scss + '/bootstrap-dark/', paths.src.scss + '/dark/'], series(scssDark)) - watch([paths.src.ts], series(lintTs, ts)) + watch([paths.src.ts], series(lintTs, tsCompile)) watch([paths.src.html, paths.src.base + '*.html', paths.src.partials], series(html, index)) watch([paths.src.assets], series(assets)) - // watch([paths.src.vendor], series(vendor)) // Probably not required } // From here Dist will Start @@ -293,4 +300,4 @@ const copyDistVendor = () => { exports.build = series(lintScss, lintTs, cleanDist, copyDistCssAll, copyDistCssRtl, minifyDistCss, copyDistJs, minifyDistJs, copyDistHtml, copyDistHtmlIndex, copyDistAssets, copyDistVendor) // Default - Only for light mode AdminLTE -exports.default = series(scss, scssDark, ts, html, index, assets, vendor, serve) +exports.default = series(scss, scssDark, tsCompile, html, index, assets, vendor, serve) diff --git a/package-lock.json b/package-lock.json index 2036ef923..53deebf10 100644 --- a/package-lock.json +++ b/package-lock.json @@ -481,6 +481,12 @@ "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==", "dev": true }, + "@types/overlayscrollbars": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@types/overlayscrollbars/-/overlayscrollbars-1.12.0.tgz", + "integrity": "sha512-h/pScHNKi4mb+TrJGDon8Yb06ujFG0mSg12wIO0sWMUF3dQIe2ExRRdNRviaNt9IjxIiOfnRr7FsQAdHwK4sMg==", + "dev": true + }, "@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -494,13 +500,13 @@ "dev": true }, "@typescript-eslint/eslint-plugin": { - "version": "4.24.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.24.0.tgz", - "integrity": "sha512-qbCgkPM7DWTsYQGjx9RTuQGswi+bEt0isqDBeo+CKV0953zqI0Tp7CZ7Fi9ipgFA6mcQqF4NOVNwS/f2r6xShw==", + "version": "4.25.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.25.0.tgz", + "integrity": "sha512-Qfs3dWkTMKkKwt78xp2O/KZQB8MPS1UQ5D3YW2s6LQWBE1074BE+Rym+b1pXZIX3M3fSvPUDaCvZLKV2ylVYYQ==", "dev": true, "requires": { - "@typescript-eslint/experimental-utils": "4.24.0", - "@typescript-eslint/scope-manager": "4.24.0", + "@typescript-eslint/experimental-utils": "4.25.0", + "@typescript-eslint/scope-manager": "4.25.0", "debug": "^4.1.1", "functional-red-black-tree": "^1.0.1", "lodash": "^4.17.15", @@ -510,55 +516,55 @@ } }, "@typescript-eslint/experimental-utils": { - "version": "4.24.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.24.0.tgz", - "integrity": "sha512-IwTT2VNDKH1h8RZseMH4CcYBz6lTvRoOLDuuqNZZoThvfHEhOiZPQCow+5El3PtyxJ1iDr6UXZwYtE3yZQjhcw==", + "version": "4.25.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.25.0.tgz", + "integrity": "sha512-f0doRE76vq7NEEU0tw+ajv6CrmPelw5wLoaghEHkA2dNLFb3T/zJQqGPQ0OYt5XlZaS13MtnN+GTPCuUVg338w==", "dev": true, "requires": { "@types/json-schema": "^7.0.3", - "@typescript-eslint/scope-manager": "4.24.0", - "@typescript-eslint/types": "4.24.0", - "@typescript-eslint/typescript-estree": "4.24.0", + "@typescript-eslint/scope-manager": "4.25.0", + "@typescript-eslint/types": "4.25.0", + "@typescript-eslint/typescript-estree": "4.25.0", "eslint-scope": "^5.0.0", "eslint-utils": "^2.0.0" } }, "@typescript-eslint/parser": { - "version": "4.24.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.24.0.tgz", - "integrity": "sha512-dj1ZIh/4QKeECLb2f/QjRwMmDArcwc2WorWPRlB8UNTZlY1KpTVsbX7e3ZZdphfRw29aTFUSNuGB8w9X5sS97w==", + "version": "4.25.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.25.0.tgz", + "integrity": "sha512-OZFa1SKyEJpAhDx8FcbWyX+vLwh7OEtzoo2iQaeWwxucyfbi0mT4DijbOSsTgPKzGHr6GrF2V5p/CEpUH/VBxg==", "dev": true, "requires": { - "@typescript-eslint/scope-manager": "4.24.0", - "@typescript-eslint/types": "4.24.0", - "@typescript-eslint/typescript-estree": "4.24.0", + "@typescript-eslint/scope-manager": "4.25.0", + "@typescript-eslint/types": "4.25.0", + "@typescript-eslint/typescript-estree": "4.25.0", "debug": "^4.1.1" } }, "@typescript-eslint/scope-manager": { - "version": "4.24.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.24.0.tgz", - "integrity": "sha512-9+WYJGDnuC9VtYLqBhcSuM7du75fyCS/ypC8c5g7Sdw7pGL4NDTbeH38eJPfzIydCHZDoOgjloxSAA3+4l/zsA==", + "version": "4.25.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.25.0.tgz", + "integrity": "sha512-2NElKxMb/0rya+NJG1U71BuNnp1TBd1JgzYsldsdA83h/20Tvnf/HrwhiSlNmuq6Vqa0EzidsvkTArwoq+tH6w==", "dev": true, "requires": { - "@typescript-eslint/types": "4.24.0", - "@typescript-eslint/visitor-keys": "4.24.0" + "@typescript-eslint/types": "4.25.0", + "@typescript-eslint/visitor-keys": "4.25.0" } }, "@typescript-eslint/types": { - "version": "4.24.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.24.0.tgz", - "integrity": "sha512-tkZUBgDQKdvfs8L47LaqxojKDE+mIUmOzdz7r+u+U54l3GDkTpEbQ1Jp3cNqqAU9vMUCBA1fitsIhm7yN0vx9Q==", + "version": "4.25.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.25.0.tgz", + "integrity": "sha512-+CNINNvl00OkW6wEsi32wU5MhHti2J25TJsJJqgQmJu3B3dYDBcmOxcE5w9cgoM13TrdE/5ND2HoEnBohasxRQ==", "dev": true }, "@typescript-eslint/typescript-estree": { - "version": "4.24.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.24.0.tgz", - "integrity": "sha512-kBDitL/by/HK7g8CYLT7aKpAwlR8doshfWz8d71j97n5kUa5caHWvY0RvEUEanL/EqBJoANev8Xc/mQ6LLwXGA==", + "version": "4.25.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.25.0.tgz", + "integrity": "sha512-1B8U07TGNAFMxZbSpF6jqiDs1cVGO0izVkf18Q/SPcUAc9LhHxzvSowXDTvkHMWUVuPpagupaW63gB6ahTXVlg==", "dev": true, "requires": { - "@typescript-eslint/types": "4.24.0", - "@typescript-eslint/visitor-keys": "4.24.0", + "@typescript-eslint/types": "4.25.0", + "@typescript-eslint/visitor-keys": "4.25.0", "debug": "^4.1.1", "globby": "^11.0.1", "is-glob": "^4.0.1", @@ -567,12 +573,12 @@ } }, "@typescript-eslint/visitor-keys": { - "version": "4.24.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.24.0.tgz", - "integrity": "sha512-4ox1sjmGHIxjEDBnMCtWFFhErXtKA1Ec0sBpuz0fqf3P+g3JFGyTxxbF06byw0FRsPnnbq44cKivH7Ks1/0s6g==", + "version": "4.25.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.25.0.tgz", + "integrity": "sha512-AmkqV9dDJVKP/TcZrbf6s6i1zYXt5Hl8qOLrRDTFfRNae4+LB8A4N3i+FLZPW85zIxRy39BgeWOfMS3HoH5ngg==", "dev": true, "requires": { - "@typescript-eslint/types": "4.24.0", + "@typescript-eslint/types": "4.25.0", "eslint-visitor-keys": "^2.0.0" } }, @@ -1000,17 +1006,25 @@ "dev": true }, "autoprefixer": { - "version": "10.2.5", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.5.tgz", - "integrity": "sha512-7H4AJZXvSsn62SqZyJCP+1AWwOuoYpUfK6ot9vm0e87XD6mT8lDywc9D9OTJPMULyGcvmIxzTAMeG2Cc+YX+fA==", + "version": "10.2.6", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.6.tgz", + "integrity": "sha512-8lChSmdU6dCNMCQopIf4Pe5kipkAGj/fvTMslCsih0uHpOrXOPUEVOmYMMqmw3cekQkSD7EhIeuYl5y0BLdKqg==", "dev": true, "requires": { - "browserslist": "^4.16.3", - "caniuse-lite": "^1.0.30001196", + "browserslist": "^4.16.6", + "caniuse-lite": "^1.0.30001230", "colorette": "^1.2.2", - "fraction.js": "^4.0.13", + "fraction.js": "^4.1.1", "normalize-range": "^0.1.2", "postcss-value-parser": "^4.1.0" + }, + "dependencies": { + "caniuse-lite": { + "version": "1.0.30001230", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz", + "integrity": "sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==", + "dev": true + } } }, "aws-sign2": { @@ -1482,6 +1496,11 @@ "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==", "dev": true }, + "chart.js": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.3.0.tgz", + "integrity": "sha512-3pO3kL2st1Lzhw+HTGvDwcNYWustHwvApM/v7b2td6CrthyEygbPoXaN/iGZfUpfuovZfJ4dy129RCr39BR1Bg==" + }, "chokidar": { "version": "3.5.1", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz", @@ -2475,9 +2494,9 @@ } }, "esbuild": { - "version": "0.12.1", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.1.tgz", - "integrity": "sha512-WfQ00MKm/Y4ysz1u9PCUAsV66k5lbrcEvS6aG9jhBIavpB94FBdaWeBkaZXxCZB4w+oqh+j4ozJFWnnFprOXbg==", + "version": "0.12.5", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.5.tgz", + "integrity": "sha512-vcuP53pA5XiwUU4FnlXM+2PnVjTfHGthM7uP1gtp+9yfheGvFFbq/KyuESThmtoHPUrfZH5JpxGVJIFDVD1Egw==", "dev": true }, "escalade": { @@ -3502,6 +3521,12 @@ "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=", "dev": true }, + "fork-stream": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/fork-stream/-/fork-stream-0.0.4.tgz", + "integrity": "sha1-24Sfznf2cIpfjzhq5TOgkHtUrnA=", + "dev": true + }, "form-data": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz", @@ -3514,9 +3539,9 @@ } }, "fraction.js": { - "version": "4.0.13", - "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.0.13.tgz", - "integrity": "sha512-E1fz2Xs9ltlUp+qbiyx9wmt2n9dRzPsS11Jtdb8D2o+cC7wr9xkkKsVKJuBX0ST+LVS+LhLO+SbLJNtfWcJvXA==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz", + "integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==", "dev": true }, "fragment-cache": { @@ -3553,6 +3578,48 @@ "requires": { "graceful-fs": "^4.1.11", "through2": "^2.0.3" + }, + "dependencies": { + "isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", + "dev": true + }, + "readable-stream": { + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", + "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } + }, + "through2": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", + "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==", + "dev": true, + "requires": { + "readable-stream": "~2.3.6", + "xtend": "~4.0.1" + } + } } }, "fs.realpath": { @@ -4482,6 +4549,38 @@ } } }, + "gulp-if": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/gulp-if/-/gulp-if-3.0.0.tgz", + "integrity": "sha512-fCUEngzNiEZEK2YuPm+sdMpO6ukb8+/qzbGfJBXyNOXz85bCG7yBI+pPSl+N90d7gnLvMsarthsAImx0qy7BAw==", + "dev": true, + "requires": { + "gulp-match": "^1.1.0", + "ternary-stream": "^3.0.0", + "through2": "^3.0.1" + }, + "dependencies": { + "through2": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz", + "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==", + "dev": true, + "requires": { + "inherits": "^2.0.4", + "readable-stream": "2 || 3" + } + } + } + }, + "gulp-match": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/gulp-match/-/gulp-match-1.1.0.tgz", + "integrity": "sha512-DlyVxa1Gj24DitY2OjEsS+X6tDpretuxD6wTfhXE/Rw2hweqc1f6D/XtsJmoiCwLWfXgR87W9ozEityPCVzGtQ==", + "dev": true, + "requires": { + "minimatch": "^3.0.3" + } + }, "gulp-npm-dist": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/gulp-npm-dist/-/gulp-npm-dist-1.0.3.tgz", @@ -4637,6 +4736,36 @@ "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", "dev": true }, + "isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", + "dev": true + }, + "readable-stream": { + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", + "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } + }, "strip-ansi": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", @@ -4654,6 +4783,16 @@ "requires": { "has-flag": "^3.0.0" } + }, + "through2": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", + "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==", + "dev": true, + "requires": { + "readable-stream": "~2.3.6", + "xtend": "~4.0.1" + } } } }, @@ -4732,6 +4871,38 @@ } } }, + "gulp-typescript": { + "version": "6.0.0-alpha.1", + "resolved": "https://registry.npmjs.org/gulp-typescript/-/gulp-typescript-6.0.0-alpha.1.tgz", + "integrity": "sha512-KoT0TTfjfT7w3JItHkgFH1T/zK4oXWC+a8xxKfniRfVcA0Fa1bKrIhztYelYmb+95RB80OLMBreknYkdwzdi2Q==", + "dev": true, + "requires": { + "ansi-colors": "^4.1.1", + "plugin-error": "^1.0.1", + "source-map": "^0.7.3", + "through2": "^3.0.1", + "vinyl": "^2.2.0", + "vinyl-fs": "^3.0.3" + }, + "dependencies": { + "source-map": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", + "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", + "dev": true + }, + "through2": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz", + "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==", + "dev": true, + "requires": { + "inherits": "^2.0.4", + "readable-stream": "2 || 3" + } + } + } + }, "gulplog": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz", @@ -6146,6 +6317,12 @@ } } }, + "merge-stream": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", + "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", + "dev": true + }, "merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -7145,6 +7322,11 @@ "os-tmpdir": "^1.0.0" } }, + "overlayscrollbars": { + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-1.13.1.tgz", + "integrity": "sha512-gIQfzgGgu1wy80EB4/6DaJGHMEGmizq27xHIESrzXq0Y/J0Ay1P3DWk6tuVmEPIZH15zaBlxeEJOqdJKmowHCQ==" + }, "p-limit": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", @@ -8246,6 +8428,48 @@ "remove-bom-buffer": "^3.0.0", "safe-buffer": "^5.1.0", "through2": "^2.0.3" + }, + "dependencies": { + "isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", + "dev": true + }, + "readable-stream": { + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", + "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } + }, + "through2": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", + "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==", + "dev": true, + "requires": { + "readable-stream": "~2.3.6", + "xtend": "~4.0.1" + } + } } }, "remove-trailing-separator": { @@ -8483,9 +8707,9 @@ } }, "rtlcss": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-3.1.2.tgz", - "integrity": "sha512-b04YSX37siupPOWUEguEBReWX2w4QT89C0PI9g2JzZycbq7zrgPmTr1DA1pizSWpKRFdCjjnrx/SSvU4fOHmGg==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-3.2.0.tgz", + "integrity": "sha512-nV3UmaTmA5TkP2dYOR16ULu6FkMOqZRbiXbFZnmWIN9coPfx3gin31VGOPV7vrVMPjNds7pCS2UYy0mwQUdFCQ==", "dev": true, "requires": { "chalk": "^4.1.0", @@ -10177,6 +10401,42 @@ "inherits": "2" } }, + "ternary-stream": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ternary-stream/-/ternary-stream-3.0.0.tgz", + "integrity": "sha512-oIzdi+UL/JdktkT+7KU5tSIQjj8pbShj3OASuvDEhm0NT5lppsm7aXWAmAq4/QMaBIyfuEcNLbAQA+HpaISobQ==", + "dev": true, + "requires": { + "duplexify": "^4.1.1", + "fork-stream": "^0.0.4", + "merge-stream": "^2.0.0", + "through2": "^3.0.1" + }, + "dependencies": { + "duplexify": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.1.tgz", + "integrity": "sha512-DY3xVEmVHTv1wSzKNbwoU6nVjzI369Y6sPoqfYr0/xlx3IdX2n94xIszTcjPO8W8ZIv0Wb0PXNcjuZyT4wiICA==", + "dev": true, + "requires": { + "end-of-stream": "^1.4.1", + "inherits": "^2.0.3", + "readable-stream": "^3.1.1", + "stream-shift": "^1.0.0" + } + }, + "through2": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz", + "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==", + "dev": true, + "requires": { + "inherits": "^2.0.4", + "readable-stream": "2 || 3" + } + } + } + }, "text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -10193,14 +10453,14 @@ "dlv": "^1.1.3" } }, - "through2": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", - "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==", + "through2-filter": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/through2-filter/-/through2-filter-3.0.0.tgz", + "integrity": "sha512-jaRjI2WxN3W1V8/FMZ9HKIBXixtiqs3SQSX4/YGIiP3gL6djW48VoZq9tDqeCWs3MT8YY5wb/zli8VW8snY1CA==", "dev": true, "requires": { - "readable-stream": "~2.3.6", - "xtend": "~4.0.1" + "through2": "~2.0.0", + "xtend": "~4.0.0" }, "dependencies": { "isarray": { @@ -10232,19 +10492,19 @@ "requires": { "safe-buffer": "~5.1.0" } + }, + "through2": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", + "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==", + "dev": true, + "requires": { + "readable-stream": "~2.3.6", + "xtend": "~4.0.1" + } } } }, - "through2-filter": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/through2-filter/-/through2-filter-3.0.0.tgz", - "integrity": "sha512-jaRjI2WxN3W1V8/FMZ9HKIBXixtiqs3SQSX4/YGIiP3gL6djW48VoZq9tDqeCWs3MT8YY5wb/zli8VW8snY1CA==", - "dev": true, - "requires": { - "through2": "~2.0.0", - "xtend": "~4.0.0" - } - }, "time-stamp": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-1.1.0.tgz", @@ -10338,6 +10598,48 @@ "dev": true, "requires": { "through2": "^2.0.3" + }, + "dependencies": { + "isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", + "dev": true + }, + "readable-stream": { + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", + "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } + }, + "through2": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", + "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==", + "dev": true, + "requires": { + "readable-stream": "~2.3.6", + "xtend": "~4.0.1" + } + } } }, "toidentifier": { @@ -10456,9 +10758,9 @@ } }, "typescript": { - "version": "4.2.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.4.tgz", - "integrity": "sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==", + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.2.tgz", + "integrity": "sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==", "dev": true }, "ua-parser-js": { @@ -10812,6 +11114,16 @@ "requires": { "safe-buffer": "~5.1.0" } + }, + "through2": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", + "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==", + "dev": true, + "requires": { + "readable-stream": "~2.3.6", + "xtend": "~4.0.1" + } } } }, diff --git a/package.json b/package.json index 0ce0e2bfd..cc17d651d 100644 --- a/package.json +++ b/package.json @@ -37,16 +37,19 @@ "dependencies": { "@fortawesome/fontawesome-free": "^5.15.3", "@popperjs/core": "^2.9.2", - "bootstrap": "^5.0.1" + "bootstrap": "^5.0.1", + "chart.js": "^3.3.0", + "overlayscrollbars": "^1.13.1" }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^4.24.0", - "@typescript-eslint/parser": "^4.24.0", - "autoprefixer": "^10.2.5", + "@types/overlayscrollbars": "^1.12.0", + "@typescript-eslint/eslint-plugin": "^4.25.0", + "@typescript-eslint/parser": "^4.25.0", + "autoprefixer": "^10.2.6", "browser-sync": "^2.26.14", "bundlewatch": "^0.3.2", "del": "^6.0.0", - "esbuild": "^0.12.1", + "esbuild": "^0.12.5", "eslint": "^7.27.0", "eslint-config-xo": "^0.36.0", "eslint-config-xo-typescript": "^0.41.1", @@ -56,18 +59,20 @@ "gulp-clean-css": "^4.3.0", "gulp-eslint7": "^0.3.1", "gulp-file-include": "^2.3.0", + "gulp-if": "^3.0.0", "gulp-npm-dist": "^1.0.3", "gulp-postcss": "^9.0.0", "gulp-rename": "^2.0.0", "gulp-sass": "^4.1.0", "gulp-stylelint": "^13.0.0", + "gulp-typescript": "^6.0.0-alpha.1", "lockfile-lint": "^4.6.2", "npm-run-all": "^4.1.5", "postcss": "^8.3.0", - "rtlcss": "^3.1.2", + "rtlcss": "^3.2.0", "sass": "^1.32.13", "stylelint": "^13.13.1", "stylelint-config-twbs-bootstrap": "^2.2.0", - "typescript": "^4.2.4" + "typescript": "^4.3.2" } } diff --git a/src/assets/js/dashboard.js b/src/assets/js/dashboard.js new file mode 100644 index 000000000..ae621f581 --- /dev/null +++ b/src/assets/js/dashboard.js @@ -0,0 +1,99 @@ +/* eslint-disable no-undef */ +/* Chart.js Charts */ +// Sales chart +const salesChartCanvas = document.querySelector('#revenue-chart-canvas').getContext('2d') + +const salesChartData = { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [ + { + label: 'Digital Goods', + backgroundColor: 'rgba(60,141,188,0.9)', + borderColor: 'rgba(60,141,188,0.8)', + fill: true, + tension: 0.4, + pointRadius: 0, + pointColor: '#3b8bba', + pointStrokeColor: 'rgba(60,141,188,1)', + pointHighlightFill: '#fff', + pointHighlightStroke: 'rgba(60,141,188,1)', + data: [28, 48, 40, 19, 86, 27, 90] + }, + { + label: 'Electronics', + backgroundColor: 'rgba(210, 214, 222, 1)', + borderColor: 'rgba(210, 214, 222, 1)', + fill: true, + tension: 0.4, + pointRadius: 0, + pointColor: 'rgba(210, 214, 222, 1)', + pointStrokeColor: '#c1c7d1', + pointHighlightFill: '#fff', + pointHighlightStroke: 'rgba(220,220,220,1)', + data: [65, 59, 80, 81, 56, 55, 40] + } + ] +} + +const salesChartOptions = { + maintainAspectRatio: false, + responsive: true, + plugins: { + legend: { + display: false + } + }, + scales: { + xAxes: [{ + grid: { + display: false + } + }], + yAxes: [{ + grid: { + display: false + } + }] + } +} + +// This will get the first returned node in the jQuery collection. +// eslint-disable-next-line no-unused-vars +const salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable] + type: 'line', + data: salesChartData, + options: salesChartOptions +}) + +// Donut Chart +const pieChartCanvas = document.querySelector('#sales-chart-canvas').getContext('2d') +const pieData = { + labels: [ + 'Instore Sales', + 'Download Sales', + 'Mail-Order Sales' + ], + datasets: [ + { + data: [30, 12, 20], + backgroundColor: ['#f56954', '#00a65a', '#f39c12'] + } + ] +} +const pieOptions = { + plugins: { + legend: { + display: false + } + }, + maintainAspectRatio: false, + responsive: true +} +// Create pie or douhnut chart +// You can switch between pie and douhnut using the method below. +// eslint-disable-next-line no-unused-vars +const pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable] + type: 'doughnut', + data: pieData, + options: pieOptions +}) diff --git a/src/assets/js/dashboard2.js b/src/assets/js/dashboard2.js new file mode 100644 index 000000000..73e14d05d --- /dev/null +++ b/src/assets/js/dashboard2.js @@ -0,0 +1,120 @@ +/* eslint-disable no-undef */ +/* ChartJS + * ------- + * Here we will create a few charts using ChartJS + */ + +//----------------------- +// - MONTHLY SALES CHART - +//----------------------- + +// Get context with querySelector - using Chart.js .getContext('2d') method. +const salesChartCanvas = document.querySelector('#salesChart').getContext('2d') + +const salesChartData = { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [ + { + label: 'Digital Goods', + backgroundColor: 'rgba(60,141,188,0.9)', + borderColor: 'rgba(60,141,188,0.8)', + fill: true, + pointRadius: 0, + pointColor: '#3b8bba', + pointStrokeColor: 'rgba(60,141,188,1)', + pointHighlightFill: '#fff', + pointHighlightStroke: 'rgba(60,141,188,1)', + data: [28, 48, 40, 19, 86, 27, 90] + }, + { + label: 'Electronics', + backgroundColor: 'rgba(210, 214, 222, 1)', + borderColor: 'rgba(210, 214, 222, 1)', + fill: true, + pointRadius: 0, + pointColor: 'rgba(210, 214, 222, 1)', + pointStrokeColor: '#c1c7d1', + pointHighlightFill: '#fff', + pointHighlightStroke: 'rgba(220,220,220,1)', + data: [65, 59, 80, 81, 56, 55, 40] + } + ] +} + +const salesChartOptions = { + maintainAspectRatio: false, + responsive: true, + tension: 0.4, + plugins: { + legend: { + display: false + } + }, + scales: { + xAxes: [{ + grid: { + display: false + } + }], + yAxes: [{ + grid: { + display: false + } + }] + } +} + +// This will get the first returned node in the jQuery collection. +// eslint-disable-next-line no-unused-vars +const salesChart = new Chart(salesChartCanvas, { + type: 'line', + data: salesChartData, + options: salesChartOptions +}) + +//--------------------------- +// - END MONTHLY SALES CHART - +//--------------------------- + +//------------- +// - PIE CHART - +//------------- + +// Get context with querySelector - using Chart.js .getContext('2d') method. +const pieChartCanvas = document.querySelector('#pieChart').getContext('2d') + +const pieData = { + labels: [ + 'Chrome', + 'IE', + 'FireFox', + 'Safari', + 'Opera', + 'Navigator' + ], + datasets: [ + { + data: [700, 500, 400, 600, 300, 100], + backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de'] + } + ] +} +const pieOptions = { + plugins: { + legend: { + display: false + } + } +} +// Create pie or douhnut chart +// You can switch between pie and douhnut using the method below. +// eslint-disable-next-line no-unused-vars +const pieChart = new Chart(pieChartCanvas, { + type: 'doughnut', + data: pieData, + options: pieOptions +}) + +//----------------- +// - END PIE CHART - +//----------------- diff --git a/src/index.html b/src/index.html index be43298ee..1a15bad3f 100644 --- a/src/index.html +++ b/src/index.html @@ -95,16 +95,242 @@
- - - - - - - - - + +
+
+

+ + Sales +

+
+ +
+
+
+
+ +
+ +
+
+ +
+
+
+
+ + + +
+
+

Direct Chat

+ +
+ 3 + + + +
+
+ +
+ +
+ +
+
+ Alexander Pierce + 23 Jan 2:00 pm +
+ + message user image + +
+ Is this template really for free? That's unbelievable! +
+ +
+ + + +
+
+ Sarah Bullock + 23 Jan 2:05 pm +
+ + message user image + +
+ You better believe it! +
+ +
+ + + +
+
+ Alexander Pierce + 23 Jan 5:37 pm +
+ + message user image + +
+ Working with AdminLTE on a great new app! Wanna join? +
+ +
+ + + +
+
+ Sarah Bullock + 23 Jan 6:10 pm +
+ + message user image + +
+ I would love to. +
+ +
+ + +
+ + + +
+ + +
+ +
+ +
+
+
+ + + + +
+
+
+ +
+
+
@@ -121,5 +347,10 @@ @@include('./_scripts.html', { "path": "." }) + + + + + diff --git a/src/index2.html b/src/index2.html index 463f0113f..26edd6723 100644 --- a/src/index2.html +++ b/src/index2.html @@ -89,6 +89,724 @@ + +
+
+
+
+
Monthly Recap Report
+ +
+ +
+ + +
+ +
+
+ +
+
+
+

+ Sales: 1 Jan, 2014 - 30 Jul, 2014 +

+ +
+ + +
+ +
+ +
+

+ Goal Completion +

+ +
+ Add Products to Cart + 160/200 +
+
+
+
+ + +
+ Complete Purchase + 310/400 +
+
+
+
+ + +
+ Visit Premium Page + 480/800 +
+
+
+
+ + +
+ Send Inquiries + 250/500 +
+
+
+
+ +
+ +
+ +
+ +
+
+
+
+ 17% +
$35,210.43
+ TOTAL REVENUE +
+ +
+ +
+
+ 0% +
$10,390.90
+ TOTAL COST +
+ +
+ +
+
+ 20% +
$24,813.53
+ TOTAL PROFIT +
+ +
+ +
+
+ 18% +
1200
+ GOAL COMPLETIONS +
+ +
+
+ +
+ +
+ +
+ +
+ + + +
+ +
+
+
+ +
+
+

Direct Chat

+ +
+ 3 + + + +
+
+ +
+ +
+ +
+
+ Alexander Pierce + 23 Jan 2:00 pm +
+ + message user image + +
+ Is this template really for free? That's unbelievable! +
+ +
+ + + +
+
+ Sarah Bullock + 23 Jan 2:05 pm +
+ + message user image + +
+ You better believe it! +
+ +
+ + + +
+
+ Alexander Pierce + 23 Jan 5:37 pm +
+ + message user image + +
+ Working with AdminLTE on a great new app! Wanna join? +
+ +
+ + + +
+
+ Sarah Bullock + 23 Jan 6:10 pm +
+ + message user image + +
+ I would love to. +
+ +
+ + +
+ + + +
+ + +
+ +
+ +
+
+
+ + + + +
+
+
+ +
+ +
+ + +
+ +
+
+

Latest Members

+ +
+ 8 New Members + + +
+
+ +
+ + +
+ +
+ View All Users +
+ +
+ +
+ +
+ + + +
+
+

Latest Orders

+ +
+ + +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Order IDItemStatusPopularity
OR9842Call of Duty IVShipped +
90,80,90,-70,61,-83,63
+
OR1848Samsung Smart TVPending +
90,80,-90,70,61,-83,68
+
OR7429iPhone 6 PlusDelivered +
90,-80,90,70,-61,83,63
+
OR7429Samsung Smart TVProcessing +
90,80,-90,70,-61,83,63
+
OR1848Samsung Smart TVPending +
90,80,-90,70,61,-83,68
+
OR7429iPhone 6 PlusDelivered +
90,-80,90,70,-61,83,63
+
OR9842Call of Duty IVShipped +
90,80,90,-70,61,-83,63
+
+
+ +
+ +
+ Place New Order + View All Orders +
+ +
+ +
+ + +
+ +
+ + +
+ Inventory + 5,200 +
+ +
+ +
+ + +
+ Mentions + 92,050 +
+ +
+ +
+ + +
+ Downloads + 114,381 +
+ +
+ +
+ + +
+ Direct Messages + 163,921 +
+ +
+ + +
+
+

Browser Usage

+ +
+ + +
+
+ +
+
+
+
+ +
+ +
+ +
+
    +
  • Chrome
    • +
  • IE
    • +
  • FireFox
    • +
  • Safari
    • +
  • Opera
    • +
  • Navigator
    • +
+
+ +
+ +
+ +
+ +
+ +
+ + + +
+
+

Recently Added Products

+ +
+ + +
+
+ +
+ +
+ +
+ View All Products +
+ +
+ +
+ +
+ @@ -103,5 +821,10 @@ @@include('./_scripts.html', { "path": "." }) + + + + + diff --git a/src/partials/_head.html b/src/partials/_head.html index 9e784a462..8aafe522c 100644 --- a/src/partials/_head.html +++ b/src/partials/_head.html @@ -19,3 +19,6 @@ + + + diff --git a/src/partials/_scripts.html b/src/partials/_scripts.html index d04805178..9768453c5 100644 --- a/src/partials/_scripts.html +++ b/src/partials/_scripts.html @@ -1,6 +1,7 @@ - - - - - - + + + + + + + diff --git a/src/scss/_cards.scss b/src/scss/_cards.scss index 25a20f35f..97d903177 100644 --- a/src/scss/_cards.scss +++ b/src/scss/_cards.scss @@ -81,11 +81,11 @@ } } - .border-right { + .border-end { border-right: 1px solid $lte-card-border-color; } - .border-left { + .border-start { border-left: 1px solid $lte-card-border-color; } diff --git a/src/scss/_direct-chat.scss b/src/scss/_direct-chat.scss new file mode 100644 index 000000000..a76888808 --- /dev/null +++ b/src/scss/_direct-chat.scss @@ -0,0 +1,224 @@ +// +// Component: Direct Chat +// + +.direct-chat { + .card-body { + overflow-x: hidden; + padding: 0; + position: relative; + } + + &.chat-pane-open { + .direct-chat-contacts { + @include translate(0, 0); + } + } + + + &.timestamp-light { + .direct-chat-timestamp { + color: tint-color(color-contrast($color-contrast-light), 10%); + } + } + + &.timestamp-dark { + .direct-chat-timestamp { + color: shade-color(color-contrast($color-contrast-dark), 20%); + } + } +} + +.direct-chat-messages { + @include translate(0, 0); + height: 250px; + overflow: auto; + padding: 10px; +} + +.direct-chat-msg, +.direct-chat-text { + display: block; +} + +.direct-chat-msg { + @include clearfix (); + margin-bottom: 10px; +} + +.direct-chat-messages, +.direct-chat-contacts { + transition: transform .5s ease-in-out; +} + +.direct-chat-text { + @if $enable-rounded { + @include border-radius($border-radius-lg); + } + + background-color: $lte-direct-chat-default-msg-bg; + border: 1px solid $lte-direct-chat-default-msg-border-color; + color: $lte-direct-chat-default-font-color; + margin: 5px 0 0 50px; + padding: 5px 10px; + position: relative; + + //Create the arrow + &::after, + &::before { + border: solid transparent; + border-right-color: $lte-direct-chat-default-msg-border-color; + content: " "; + height: 0; + pointer-events: none; + position: absolute; + right: 100%; + top: 15px; + width: 0; + } + + &::after { + border-width: 5px; + margin-top: -5px; + } + + &::before { + border-width: 6px; + margin-top: -6px; + } + + .end & { + margin-left: 0; + margin-right: 50px; + + &::after, + &::before { + border-left-color: $lte-direct-chat-default-msg-border-color; + border-right-color: transparent; + left: 100%; + right: auto; + } + } +} + +.direct-chat-img { + @include border-radius(50%); + float: left; + height: 40px; + width: 40px; + + .end & { + float: right; + } +} + +.direct-chat-infos { + display: block; + font-size: $font-size-sm; + margin-bottom: 2px; +} + +.direct-chat-name { + font-weight: 600; +} + +.direct-chat-timestamp { + color: shade-color($gray-500, 25%); +} + +//Direct chat contacts pane +.direct-chat-contacts-open { + .direct-chat-contacts { + @include translate(0, 0); + } +} + +.direct-chat-contacts { + @include translate(101%, 0); + background-color: $dark; + bottom: 0; + color: $white; + height: 250px; + overflow: auto; + position: absolute; + top: 0; + width: 100%; +} + +.direct-chat-contacts-light { + background-color: $light; + + .contacts-list-name { + color: $gray-700; + } + + .contacts-list-date { + color: $gray-600; + } + + .contacts-list-msg { + color: shade-color($gray-600, 10%); + } +} + +//Contacts list -- for displaying contacts in direct chat contacts pane +.contacts-list { + @include list-unstyled (); + + > li { + @include clearfix (); + border-bottom: 1px solid rgba($black, .2); + margin: 0; + padding: 10px; + + &:last-of-type { + border-bottom: 0; + } + } +} + +.contacts-list-img { + @include border-radius(50%); + float: left; + width: 40px; +} + +.contacts-list-info { + color: $white; + margin-left: 45px; +} + +.contacts-list-name, +.contacts-list-status { + display: block; +} + +.contacts-list-name { + font-weight: 600; +} + +.contacts-list-status { + font-size: $font-size-sm; +} + +.contacts-list-date { + color: $gray-400; + font-weight: 400; +} + +.contacts-list-msg { + color: shade-color($gray-400, 10%); +} + +// Color variants +@each $name, $color in $theme-colors { + .direct-chat-#{$name} { + @include direct-chat-variant($color); + } +} + +@each $name, $color in $colors { + .direct-chat-#{$name} { + @include direct-chat-variant($color); + } +} diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index 1d4a6881e..679c969e4 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -10,4 +10,5 @@ @import "mixins/nav-treeview-light"; @import "mixins/cards"; @import "mixins/backgrounds"; +@import "mixins/direct-chat"; @import "mixins/miscellaneous"; diff --git a/src/scss/_products.scss b/src/scss/_products.scss new file mode 100644 index 000000000..4b6fd5877 --- /dev/null +++ b/src/scss/_products.scss @@ -0,0 +1,55 @@ +// +// Component: Products +// + +.products-list { + list-style: none; + margin: 0; + padding: 0; + + > .item { + @include clearfix (); + + @if $enable-rounded { + @include border-radius($border-radius); + } + + background-color: $white; + padding: 10px 0; + + } + + .product-img { + float: left; + + img { + height: 50px; + width: 50px; + } + } + + .product-info { + margin-left: 60px; + } + + .product-title { + font-weight: 600; + } + + .product-description { + color: $gray-600; + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +} + +.product-list-in-card > .item { + @include border-radius(0); + border-bottom: 1px solid $card-border-color; + + &:last-of-type { + border-bottom-width: 0; + } +} diff --git a/src/scss/_users-list.scss b/src/scss/_users-list.scss new file mode 100644 index 000000000..9e9545d6c --- /dev/null +++ b/src/scss/_users-list.scss @@ -0,0 +1,45 @@ +// +// Component: Users List +// + +.users-list { + @include list-unstyled (); + + > li { + float: left; + padding: 10px; + text-align: center; + width: 25%; + + img { + @include border-radius(50%); + height: auto; + max-width: 100%; + } + + > a:hover { + &, + .users-list-name { + color: #999; + } + } + } +} + +.users-list-name, +.users-list-date { + display: block; +} + +.users-list-name { + color: $gray-700; + font-size: $font-size-sm; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.users-list-date { + color: shade-color($gray-500, 20%); + font-size: 12px; +} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 97bf9ab77..8d4273502 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -1,5 +1,9 @@ // Custom AdminLTE Variables +// COLORS +// -------------------------------------------------------- +$lte-gray-x-light: #d2d6de !default; + // Dynamic Variables // -------------------------------------------------------- :root { @@ -190,6 +194,12 @@ $lte-card-img-size: $lte-img-size-sm !default; // -------------------------------------------------------- $lte-progress-bar-border-radius: 1px !default; +// DIRECT CHAT +// -------------------------------------------------------- +$lte-direct-chat-default-msg-bg: $lte-gray-x-light !default; +$lte-direct-chat-default-font-color: #444 !default; +$lte-direct-chat-default-msg-border-color: $lte-gray-x-light !default; + // Z-INDEX // -------------------------------------------------------- $lte-zindex-main-header: $zindex-fixed + 4 !default; diff --git a/src/scss/adminlte.scss b/src/scss/adminlte.scss index 4ae2a80af..022abdac0 100644 --- a/src/scss/adminlte.scss +++ b/src/scss/adminlte.scss @@ -18,6 +18,8 @@ // --------------------------------------------------- @import "mixins"; +// AdiminLTE Parts +// --------------------------------------------------- @import "parts/core"; @import "parts/components"; @import "parts/extra-components"; diff --git a/src/scss/bootstrap-dark/_variables-alt.scss b/src/scss/bootstrap-dark/_variables-alt.scss index b47910fde..9810c4b9e 100644 --- a/src/scss/bootstrap-dark/_variables-alt.scss +++ b/src/scss/bootstrap-dark/_variables-alt.scss @@ -383,7 +383,7 @@ $navbar-dark-brand-hover-color-alt: $navbar-dark-active-color-alt !def // Dropdown menu container and contents. $dropdown-color-alt: $body-color-alt !default; -$dropdown-bg-alt: $black-alt !default; +$dropdown-bg-alt: $body-bg-alt !default; $dropdown-border-color-alt: rgba($white-alt, .15) !default; $dropdown-divider-bg-alt: $dropdown-border-color-alt !default; $dropdown-box-shadow-alt: $box-shadow-alt !default; diff --git a/src/scss/mixins/_direct-chat.scss b/src/scss/mixins/_direct-chat.scss new file mode 100644 index 000000000..57c68135a --- /dev/null +++ b/src/scss/mixins/_direct-chat.scss @@ -0,0 +1,17 @@ +// +// Mixins: Direct Chat +// + +// Direct Chat Variant +@mixin direct-chat-variant($bg-color, $color: $white) { + .end > .direct-chat-text { + background-color: $bg-color; + border-color: $bg-color; + color: color-contrast($bg-color); + + &::after, + &::before { + border-left-color: $bg-color; + } + } +} diff --git a/src/scss/mixins/_miscellaneous.scss b/src/scss/mixins/_miscellaneous.scss index 722230948..58b6319d4 100644 --- a/src/scss/mixins/_miscellaneous.scss +++ b/src/scss/mixins/_miscellaneous.scss @@ -3,9 +3,9 @@ // // ETC -// @mixin translate($x, $y) { -// transform: translate($x, $y); -// } +@mixin translate($x, $y) { + transform: translate($x, $y); +} // Different radius each side // @mixin border-radius-sides($top-left, $top-right, $bottom-left, $bottom-right) { diff --git a/src/scss/parts/_extra-components.scss b/src/scss/parts/_extra-components.scss index 33c6d62be..0b1543e97 100644 --- a/src/scss/parts/_extra-components.scss +++ b/src/scss/parts/_extra-components.scss @@ -4,3 +4,6 @@ @import "../small-box"; @import "../info-box"; +@import "../direct-chat"; +@import "../products"; +@import "../users-list"; diff --git a/src/ts/layout.ts b/src/ts/layout.ts index 41272967c..8166a3bdb 100644 --- a/src/ts/layout.ts +++ b/src/ts/layout.ts @@ -9,6 +9,8 @@ import { domReady } from './util/index' +import OverlayScrollbars from 'overlayscrollbars' + /** * ------------------------------------------------------------------------ * Constants @@ -17,6 +19,13 @@ import { const CLASS_NAME_RESIZE_ANIMATION_STOPPER = 'resize-animation-stopper' +const SELECTOR_SIDEBAR = '.sidebar' + +const Default = { + scrollbarTheme: 'os-theme-light', + scrollbarAutoHide: 'leave' +} + /** * Class Definition * ==================================================== @@ -38,6 +47,19 @@ class Layout { domReady(() => { const data = new Layout() data.holdTransition() + + if (typeof OverlayScrollbars !== 'undefined') { + // @ts-expect-error + // eslint-disable-next-line new-cap + OverlayScrollbars(document.querySelectorAll(SELECTOR_SIDEBAR), { + className: Default.scrollbarTheme, + sizeAutoCapable: true, + scrollbars: { + autoHide: Default.scrollbarAutoHide, + clickScrolling: true + } + }) + } }) export default Layout diff --git a/tsconfig.json b/tsconfig.json index a323b61de..70dc0870f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,7 @@ { "compilerOptions": { + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, "noFallthroughCasesInSwitch": true, "noUnusedParameters": true, "noImplicitReturns": true,