Default show chars-left donut

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

View file

@ -1641,27 +1641,35 @@ meter.donut::-moz-meter-bar {
meter.donut {
position: relative;
width: 24px;
height: 24px;
--dimension: 24px;
--border-width: 2px;
--middle-circle-radius: calc(var(--dimension) / 2 - var(--border-width));
width: var(--dimension);
height: var(--dimension);
border-radius: 50%;
--fill: calc(var(--percentage) * 1%);
--color: var(--link-color);
--middle-circle: radial-gradient(
circle at 50% 50%,
var(--bg-faded-color) 10px,
transparent 10px
var(--bg-color) var(--middle-circle-radius),
transparent var(--middle-circle-radius)
);
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 {
--color: var(--orange-color);
transform: scale(1);
}
meter.donut.danger {
--color: var(--red-color);
transform: scale(1);
}
meter.donut.explode {
background-image: none;
transform: scale(1);
}
meter.donut:is(.warning, .danger, .explode):after {
content: attr(data-left);

View file

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