e2net/iceshrimp
3
0
Fork 0
forked from mirrors/iceshrimp
Code Pull requests Activity

add ability to crop content

Browse source
This commit is contained in:
Isabell 2023-05-28 15:19:57 +10:00
parent 9e0e305aef
commit 62fce3a32e
5 changed files with 28 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
locales/de-DE.yml
View file

@ -1178,6 +1178,8 @@ _mfm:
background: Hintergrundfarbe
positionDescription: Inhalt um einen bestimmten Betrag verschieben.
position: Position
cropDescription: Inhalt zuschneiden.
crop: Zuschneiden
scale: Maßstab
scaleDescription: Skaliere den Inhalt um einen bestimmten Betrag.
foregroundDescription: Ändern der Vordergrundfarbe von Text.

2
locales/en-US.yml
View file

@ -1270,6 +1270,8 @@ _mfm:
fadeDescription: "Fades content in and out."
position: "Position"
positionDescription: "Move content by a specified amount."
crop: "Crop"
cropDescription: "Crop content."
scale: "Scale"
scaleDescription: "Scale content by a specified amount."
foreground: "Foreground color"

8
packages/client/src/components/mfm.ts
View file

@ -243,6 +243,14 @@ export default defineComponent({
style = `transform: translateX(${x}em) translateY(${y}em);`;
break;
}
case "crop": {
const top = parseFloat(token.props.args.top ?? "0%");
const right = parseFloat(token.props.args.right ?? "0%");
const bottom = parseFloat(token.props.args.bottom ?? "0%");
const left = parseFloat(token.props.args.left ?? "0%");
style = `clip-path: inset(${top} ${right} ${bottom} ${left});`;
break;
}
case "scale": {
const x = Math.min(parseFloat(token.props.args.x ?? "1"), 5);
const y = Math.min(parseFloat(token.props.args.y ?? "1"), 5);

15
packages/client/src/pages/mfm-cheat-sheet.vue
View file

@ -365,6 +365,18 @@
</div>
</div>
</div>
<div class="section _block">
<div class="title">{{ i18n.ts._mfm.crop }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.cropDescription }}</p>
<div class="preview">
<Mfm :text="preview_crop" />
<MkTextarea v-model="preview_crop"
><span>MFM</span></MkTextarea
>
</div>
</div>
</div>
<div class="section _block">
<div class="title">{{ i18n.ts._mfm.position }}</div>
<div class="content">
@ -483,6 +495,9 @@ let preview_rotate = $ref(
let preview_position = $ref(
"$[position.y=-1 Positioning]\n$[position.x=-1 Positioning]"
);
let preview_crop = $ref(
"$[crop.top=50 🍮] $[crop.right=50 🍮] $[crop.bottom=50 🍮] $[crop.left=50 🍮]"
);
let preview_scale = $ref(
"$[scale.x=1.3 Scaling]\n$[scale.x=1.3,y=2 Scaling]\n$[scale.y=0.3 Tiny scaling]"
);

1
packages/client/src/scripts/mfm-tags.ts
View file

@ -12,6 +12,7 @@ export const MFM_TAGS = [
"x4",
"scale",
"position",
"crop",
"fg",
"bg",
"font",