Skip to content

Commit

Permalink
Merge pull request #27 from fhstp/color_modes
Browse files Browse the repository at this point in the history
Color modes
  • Loading branch information
alex-rind authored Aug 21, 2024
2 parents af9396a + ab8e7fd commit 798bdd1
Show file tree
Hide file tree
Showing 16 changed files with 213 additions and 122 deletions.
8 changes: 7 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
# easyBiograph Version History

## version 2.1.0 beta, released x Aug 2024
## version 2.1.1 beta, released 21 Aug 2024

* (feature) show 5 year grid lines (with setting to turn off)
* (feature) three color modes green, yellow, black/white as setting with refactored implementation
* (usability) improve dialogue for Zeitbalken (scrollbar, client name mandatory)

## version 2.1.0 beta, released 8 Aug 2024

* (feature) make the web app multi-linugal
* (security) remove outdated code
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "easybiograph",
"version": "2.1.0-beta",
"version": "2.1.1-beta",
"private": true,
"type": "module",
"author": "Alexander Rind (https://github.com/alex-rind/)",
Expand Down
16 changes: 16 additions & 0 deletions src/assets/ColorMode.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
const colorModes = {
'green-mode': { primary: '#488193', secondary: '#d2dee2', text: 'white', secondaryText: 'black', moment: "#a1d592", button: "#333", buttonText: "white" },
'yellow-mode': { primary: '#F2BC1B', secondary: '#F2DC99', text: 'black', secondaryText: 'black', moment: "#FF0000", button: "#333", buttonText: "white" },
'black-mode': { primary: '#333333', secondary: '#666666', text: 'white', secondaryText: 'white', moment: "black",button: "#e3e3e3", buttonText: "black" }
};

export function changeColorMode(newMode: string) {
const colors = colorModes[newMode as 'green-mode' | 'yellow-mode' | 'black-mode'];
document.documentElement.style.setProperty('--main-color', colors.primary);
document.documentElement.style.setProperty('--secondary-color', colors.secondary);
document.documentElement.style.setProperty('--text-color', colors.text);
document.documentElement.style.setProperty('--secondary-text-color', colors.secondaryText);
document.documentElement.style.setProperty('--moment-color', colors.moment);
document.documentElement.style.setProperty('--button-color', colors.button);
document.documentElement.style.setProperty('--button-text-color', colors.buttonText);
}
10 changes: 10 additions & 0 deletions src/assets/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,16 @@ $primary: #42ABC2;
$info: #42ABC2;
$link: #42ABC2;

:root {
--main-color: #488193;
--secondary-color: #d2dee2;
--text-color: white;
--secondary-text-color: black;
--moment-color: #a1d592;
--button-color: #333333;
--button-text-color: white;
}


