notfire/Iceshrimp.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[frontend/components] Update note compose

Browse source
This commit is contained in:
Jeder 2024-10-24 22:14:39 +02:00 • committed by Lilian
parent 2c6764c8e9
commit 0db1217c7c
No known key found for this signature in database
2 changed files with 38 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
Iceshrimp.Frontend/Components/Compose.razor
View file

@ -16,19 +16,19 @@
<dialog class="dialog" @ref="Dialog">
<div class="compose">
<div class="header">
<button @onclick="CloseDialog" aria-label="close">
<Icon Name="Icons.X" />
<button class="btn" title="@Loc["Close"]" @onclick="CloseDialog" aria-label="close">
<Icon Name="Icons.X"/>
</button>
<Dropdown TBind="NoteVisibility" Elements="@DropDownCreate()" @bind-Value="NoteDraft.Visibility"/>
<StateButton OnClick="SendNote" @ref="SendButton" ExtraClasses="post-btn" AriaLabel="post">
<Initial>
@Loc["ComposePost"]<Icon Name="Icons.PaperPlaneRight"/>
@Loc["ComposeNote"]<Icon Name="Icons.PaperPlaneRight"/>
</Initial>
<Loading>
<Icon Name="Icons.Spinner"/>
@Loc["Sending"]<Icon Name="Icons.Spinner"/>
</Loading>
<Success>
<Icon Name="Icons.Check"/>
@Loc["Done"]<Icon Name="Icons.Check"/>
</Success>
<Failed>
@Loc["Retry"]<Icon Name="Icons.X"/>
@ -48,13 +48,13 @@
}
<textarea @ref="Textarea" @bind="NoteDraft.Text" class="textarea" placeholder="@TextPlaceholder" rows="5" cols="35" autofocus="autofocus" aria-label="note text"></textarea>
<div class="footer">
<button class="footer-btn" @onclick="OpenUpload" aria-label="upload">
<button class="btn" title="@Loc["Upload file"]" @onclick="OpenUpload" aria-label="upload">
<Icon Name="Icons.Upload" Size="1.3rem"></Icon>
</button>
<button class="footer-btn" @onclick="ToggleCw" aria-label="content warning">
<button class="btn" title="@Loc["Content warning"]" @onclick="ToggleCw" aria-label="content warning">
<Icon Name="Icons.EyeSlash" Size="1.3rem"></Icon>
</button>
<button @ref="EmojiButton" class="footer-btn positioned" @onclick="ToggleEmojiPicker" aria-label="emoji">
<button @ref="EmojiButton" class="btn positioned" title="@Loc["Emoji"]" @onclick="ToggleEmojiPicker" aria-label="emoji">
<Icon Name="Icons.Smiley" Size="1.3rem"></Icon>
</button>
<div class="file-input">
@ -303,4 +303,4 @@
{
TextPlaceholder = AvailablePlaceholders["default"];
}
}
}

33
Iceshrimp.Frontend/Components/Compose.razor.css
View file

@ -25,15 +25,25 @@
}
.header {
display: flex;
align-items: center;
flex: 1 1 auto;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.footer {
display: flex;
align-items: center;
gap: 0.2rem;
}
.textarea {
display: block;
background-color: var(--background-color);
border: none;
outline: none;
width: 100%;
padding: unset;
}
.input {
@ -50,21 +60,36 @@
::deep {
.post-btn {
display: flex;
margin-left: auto;
align-items: center;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
background: var(--accent-color);
float: right;
> i {
padding-left: 0.5rem;
}
}
}
.footer-btn {
width: 2.5rem;
.btn {
padding: 0.5rem 0.75rem;
height: max-content;
background-color: var(--background-color);
line-height: 1;
}
.btn:hover {
background-color: var(--hover-color);
}
.separator {
color: var(--highlight-color);
margin-top: 0.25rem;
margin-bottom: 0.25rem;
margin-bottom: 0.5rem;
border-style: solid;
}
.file-input {