dtookey
/
Engine_Rebuild
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

changed color of chevrons to fit theme

Browse Source
pull/2/head
David Tookey 5 years ago
parent 3ceb4ff8f0
commit 32e93e6b93
12 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File

1
src/assets/images/chevron-down-dark.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="red" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 279 B

1
src/assets/images/chevron-down-light.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="blue" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 280 B

1
src/assets/images/chevron-down.svg
Unescape Escape View File

@ -1 +0,0 @@
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 288 B

1
src/assets/images/chevron-up-dark.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="red" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 260 B

1
src/assets/images/chevron-up-light.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="blue" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 261 B

1
src/assets/images/chevron-up.svg
Unescape Escape View File

@ -1 +0,0 @@
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 269 B

2
src/assets/pages/styles/theme-base.scss
Unescape Escape View File

@ -168,6 +168,8 @@ body {
cursor: pointer; /* Add a pointer on hover */ cursor: pointer; /* Add a pointer on hover */
} }
.chevron-img{}
.overlay-content{ .overlay-content{
position: fixed; /* Sit on top of the page content */ position: fixed; /* Sit on top of the page content */
width: 50%; /* Full width (cover the whole page) */ width: 50%; /* Full width (cover the whole page) */

2
src/assets/views/card-category.mustache
Unescape Escape View File

@ -1,7 +1,7 @@
<html lang="en"> <html lang="en">
<div> <div>
<div id="{{{category-key}}}-collapser" class="category-header"> <div id="{{{category-key}}}-collapser" class="category-header">
<div class="d-flex"><h5>{{{category-id-clean}}}</h5><img id="{{{category-key}}}-img" src="../images/chevron-up.svg" class="ml-auto p-2" alt="button"/></div> <div class="d-flex"><h5>{{{category-id-clean}}}</h5><img id="{{{category-key}}}-img" class="ml-auto p-2 chevron-img" src="../images/chevron-up-dark.svg" alt="button"/></div>
<p class="align-self-center">{{{category-description}}}</p> <p class="align-self-center">{{{category-description}}}</p>
</div> </div>
<div id="{{{category-key}}}-container" class="{{{category-key}}}-collapse no-overflow row" style="display:none;"></div> <div id="{{{category-key}}}-container" class="{{{category-key}}}-collapse no-overflow row" style="display:none;"></div>

2
src/assets/views/web-card.mustache
Unescape Escape View File

@ -5,7 +5,7 @@
<h6 class="card-text text-header" style="text-align:center">{{title}}</h6> <h6 class="card-text text-header" style="text-align:center">{{title}}</h6>
<p class="card-text text-paragraph text-align-left">{{description}} </p> <p class="card-text text-paragraph text-align-left">{{description}} </p>
<div class="d-inline-block mx-auto justify-content-between align-items-center web-card-image-background"> <div class="d-inline-block mx-auto justify-content-between align-items-center web-card-image-background">
<img class="rounded-circle mx-auto d-block img-fluid" <img id="collapse-image" class="rounded-circle mx-auto d-block img-fluid"
src="{{{imgPath}}}" alt="{{{altText}}}" src="{{{imgPath}}}" alt="{{{altText}}}"
style="max-height:50px"> style="max-height:50px">
</div> </div>

2
src/ts_source/help.ts
Unescape Escape View File

@ -2,8 +2,6 @@ import {loadTemplate, readHTML} from "./templates";
let $ = require('jquery') let $ = require('jquery')
console.log("we got it loaded")
export function openHelpOverlay(resourceName: string){ export function openHelpOverlay(resourceName: string){
let body = $("body"); let body = $("body");

16
src/ts_source/themes.ts
Unescape Escape View File

@ -2,6 +2,8 @@ const $ = require('jquery');
import {ConfigPaths, Configurator} from "./fileutils"; import {ConfigPaths, Configurator} from "./fileutils";
export module Themes { export module Themes {
export enum AppTheme { export enum AppTheme {
Light = "theme-light", Light = "theme-light",
Dark = "theme-dark" Dark = "theme-dark"
@ -37,6 +39,20 @@ export module Themes {
} }
} }
head.prepend(buildCSSLink(newResource)); head.prepend(buildCSSLink(newResource));
let images = document.querySelectorAll(".chevron-img");
for (let i = 0, l = images.length; i < l; i++) {
let imageMatchRegex = /\.\.\/images\/chevron-(\w+)-(\w+)\.svg$/ig;
let element = images[i];
let srcImg = element.getAttribute("src");
let groups = imageMatchRegex.exec(srcImg);
let direction = groups[1];
let theme = groups[2];
let newTheme = theme === "dark" ? "light" : "dark";
element.setAttribute("src", `../images/chevron-${direction}-${newTheme}.svg`);
}
} }
function getButtonClassFromAppTheme(t: AppTheme): string { function getButtonClassFromAppTheme(t: AppTheme): string {

10
src/ts_source/viewFactory.ts
Unescape Escape View File

@ -5,6 +5,7 @@ const shell = require('electron').shell;
const fs = require('fs'); const fs = require('fs');
export class CardModel { export class CardModel {
title: string; title: string;
description: string; description: string;
@ -71,18 +72,23 @@ export function buildWebCardsFromConfig(configName: string) {
let collapseButton = $(`#${categoryKey}-collapser`); let collapseButton = $(`#${categoryKey}-collapser`);
collapseButton.on("click", () => { collapseButton.on("click", () => {
let imageMatchRegex = /\.\.\/images\/chevron-(\w+)-(\w+)\.svg$/ig;
let collapsable = $(`#${categoryKey}-container`); let collapsable = $(`#${categoryKey}-container`);
let collapseButton = $(`#${categoryKey}-collapser`); let collapseButton = $(`#${categoryKey}-collapser`);
let collapseImg = $(`#${categoryKey}-img`); let collapseImg = $(`#${categoryKey}-img`);
if ("none" === collapsable.css('display')) { if ("none" === collapsable.css('display')) {
collapsable.css("display", ""); collapsable.css("display", "");
collapseButton.addClass("active"); collapseButton.addClass("active");
collapseImg.attr("src", "../images/chevron-down.svg");
} else { } else {
collapsable.css("display", "none"); collapsable.css("display", "none");
collapseButton.removeClass("active"); collapseButton.removeClass("active");
collapseImg.attr("src", "../images/chevron-up.svg");
} }
let srcImg = collapseImg.attr("src");
let groups = imageMatchRegex.exec(srcImg);
let direction = groups[1];
let theme = groups[2];
let newDirection = direction === "up"? "down": "up";
collapseImg.attr("src", `../images/chevron-${newDirection}-${theme}.svg`);
}); });
for (let j = 0, m = contentList.length; j < m; j++) { for (let j = 0, m = contentList.length; j < m; j++) {

Write Preview
Loading…
Cancel
Save