kopia lustrzana https://github.com/cheeaun/phanpy
Add zoom buttons for custom emojis modal
Lim Chee Aun
rodzic
226fd66494
commit
30540387e5
|
|
@ -185,4 +185,6 @@ export const ICONS = {
|
|||
},
|
||||
formula: () => import('@iconify-icons/mingcute/formula-line'),
|
||||
edit: () => import('@iconify-icons/mingcute/edit-4-line'),
|
||||
'zoom-in': () => import('@iconify-icons/mingcute/zoom-in-line'),
|
||||
'zoom-out': () => import('@iconify-icons/mingcute/zoom-out-line'),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -855,136 +855,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
#custom-emojis-sheet {
|
||||
max-height: 50vh;
|
||||
max-height: 50dvh;
|
||||
|
||||
header {
|
||||
.loader-container {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 8px 0 0;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
mask-image: none;
|
||||
min-height: 40vh;
|
||||
padding-bottom: 88px;
|
||||
}
|
||||
|
||||
.custom-emojis-matches {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.custom-emojis-list {
|
||||
.section-container {
|
||||
position: relative;
|
||||
content-visibility: auto;
|
||||
content-intrinsic-size: auto 88px;
|
||||
}
|
||||
.section-header {
|
||||
font-size: 80%;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-insignificant-color);
|
||||
padding: 8px 0 4px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--bg-color);
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
padding-inline-end: 8px;
|
||||
pointer-events: none;
|
||||
border-end-end-radius: 8px;
|
||||
}
|
||||
section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
button {
|
||||
color: var(--text-color);
|
||||
border-radius: 8px;
|
||||
background-image: radial-gradient(
|
||||
closest-side,
|
||||
var(--img-bg-color),
|
||||
transparent
|
||||
);
|
||||
text-shadow: 0 1px 0 var(--bg-color);
|
||||
position: relative;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
font-variant-numeric: slashed-zero;
|
||||
font-feature-settings: 'ss01';
|
||||
|
||||
&[data-title]:after {
|
||||
max-width: 50vw;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
content: attr(data-title);
|
||||
left: 50%;
|
||||
top: 0;
|
||||
background-color: var(--bg-color);
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
border: 1px solid var(--text-color);
|
||||
transform: translate(-50%, -110%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease-out 0.1s;
|
||||
font-family: var(--monospace-font);
|
||||
line-height: 1;
|
||||
}
|
||||
&.edge-left[data-title]:after {
|
||||
left: 0;
|
||||
transform: translate(0, -110%);
|
||||
}
|
||||
&.edge-right[data-title]:after {
|
||||
left: 100%;
|
||||
transform: translate(-100%, -110%);
|
||||
}
|
||||
|
||||
&:is(:hover, :focus) {
|
||||
z-index: 1;
|
||||
filter: none;
|
||||
background-color: var(--bg-faded-color);
|
||||
|
||||
&[data-title]:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
transition: transform 0.1s ease-out;
|
||||
}
|
||||
|
||||
&:is(:hover, :focus) img {
|
||||
transform: scale(2);
|
||||
}
|
||||
&.edge-left img {
|
||||
transform-origin: left center;
|
||||
}
|
||||
&.edge-right img {
|
||||
transform-origin: right center;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compose-cw-container {
|
||||
display: flex;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,153 @@
|
|||
#custom-emojis-sheet {
|
||||
--custom-emoji-size: 1;
|
||||
--size-bump: 210px;
|
||||
height: min(
|
||||
95vh,
|
||||
calc(50vh + ((var(--custom-emoji-size) - 1) * var(--size-bump)))
|
||||
);
|
||||
max-width: calc(
|
||||
var(--main-width) +
|
||||
((var(--custom-emoji-size) - 1) * var(--size-bump)) -
|
||||
50px -
|
||||
16px
|
||||
);
|
||||
|
||||
header {
|
||||
.loader-container {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 8px;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
mask-image: none;
|
||||
/* padding-bottom: 88px; */
|
||||
}
|
||||
|
||||
.size-range {
|
||||
float: var(--forward);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
gap: 8px;
|
||||
background-color: var(--bg-color);
|
||||
border: 1px solid var(--outline-color);
|
||||
box-shadow: 0 8px 16px -8px var(--drop-shadow-color);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.custom-emojis-matches {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.custom-emojis-list {
|
||||
.section-container {
|
||||
position: relative;
|
||||
content-visibility: auto;
|
||||
content-intrinsic-size: auto 88px;
|
||||
padding-block: calc(16px * (var(--custom-emoji-size) - 1));
|
||||
}
|
||||
.section-header {
|
||||
font-size: 80%;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-insignificant-color);
|
||||
padding: 8px 0 4px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--bg-color);
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
padding-inline-end: 8px;
|
||||
pointer-events: none;
|
||||
border-end-end-radius: 8px;
|
||||
}
|
||||
section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
button {
|
||||
color: var(--text-color);
|
||||
border-radius: 8px;
|
||||
background-image: radial-gradient(
|
||||
closest-side,
|
||||
var(--img-bg-color),
|
||||
transparent
|
||||
);
|
||||
text-shadow: 0 1px 0 var(--bg-color);
|
||||
position: relative;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
font-variant-numeric: slashed-zero;
|
||||
font-feature-settings: 'ss01';
|
||||
|
||||
&[data-title]:after {
|
||||
max-width: 50vw;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
content: attr(data-title);
|
||||
left: 50%;
|
||||
top: 0;
|
||||
background-color: var(--bg-color);
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
border: 1px solid var(--text-color);
|
||||
transform: translate(-50%, calc(-110% * var(--custom-emoji-size)));
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease-out 0.1s;
|
||||
font-family: var(--monospace-font);
|
||||
line-height: 1;
|
||||
}
|
||||
&.edge-left[data-title]:after {
|
||||
left: 0;
|
||||
transform: translate(0, calc(-110% * var(--custom-emoji-size)));
|
||||
}
|
||||
&.edge-right[data-title]:after {
|
||||
left: 100%;
|
||||
transform: translate(-100%, calc(-110% * var(--custom-emoji-size)));
|
||||
}
|
||||
|
||||
&:is(:hover, :focus) {
|
||||
z-index: 1;
|
||||
filter: none;
|
||||
background-color: var(--bg-faded-color);
|
||||
|
||||
&[data-title]:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
transition: transform 0.1s ease-out;
|
||||
width: calc(1.2em * var(--custom-emoji-size, 1));
|
||||
height: calc(1.2em * var(--custom-emoji-size, 1));
|
||||
}
|
||||
|
||||
&:is(:hover, :focus) img {
|
||||
transform: scale(2);
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
&.edge-left img {
|
||||
transform-origin: left center;
|
||||
}
|
||||
&.edge-right img {
|
||||
transform-origin: right center;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
import './custom-emojis-modal.css';
|
||||
|
||||
import { Trans, useLingui } from '@lingui/react/macro';
|
||||
import { memo } from 'preact/compat';
|
||||
import {
|
||||
|
|
@ -15,6 +17,9 @@ import Icon from './icon';
|
|||
import Loader from './loader';
|
||||
|
||||
const CUSTOM_EMOJIS_COUNT = 100;
|
||||
const EMOJI_SIZE_MIN = 1;
|
||||
const EMOJI_SIZE_MAX = 2;
|
||||
const EMOJI_SIZE_STEP = 0.5;
|
||||
|
||||
const CustomEmojiButton = memo(({ emoji, onClick, showCode }) => {
|
||||
const addEdges = (e) => {
|
||||
|
|
@ -160,6 +165,17 @@ function CustomEmojisModal({
|
|||
|
||||
const scrollableRef = useRef();
|
||||
const [matches, setMatches] = useState(null);
|
||||
const [emojiSize, setEmojiSize] = useState(EMOJI_SIZE_MIN);
|
||||
const onEmojiSizeDecrease = useCallback(() => {
|
||||
const newSize = Math.max(EMOJI_SIZE_MIN, emojiSize - EMOJI_SIZE_STEP);
|
||||
setEmojiSize(newSize);
|
||||
}, [emojiSize]);
|
||||
|
||||
const onEmojiSizeIncrease = useCallback(() => {
|
||||
const newSize = Math.min(EMOJI_SIZE_MAX, emojiSize + EMOJI_SIZE_STEP);
|
||||
setEmojiSize(newSize);
|
||||
}, [emojiSize]);
|
||||
|
||||
const onFind = useCallback(
|
||||
(e) => {
|
||||
const { value } = e.target;
|
||||
|
|
@ -228,7 +244,13 @@ function CustomEmojisModal({
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<div id="custom-emojis-sheet" class="sheet">
|
||||
<div
|
||||
id="custom-emojis-sheet"
|
||||
class="sheet"
|
||||
style={{
|
||||
'--custom-emoji-size': emojiSize,
|
||||
}}
|
||||
>
|
||||
{!!onClose && (
|
||||
<button type="button" class="sheet-close" onClick={onClose}>
|
||||
<Icon icon="x" alt={t`Close`} />
|
||||
|
|
@ -312,6 +334,24 @@ function CustomEmojisModal({
|
|||
)}
|
||||
</div>
|
||||
)}
|
||||
<div class="size-range">
|
||||
<button
|
||||
type="button"
|
||||
class="plain4"
|
||||
onClick={onEmojiSizeDecrease}
|
||||
disabled={emojiSize <= EMOJI_SIZE_MIN}
|
||||
>
|
||||
<Icon icon="zoom-out" alt={t`Zoom out`} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="plain4"
|
||||
onClick={onEmojiSizeIncrease}
|
||||
disabled={emojiSize >= EMOJI_SIZE_MAX}
|
||||
>
|
||||
<Icon icon="zoom-in" alt={t`Zoom in`} />
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -252,7 +252,7 @@ msgstr "View post stats"
|
|||
#: src/components/account-sheet.jsx:38
|
||||
#: src/components/add-remove-lists-sheet.jsx:45
|
||||
#: src/components/compose.jsx:897
|
||||
#: src/components/custom-emojis-modal.jsx:234
|
||||
#: src/components/custom-emojis-modal.jsx:256
|
||||
#: src/components/drafts.jsx:57
|
||||
#: src/components/edit-profile-sheet.jsx:87
|
||||
#: src/components/embed-modal.jsx:13
|
||||
|
|
@ -585,30 +585,38 @@ msgid "Failed to download GIF"
|
|||
msgstr "Failed to download GIF"
|
||||
|
||||
#. placeholder {0}: i18n.number(emojis.length - max)
|
||||
#: src/components/custom-emojis-modal.jsx:98
|
||||
#: src/components/custom-emojis-modal.jsx:103
|
||||
msgid "{0} more…"
|
||||
msgstr ""
|
||||
|
||||
#: src/components/custom-emojis-modal.jsx:240
|
||||
#: src/components/custom-emojis-modal.jsx:262
|
||||
msgid "Custom emojis"
|
||||
msgstr ""
|
||||
|
||||
#: src/components/custom-emojis-modal.jsx:260
|
||||
#: src/components/custom-emojis-modal.jsx:282
|
||||
msgid "Search emoji"
|
||||
msgstr "Search emoji"
|
||||
|
||||
#: src/components/custom-emojis-modal.jsx:291
|
||||
#: src/components/custom-emojis-modal.jsx:313
|
||||
msgid "Error loading custom emojis"
|
||||
msgstr ""
|
||||
|
||||
#: src/components/custom-emojis-modal.jsx:302
|
||||
#: src/components/custom-emojis-modal.jsx:324
|
||||
msgid "Recently used"
|
||||
msgstr "Recently used"
|
||||
|
||||
#: src/components/custom-emojis-modal.jsx:303
|
||||
#: src/components/custom-emojis-modal.jsx:325
|
||||
msgid "Others"
|
||||
msgstr "Others"
|
||||
|
||||
#: src/components/custom-emojis-modal.jsx:344
|
||||
msgid "Zoom out"
|
||||
msgstr "Zoom out"
|
||||
|
||||
#: src/components/custom-emojis-modal.jsx:352
|
||||
msgid "Zoom in"
|
||||
msgstr "Zoom in"
|
||||
|
||||
#: src/components/drafts.jsx:62
|
||||
#: src/pages/settings.jsx:702
|
||||
msgid "Unsent drafts"
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue