mstar/linstrom
1
0
Fork 0
Code Issues 27 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Design stuff shit

Browse source
This commit is contained in:
Melody Becker 2024-09-23 09:18:35 +02:00
parent 5dbf3d9af2
commit 23aefa268a
35 changed files with 5846 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

53
frontend-reactive/app/components/note/interactions.hbs Normal file
View file

@ -0,0 +1,53 @@
<div class="resource-preload">
<link rel="preload" type="image" href="assets/svgs/reload-black.svg">
<link rel="preload" type="image" href="assets/svgs/reload-coloured.svg">
<link rel="preload" type="image" href="assets/svgs/heart-rainbow.svg">
<link rel="preload" type="image" href="assets/svgs/heart-black-outline.svg">
</div>
<div class="note-interactions-wrapper">
<div type="button" class="note-interactions-interaction-button" {{on "click" this.toggleBoost}}>
{{#if this.hasBoosted}}
<Svgs::ReloadOutline @class="note-interactions-interaction-icon"/>
{{else}}
<Svgs::ReloadColoured @class="note-interactions-interaction-icon"/>
{{/if}}
<p class="note-interactions-interaction-counter noselect">{{this.args.boostCount}}</p>
<EmberTooltip @text="Boost this note" @side="top-start"/>
</div>
<div class="note-interactions-interaction-button">
<div
type="button"
class="note-interactions-interactions-button-like"
aria-label="Like or unlike"
aria-description="Send a like reaction or retract the current reaction"
{{on "click" this.toggleDefaultLike}}
>
{{#if this.hasReacted}}
<Svgs::HeartOutline @class="note-interactions-interaction-icon"/>
{{else}}
<Svgs::HeartFilled @class="note-interactions-interaction-icon"/>
{{/if}}
<p class="note-interactions-interaction-counter noselect">{{this.args.totalLikeCount}}</p>
<EmberTooltip @text="Like this note"/>
</div>
<div
class="note-interactions-interactions-button-custom"
aria-label="Send a custom reaction"
aria-description="Choose an emote and send that as custom reaction"
type="button"
{{on "click" this.openCustomReactionSelector}}
>
<Svgs::PlusBlack @class="note-interactions-interaction-icon"/>
<EmberTooltip @text="Send a custom reaction"/>
</div>
<div
class="note-interactions-interactions-button-custom"
type="button"
aria-label="Expand existing reactions"
{{on "click" this.openAllReactions}}
>
<Svgs::ArrowDownBlack @class="note-interactions-interaction-icon"/>
<EmberTooltip @text="Expand reactions"/>
</div>
</div>
</div>

53
frontend-reactive/app/components/note/interactions.ts Normal file
View file

@ -0,0 +1,53 @@
import { action } from "@ember/object";
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import isLandscape from "frontend-reactive/helpers/isLandscape";
export interface NoteInteractionsSignature {
// The arguments accepted by the component
Args: {
boostCount: number;
totalLikeCount: number;
reactions: {
[key: string]: number;
};
hasBoosted: boolean;
hasReacted: boolean;
};
// Any blocks yielded by the component
Blocks: {
default: [];
};
// The element to which `...attributes` is applied in the component template
Element: null;
}
export default class NoteInteractions extends Component<NoteInteractionsSignature> {
@tracked hasBoosted = this.args.hasBoosted;
@tracked hasReacted = this.args.hasReacted;
@tracked expandReactions = false;
@action
toggleBoost() {
this.hasBoosted = !this.hasBoosted;
console.log("boosted", this.hasBoosted);
}
@action
toggleDefaultLike() {
this.hasReacted = !this.hasReacted;
console.log("reacted", this.hasReacted);
}
@action
openCustomReactionSelector() {
this.hasReacted = !this.hasReacted;
console.log("sent custom reaction", this.hasReacted);
}
@action
openAllReactions() {
console.log("Toggle all reactions overview");
this.expandReactions = !this.expandReactions;
}
}