Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-01-23 00:56:23 +01:00
Code Issues Projects Releases Packages Wiki Activity

Fix char counter not showing properly on Firefox

Browse source
This commit is contained in:
Lim Chee Aun 2024-03-24 16:37:58 +08:00
parent fd59a39021
commit 13f5621488
2 changed files with 96 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

139
src/app.css
View file

@ -2026,71 +2026,86 @@ body > .szh-menu-container {
text-shadow: none;
}
/* DONUT METER */
/* CHAR COUNTER */
meter.donut {
appearance: none;
}
meter.donut::-webkit-meter-inner-element,
meter.donut::-webkit-meter-bar,
meter.donut::-webkit-meter-optimum-value,
meter.donut::-webkit-meter-suboptimum-value,
meter.donut::-webkit-meter-even-less-good-value {
display: none;
}
meter.donut::-moz-meter-bar {
background: transparent;
}
meter.donut {
position: relative;
.char-counter {
--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-color) var(--middle-circle-radius),
transparent var(--middle-circle-radius)
);
background-image: var(--middle-circle),
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);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
color: var(--text-insignificant-color);
}
meter.donut:is(.danger, .explode):after {
color: var(--red-color);
}
meter.donut[hidden] {
min-width: var(--dimension);
min-height: var(--dimension);
position: relative;
display: inline-block;
visibility: hidden;
&[hidden] {
visibility: hidden;
}
* {
pointer-events: none;
}
meter {
appearance: none;
position: relative;
--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-color) var(--middle-circle-radius),
transparent var(--middle-circle-radius)
);
background-image: var(--middle-circle),
conic-gradient(var(--color) var(--fill), var(--outline-color) 0);
transform: scale(0.7);
transition: transform 0.2s ease-in-out;
&::-webkit-meter-inner-element,
&::-webkit-meter-bar,
&::-webkit-meter-optimum-value,
&::-webkit-meter-suboptimum-value,
&::-webkit-meter-even-less-good-value {
display: none;
}
&::-moz-meter-bar {
background: transparent;
}
&.warning {
--color: var(--orange-color);
transform: scale(1);
}
&.danger {
--color: var(--red-color);
transform: scale(1);
}
&.explode {
background-image: none;
transform: scale(1);
}
&:is(.warning, .danger, .explode) + .counter {
opacity: 1;
color: var(--text-insignificant-color);
}
&:is(.danger, .explode) + .counter {
opacity: 1;
color: var(--red-color);
}
}
.counter {
line-height: 1;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
}
}
/* SHINY PILL */

34
src/components/compose.jsx
View file

@ -1662,27 +1662,31 @@ function CharCountMeter({ maxCharacters = 500, hidden }) {
const charCount = snapStates.composerCharacterCount;
const leftChars = maxCharacters - charCount;
if (hidden) {
return <meter class="donut" hidden />;
return <span class="char-counter" hidden />;
}
return (
<meter
class={`donut ${
leftChars <= -10
? 'explode'
: leftChars <= 0
? 'danger'
: leftChars <= 20
? 'warning'
: ''
}`}
value={charCount}
max={maxCharacters}
data-left={leftChars}
<span
class="char-counter"
title={`${leftChars}/${maxCharacters}`}
style={{
'--percentage': (charCount / maxCharacters) * 100,
}}
/>
>
<meter
class={`${
leftChars <= -10
? 'explode'
: leftChars <= 0
? 'danger'
: leftChars <= 20
? 'warning'
: ''
}`}
value={charCount}
max={maxCharacters}
/>
<span class="counter">{leftChars}</span>
</span>
);
}