diff --git a/src/assets/conf/user.json b/src/assets/conf/dashboard.json similarity index 100% rename from src/assets/conf/user.json rename to src/assets/conf/dashboard.json diff --git a/src/assets/pages/ResourcesLandingPage.html b/src/assets/pages/ResourcesLandingPage.html index f1fd066..fa96314 100644 --- a/src/assets/pages/ResourcesLandingPage.html +++ b/src/assets/pages/ResourcesLandingPage.html @@ -1,43 +1,39 @@ - + ResourceFinder - - - - - -ResourceFinder - - - ResourceFinder + + + - +
-
+
- + ResourceFinder
-
+
+
- -
+ +
-
-
-
-
-
+
+
+
+
+
- Paycor -

Clock in and out, request time off, review health benefits and access paystubs using the Paycor human-resources application. -

+ Paycor +

Clock in and out, request time off, review health + benefits and access paystubs using the Paycor human-resources application. +

-
- Paycor logo -
- -
-
-
- +
+ Paycor logo +
+ +
+
+
+ +
-
- + +
-
- -
-
+ +
+
- Gmail -

Access your company e-mail and a suite of Google apps, including a calendar, instant messaging and cloud storage. -

+ Gmail +

Access your company e-mail and a suite of Google apps, + including a calendar, instant messaging and cloud storage. +

-
- Gmail logo -
- -
-
-
- +
+ Gmail logo
-
- + +
+
+
+ +
+
+ +
-
- -
-
+ +
+
- Workplace -

Get the latest news and connect with colleagues. JDSfaulkner uses Workplace by Facebook for posting and sharing. -

-
- Workplace logo -
-
-
-
- + Workplace +

Get the latest news and connect with colleagues. + JDSfaulkner uses Workplace by Facebook for posting and sharing. +

+
+ Workplace logo +
+
+
+
+ +
-
- + +
-
- -
-
-
- Design 2 -

Would you like to see an alternative design? Try Design 2.

+
+
+
+ Design 2 +

Would you like to see an alternative design? Try + Design 2.

- Go + Go
+
-
- -
-
-
- Design 3 -

Here is another alternative. Check out Design 3.

+ +
+
+
+ Design 3 +

Here is another alternative. Check out Design 3.