// box and panel should have no shadow
//$box-shadow: none;
Expand Down
1 change: 1 addition & 0 deletions src/components/EventDialogue.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
right: auto;
width: 50em;
z-index: 10;
overflow-y: scroll;
"
>
<h1 class="title block">{{ title }}</h1>
Expand Down
5 changes: 3 additions & 2 deletions src/components/PersonDialogue.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="box position" style="height: 96vh; width: 35em">
<div class="box position" style="height: 96vh; width: 35em; overflow-y: scroll;">
<div class="buttons">
<button class="button is-primary is-light" @click="openTab($event, 'Allgemein')">
<span class="icon">
Expand Down Expand Up @@ -35,6 +35,7 @@
<div class="control">
<input
class="input"
:class="{'is-danger': newPersonDetails.name.length < 1}"
type="text"
placeholder="Name"
v-model="newPersonDetails.name"
Expand Down Expand Up @@ -132,7 +133,7 @@
<button class="button is-white" @click="abort">
{{ t("cancel") }}
</button>
<button class="button is-link" @click="savePerson">
<button class="button is-link" @click="savePerson" :disabled="newPersonDetails.name.length < 1">
{{ t("done") }}
</button>
</div>
Expand Down
9 changes: 2 additions & 7 deletions src/components/PersonInfo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,6 @@ import en from "@/en";
export default {
name: "PersonInfo",
props: {
contrastMode: {
type: Boolean,
required: true,
},
},
methods: {
t(prop) {
const lang = store.state.settings.language;
Expand Down Expand Up @@ -64,7 +58,8 @@ export default {
height: 2.5em;
z-index: 5;
white-space: nowrap;
background-color: #d2dee2;
background-color: var(--secondary-color);
color: var(--secondary-text-color);
}
.contrast .personInfo {
Expand Down
50 changes: 41 additions & 9 deletions src/components/TimeAxis.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@
{{ year.label }}
</div>
<div
class="tick age"
v-for="age in ageTicks"
:key="age.label"
:style="age.style"
>
v-for="(age) in ageTicks"
:key="age.label"
:class="[ gridState ? (age.tick ? (age.label == ' ' ? 'tick-when-no-age' : 'tick age') : 'no-tick') : ((age.tick) && age.label == ' ' ? 'no-tick-when-no-age' : 'no-tick')]"
:style="age.style"
>
{{ age.label }}
</div>
</div>
Expand Down Expand Up @@ -134,6 +134,7 @@ const props = defineProps<{
}>();
const zoomModeUse = ref(props.zoomMode);
const gridState = computed(() => store.state.settings.showGrid);
watch(() => props.zoomMode, (newVal, oldVal) => {
zoomModeUse.value = newVal;
Expand Down Expand Up @@ -327,22 +328,29 @@ const ageTicks = computed(() => {
// console.log(`space ${spacePerTick}px - steps ${steps} - width ${width}%`);
return birthdays
.filter((_, index) => index % steps === steps - 1)
.map((d, i) => {
// 5-year lines shifted by steps because line on left border vs label right-aligned
const tick = d.age % 5 === steps;
const axisTick = i % steps === steps - 1;
return {
label: d.age.toString(),
label: axisTick ? d.age.toString() : " ",
tick: tick,
axisTick: axisTick,
style: {
left: `${props.scale(d.date) - width}%`,
width: `calc(${width}% - 2px)`,
"border-left": i > 0 ? "1px solid black" : "",
"border-left": d.age > steps ? "1px solid black" : "",
},
};
});
})
.filter((d) => d.tick || d.axisTick);
} else {
// edge case: no birthday -> 1 tick at 100% -- maybe needs testing(?)
return [
{
label: i.toString(),
tick: (i - 1) % 5 === 0,
axisTick: true,
style: { left: "0%", width: "calc(100% - 2px)" },
},
];
Expand Down Expand Up @@ -420,5 +428,29 @@ div.substrate {
.tick.age {
text-align: right;
position: absolute;
height: 100vh;
}
.tick-when-no-age {
position: absolute;
height: 100vh;
text-align: right;
top: 3em;
}
.no-tick {
position: absolute;
height: 1.5em;
text-align: right;
top: 1.5em;
}
.no-tick-when-no-age {
position: absolute;
height: 0em;
text-align: right;
top: 1.5em;
}
</style>
50 changes: 13 additions & 37 deletions src/components/TimeEvent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
{{ temporalExtentLabel }}
</span>
<div
:value="contrastMode ? true : false"
class="ebox"
:class="[
event.isInterval && event.isOpenEnd
Expand Down Expand Up @@ -44,10 +43,6 @@ export default {
event: Object,
labelSpace: Number,
showNotes: Boolean,
contrastMode: {
type: Boolean,
required: true,
},
},
computed: {
temporalExtentLabel() {
Expand Down Expand Up @@ -101,41 +96,21 @@ export default {
border-radius: 3px;
}
.openEnd[value="false"] {
border: 2px solid $periodborderblue;
background: linear-gradient(90deg, rgba(230,242,248,1) 0%, rgba(175,211,227,1) 90%, rgba(137,182,203,1) 100%);
box-shadow: #2c3e50;
border-right: none;
border-top-right-radius: 100px;
}
.event[value="false"] {
border-left: 3px solid $eventgreen;
}
.period[value="false"] {
background-color: $periodblue;
border: 2px solid $periodborderblue;
box-shadow: #2c3e50;
}
.openEnd[value="true"] {
border: 1.5px solid #488193;
background: linear-gradient(90deg, rgba(230,242,248,1) 0%, rgba(175,211,227,1) 90%, rgba(137,182,203,1) 100%);
.openEnd {
border: 2px solid var(--main-color);
background: linear-gradient(90deg, white 90%, var(--main-color) 100%);
box-shadow: #2c3e50;
border-right: none;
border-top-right-radius: 100px;
}
.event[value="true"] {
background-color: $eventgrey;
border-left: 3px solid #FFA500;
width: 50px;
.event {
border-left: 3px solid var(--moment-color);
}
.period[value="true"] {
background-color: $periodblue;
border: 1.5px solid #488193;
.period{
background-color: white;
border: 2px solid var(--main-color);
box-shadow: #2c3e50;
}
Expand Down Expand Up @@ -163,15 +138,16 @@ export default {
overflow: hidden;
text-overflow: ellipsis;
padding: 0 2px 0 2px;
background-color: white;
}
.eventText.int {
background: $periodblue;
background: white;
padding: 0 2px 0 1px;
}
.subcontent {
color: darkgrey;
color: var(--main-color);
font-size: smaller;
overflow: hidden;
text-overflow: ellipsis;
Expand All @@ -187,8 +163,8 @@ export default {
bottom: calc(100% + 5px);
visibility: hidden;
width: 140px;
background-color: darkgrey;
color: #fff;
background-color: var(--main-color);
color: var(--text-color);
text-align: center;
border-radius: 6px;
padding: 5px 0;
Expand Down
Loading

0 comments on commit 798bdd1

Please sign in to comment.