simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Default show chars-left donut

Browse source
This commit is contained in:
Lim Chee Aun 2023-08-13 12:00:33 +08:00
parent 8b74a32168
commit 31d7016bd9
2 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/app.css
View file

@ -1641,27 +1641,35 @@ meter.donut::-moz-meter-bar {
meter.donut { meter.donut {
position: relative; position: relative;
width: 24px; --dimension: 24px;
height: 24px; --border-width: 2px;
--middle-circle-radius: calc(var(--dimension) / 2 - var(--border-width));
width: var(--dimension);
height: var(--dimension);
border-radius: 50%; border-radius: 50%;
--fill: calc(var(--percentage) * 1%); --fill: calc(var(--percentage) * 1%);
--color: var(--link-color); --color: var(--link-color);
--middle-circle: radial-gradient( --middle-circle: radial-gradient(
circle at 50% 50%, circle at 50% 50%,
var(--bg-faded-color) 10px, var(--bg-color) var(--middle-circle-radius),
transparent 10px transparent var(--middle-circle-radius)
); );
background-image: var(--middle-circle), background-image: var(--middle-circle),
conic-gradient(var(--color) var(--fill), var(--bg-faded-blur-color) 0); conic-gradient(var(--color) var(--fill), var(--outline-color) 0);
transform: scale(0.7);
transition: transform 0.2s ease-in-out;
} }
meter.donut.warning { meter.donut.warning {
--color: var(--orange-color); --color: var(--orange-color);
transform: scale(1);
} }
meter.donut.danger { meter.donut.danger {
--color: var(--red-color); --color: var(--red-color);
transform: scale(1);
} }
meter.donut.explode { meter.donut.explode {
background-image: none; background-image: none;
transform: scale(1);
} }
meter.donut:is(.warning, .danger, .explode):after { meter.donut:is(.warning, .danger, .explode):after {
content: attr(data-left); content: attr(data-left);

3
src/components/compose.jsx
View file

@ -1381,7 +1381,7 @@ function CharCountMeter({ maxCharacters = 500, hidden }) {
const snapStates = useSnapshot(states); const snapStates = useSnapshot(states);
const charCount = snapStates.composerCharacterCount; const charCount = snapStates.composerCharacterCount;
const leftChars = maxCharacters - charCount; const leftChars = maxCharacters - charCount;
if (charCount <= maxCharacters / 2 || hidden) { if (hidden) {
return <meter class="donut" hidden />; return <meter class="donut" hidden />;
} }
return ( return (
@ -1398,6 +1398,7 @@ function CharCountMeter({ maxCharacters = 500, hidden }) {
value={charCount} value={charCount}
max={maxCharacters} max={maxCharacters}
data-left={leftChars} data-left={leftChars}
title={`${leftChars}/${maxCharacters}`}
style={{ style={{
'--percentage': (charCount / maxCharacters) * 100, '--percentage': (charCount / maxCharacters) * 100,
}} }}