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 */
}
.chevron-img{}
.overlay-content{
position: fixed; /* Sit on top of the page content */
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">
<div>
<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>
</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>
<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">
<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}}}"
style="max-height:50px">
</div>

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

@ -2,8 +2,6 @@ import {loadTemplate, readHTML} from "./templates";
let $ = require('jquery')
console.log("we got it loaded")
export function openHelpOverlay(resourceName: string){
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";
export module Themes {
export enum AppTheme {
Light = "theme-light",
Dark = "theme-dark"
@ -37,6 +39,20 @@ export module Themes {
}
}
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 {

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

@ -5,6 +5,7 @@ const shell = require('electron').shell;
const fs = require('fs');
export class CardModel {
title: string;
description: string;
@ -71,18 +72,23 @@ export function buildWebCardsFromConfig(configName: string) {
let collapseButton = $(`#${categoryKey}-collapser`);
collapseButton.on("click", () => {
let imageMatchRegex = /\.\.\/images\/chevron-(\w+)-(\w+)\.svg$/ig;
let collapsable = $(`#${categoryKey}-container`);
let collapseButton = $(`#${categoryKey}-collapser`);
let collapseImg = $(`#${categoryKey}-img`);
if ("none" === collapsable.css('display')) {
collapsable.css("display", "");
collapseButton.addClass("active");
collapseImg.attr("src", "../images/chevron-down.svg");
} else {
collapsable.css("display", "none");
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++) {

Write Preview
Loading…
Cancel
Save