- Go -
+ Go +
+
-
-
+
-
- - +
-
+
- - +
- - - - + + \ No newline at end of file diff --git a/src/assets/pages/scripts/tsUtil.js b/src/assets/pages/scripts/tsUtil.js index 34e706d..fe7447b 100644 --- a/src/assets/pages/scripts/tsUtil.js +++ b/src/assets/pages/scripts/tsUtil.js @@ -1,3 +1,3 @@ function loadTSTarget(name) { - require(`../../util/${name}`); + return require(`../../util/${name}`); } \ No newline at end of file diff --git a/src/assets/pages/styles/ResourcesLandingPage.scss b/src/assets/pages/styles/ResourcesLandingPage.css similarity index 99% rename from src/assets/pages/styles/ResourcesLandingPage.scss rename to src/assets/pages/styles/ResourcesLandingPage.css index 4dcce24..c45addf 100644 --- a/src/assets/pages/styles/ResourcesLandingPage.scss +++ b/src/assets/pages/styles/ResourcesLandingPage.css @@ -1,3 +1,5 @@ + + .main { background-color: primary; } @@ -35,4 +37,4 @@ .footer p { margin-bottom: .25rem; -} \ No newline at end of file +} diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss new file mode 100644 index 0000000..96c66e6 --- /dev/null +++ b/src/assets/pages/styles/theme-base.scss @@ -0,0 +1,6 @@ +$enable-rounded: true !default; + +@import "node_modules/bootstrap/scss/bootstrap"; +@import "node_modules/bootstrap/scss/functions"; +@import "node_modules/bootstrap/scss/variables"; +@import "node_modules/bootstrap/scss/mixins"; \ No newline at end of file diff --git a/src/assets/pages/styles/theme-dark.scss b/src/assets/pages/styles/theme-dark.scss new file mode 100644 index 0000000..91fe189 --- /dev/null +++ b/src/assets/pages/styles/theme-dark.scss @@ -0,0 +1,8 @@ +$theme-colors: ( + "primary": #0B031C, + "secondary": #211F37, + "success": #A79D9D, + "info": #1C1CDE, + "warning": #303033 +); +@import "theme-base"; \ No newline at end of file diff --git a/src/assets/pages/styles/theme-light.scss b/src/assets/pages/styles/theme-light.scss new file mode 100644 index 0000000..19be165 --- /dev/null +++ b/src/assets/pages/styles/theme-light.scss @@ -0,0 +1,11 @@ +$theme-colors: ( + "primary": #ffffff, + "secondary": #bbbbbb, + "success": #0B031C, + "info": #1C1CDE, + "warning": #700000 +); + +//$font-color: #000; + +@import "theme-base"; \ No newline at end of file diff --git a/src/assets/pages/styles/theme.scss b/src/assets/pages/styles/theme.scss deleted file mode 100644 index 93192b0..0000000 --- a/src/assets/pages/styles/theme.scss +++ /dev/null @@ -1,14 +0,0 @@ -$theme-colors: ( - "primary": #0B031C, - "secondary": #211F37, - "success": #A79D9D, - "info": #1C1CDE, - "warning": #303033 -); - -$enable-rounded: true !default; - -@import "node_modules/bootstrap/scss/bootstrap"; -@import "node_modules/bootstrap/scss/functions"; -@import "node_modules/bootstrap/scss/variables"; -@import "node_modules/bootstrap/scss/mixins"; \ No newline at end of file diff --git a/src/ts_source/fileutils.ts b/src/ts_source/fileutils.ts index 201cbe4..c730e23 100644 --- a/src/ts_source/fileutils.ts +++ b/src/ts_source/fileutils.ts @@ -1,38 +1,42 @@ let path = require('path') - let fs = require('fs'); - const shell = require('electron').shell; - let fileExtensionToImage: object; +import {Themes} from "./themes"; + +export enum ConfigPaths { + ApplicationConfigName = "dashboard.json", + UserConfigName = "user.json", + FileExtensionsName = "file-extensions.json" +} -export class Configurator { +export module Configurator { - getFileExtensionToImageMap(): Object { + export function getFileExtensionToImageMap(): Object { if (!fileExtensionToImage) { - fileExtensionToImage = this.loadAppConfig("file-extensions.json"); + fileExtensionToImage = this.loadAppConfig(ConfigPaths.FileExtensionsName); } return fileExtensionToImage; - }; + } - loadAppConfig(fileName: string): object { + export function loadAppConfig(fileName: string): object { let filePath = FileUtils.getPathToConfig(fileName); let fileBuffer = fs.readFileSync(filePath); let content = fileBuffer.toString('utf8') return JSON.parse(content) } - loadUserConfig(fileName: string): object { + export function loadUserConfig(fileName: string): object { let userConfigPath = FileUtils.getPathToUserDir(fileName); if (!fs.existsSync(userConfigPath)) { - return {}; + return buildDefaultConfig(); } else { let content = fs.readFileSync(userConfigPath); return JSON.parse(content); } } - saveUserConfig(fileName: string, obj: any) { + export function saveUserConfig(fileName: string, obj: any) { let userConfigPath = FileUtils.getPathToUserDir(fileName); let content = JSON.stringify(obj); fs.writeFile(userConfigPath, content, (err) => { @@ -43,23 +47,30 @@ export class Configurator { }); } + function buildDefaultConfig(): object { + let userConfig = {}; + userConfig['theme'] = Themes.AppTheme.Dark; + saveUserConfig(ConfigPaths.UserConfigName, userConfig) + return userConfig + } + } export module FileUtils { export function getPathToView(templateName: string): string { - return path.join(this.getPathToAssets(), "views", templateName + ".mustache") + return path.join(getPathToAssets(), "views", templateName + ".mustache") } export function getPathToImage(imageName: string): string { - return path.join(this.getPathToAssets(), "images", imageName) + return path.join(getPathToAssets(), "images", imageName) } export function getPathToDocument(documentName: string): string { - return path.join(this.getPathToAssets(), "documents", documentName) + return path.join(getPathToAssets(), "documents", documentName) } export function getPathToConfig(documentName: string): string { - return path.join(this.getPathToAssets(), "conf", documentName) + return path.join(getPathToAssets(), "conf", documentName) } export function getPathToAssets(): string { @@ -73,7 +84,7 @@ export module FileUtils { export function getPathToUserDir(fileName: string): string { let dirPath = path.join(__dirname, "..", "user"); let filePath = path.join(dirPath, fileName); - this.touchDir(dirPath); + touchDir(dirPath); return filePath; } diff --git a/src/ts_source/themes.ts b/src/ts_source/themes.ts new file mode 100644 index 0000000..97c4750 --- /dev/null +++ b/src/ts_source/themes.ts @@ -0,0 +1,80 @@ +const $ = require('jquery'); +import {ConfigPaths, Configurator} from "./fileutils"; + +export module Themes { + export enum AppTheme { + Light = "theme-light", + Dark = "theme-dark" + } + + export function initTheme() { + let conf = Configurator.loadUserConfig(ConfigPaths.UserConfigName); + let initTheme = conf['theme']; + applyTheme(initTheme); + let initToggle = $('#theme-toggle'); + let initThemeEnum = getThemeFromValue(initTheme); + initToggle.addClass(getButtonClassFromAppTheme(initThemeEnum)); + initToggle.on("click", () => { + let conf = Configurator.loadUserConfig(ConfigPaths.UserConfigName); + let toggle = $("#theme-toggle"); + let themeValue = conf['theme']; + let currTheme = getThemeFromValue(themeValue); + let opposite = getOppositeTheme(currTheme); + toggle.removeClass(getButtonClassFromAppTheme(currTheme)); + toggle.addClass(getButtonClassFromAppTheme(opposite)); + applyTheme(opposite); + conf['theme'] = opposite; + Configurator.saveUserConfig(ConfigPaths.UserConfigName, conf); + }); + } + + export function applyTheme(name: string) { + let head = $('head'); + let newResource = `styles/${name}.css`; + let headLinks = head.children("link") + let themePattern = /theme-.*\.css/ig; + for (let i = 0, l = headLinks.length; i < l; i++) { + let link = headLinks[i]; + if (themePattern.test(link.href)) { + console.log(`Found ${link}. Removing...`); + link.remove() + } + } + head.append(buildCSSLink(newResource)); + } + + function getButtonClassFromAppTheme(t: AppTheme): string { + switch (t) { + case Themes.AppTheme.Dark: + return "btn-light"; + case Themes.AppTheme.Light: + return "btn-dark"; + } + } + + function getThemeFromValue(v: string): AppTheme { + switch (v) { + case AppTheme.Light: + return AppTheme.Light; + case AppTheme.Dark: + return AppTheme.Dark; + } + } + + function getOppositeTheme(t: AppTheme): AppTheme { + switch (t) { + case Themes.AppTheme.Dark: + return Themes.AppTheme.Light; + case Themes.AppTheme.Light: + return Themes.AppTheme.Dark; + } + } + + + function buildCSSLink(resourceName: string): HTMLElement { + let link = $("", {rel: "stylesheet", href: resourceName}) + return link as HTMLElement + } +} + +Themes.initTheme(); diff --git a/src/ts_source/viewFactory.ts b/src/ts_source/viewFactory.ts index 2c4f88f..fbcaad7 100644 --- a/src/ts_source/viewFactory.ts +++ b/src/ts_source/viewFactory.ts @@ -1,10 +1,9 @@ -import {Configurator, FileUtils} from './fileutils' +import {Configurator, FileUtils, ConfigPaths} from './fileutils' import {loadTemplateSingle} from "./templates" import {WebUtils} from "./webutils" const shell = require('electron').shell; -const config = new Configurator(); export class CardModel { imagePath: string; @@ -17,14 +16,6 @@ export class CardModel { } export function buildFileCard(filePath: string, elem: Element, append: boolean = false, $: any = require('jquery')) { - let conf = config.loadUserConfig("user.json"); - console.log(conf); - let links = conf['links']; - if (!links) { - links = []; - } - links.push("www.fark.com"); - config.saveUserConfig("user.json", conf); let model = new CardModel(getImagePathFromDocumentName(filePath), fileNameToPrettyString(filePath)); loadTemplateSingle("file-card.mustache", model, (content: string, id: string) => { let snip = $(content); @@ -44,7 +35,7 @@ export function buildFileCard(filePath: string, elem: Element, append: boolean = } export function buildDefaultWebCards(elem: Element) { - let userPrefs = config.loadAppConfig("user.json"); + let userPrefs = Configurator.loadAppConfig(ConfigPaths.ApplicationConfigName); let links = userPrefs['default-links']; let $ = require('jquery') for (let i = 0, l = links.length; i < l; i++) { @@ -107,7 +98,7 @@ function fileNameToPrettyString(fileName: string): string { function getImagePathFromDocumentName(name: string): string { let ext = FileUtils.getFileExtension(name); - let thumbnail = config.getFileExtensionToImageMap()[ext]; + let thumbnail = Configurator.getFileExtensionToImageMap()[ext]; return FileUtils.getPathToImage(thumbnail); }