monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-22 05:26:14 +08:00
Code Issues Projects Releases Packages Wiki Activity

removed active theme indicator, replaced with constant transform

Browse source 
showing theme bubbles on the active theme and on hover
This commit is contained in:
Miodec 2023-01-12 08:20:46 +01:00
parent 3ee547326b
commit 97aab8aa85
2 changed files with 73 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
frontend/src/styles/settings.scss
View file

@ -304,6 +304,9 @@
opacity: 1;
}
}
.delButton {
justify-self: end;
}
&:hover {
transform: scale(1.1);
.editButton {
@ -320,7 +323,7 @@
.customTheme.button,
.theme.button {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-columns: 1fr auto 1fr;
.text {
color: inherit;
}
@ -339,6 +342,11 @@
}
}
&.active {
outline-width: 0.2rem !important;
transform: scale(1.1);
.themeBubbles {
opacity: 1;
}
.activeIndicator {
opacity: 1;
}
@ -372,6 +380,28 @@
margin-top: 0.5rem;
.button {
transition: transform 0.125s;
&:hover .themeBubbles {
opacity: 1;
}
.themeBubbles {
transition: 0.125s;
opacity: 0;
display: grid;
grid-auto-flow: column;
gap: 0.5em;
border-radius: 1.25em;
height: 1em;
margin-top: 0.125em;
width: max-content;
justify-self: end;
// background: var(--bg-color);
// outline: 0.25rem solid var(--bg-color);
.themeBubble {
width: 1em;
height: 1em;
border-radius: 100%;
}
}
}
}
}

49
frontend/src/ts/settings/theme-picker.ts
View file

@ -131,6 +131,8 @@ export async function refreshButtons(): Promise<void> {
const bgColor = customTheme.colors[0];
const mainColor = customTheme.colors[1];
console.log(customTheme.colors);
customThemesEl.append(
`<div class="customTheme button" customThemeId='${customTheme._id}'
style="color:${mainColor};background:${bgColor}">
@ -176,11 +178,28 @@ export async function refreshButtons(): Promise<void> {
if (Config.favThemes.includes(theme.name)) {
const activeTheme = activeThemeName === theme.name ? "active" : "";
favThemesEl.append(
`<div class="theme button ${activeTheme}" theme='${theme.name}'
style="color:${theme.mainColor};background:${theme.bgColor}">
<div class="activeIndicator"><i class="fas fa-circle"></i></div>
`<div class="theme button ${activeTheme}" theme='${
theme.name
}' style="background: ${theme.bgColor}; color: ${
theme.mainColor
};outline: 0 solid ${theme.mainColor};">
<div class="favButton active"><i class="fas fa-star"></i></div>
<div class="text">${theme.name.replace(/_/g, " ")}</div>
<div class="favButton active"><i class="fas fa-star"></i></div></div>`
<div class="themeBubbles" style="background: ${
theme["bgColor"]
};outline: 0.25rem solid ${theme["bgColor"]};">
<div class="themeBubble" style="background: ${
theme["mainColor"]
}"></div>
<div class="themeBubble" style="background: ${
theme["subColor"]
}"></div>
<div class="themeBubble" style="background: ${
theme["textColor"]
}"></div>
</div>
</div>
`
);
}
});
@ -197,10 +216,26 @@ export async function refreshButtons(): Promise<void> {
themesEl.append(
`<div class="theme button ${activeTheme}" theme='${
theme.name
}' style="color:${theme.mainColor};background:${theme.bgColor}">
<div class="activeIndicator"><i class="fas fa-circle"></i></div>
}' style="background: ${theme.bgColor}; color: ${
theme.mainColor
};outline: 0 solid ${theme.mainColor};">
<div class="favButton"><i class="far fa-star"></i></div>
<div class="text">${theme.name.replace(/_/g, " ")}</div>
<div class="favButton"><i class="far fa-star"></i></div></div>`
<div class="themeBubbles" style="background: ${
theme["bgColor"]
};outline: 0.25rem solid ${theme["bgColor"]};">
<div class="themeBubble" style="background: ${
theme["mainColor"]
}"></div>
<div class="themeBubble" style="background: ${
theme["subColor"]
}"></div>
<div class="themeBubble" style="background: ${
theme["textColor"]
}"></div>
</div>
</div>
`
);
});
}