Skip to content
This repository was archived by the owner on Dec 16, 2024. It is now read-only.

EmoteUpload UI changes #976

Open
wants to merge 8 commits into
base: dev
Choose a base branch
from
Open

EmoteUpload UI changes #976

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c01c705
Formats and requirements for emote upload
WaterBoiledPizza Jan 23, 2023
c034d89
Follow up regarding changes to emote upload page
WaterBoiledPizza Jan 23, 2023
74e1313
Layout adjustment
WaterBoiledPizza Jan 25, 2023
22704c7
Format adjustment
WaterBoiledPizza Jan 25, 2023
bf5370b
Changed text
WaterBoiledPizza Jan 25, 2023
39f6f73
EmoteUpload UI changes
WaterBoiledPizza May 22, 2023
47db480
Removed unused lines
WaterBoiledPizza May 22, 2023
98e5d93
Merge branch 'SevenTV:dev' into layout3
WaterBoiledPizza May 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 53 additions & 31 deletions src/assets/scss/emote-upload/emote-upload.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@
flex-direction: row;
height: 100%;
margin: 1em;
justify-content: space-between;
// justify-content: space-between;

@include themify() {
> .image-upload > span > .parent-emote {
> .inputs > span > .parent-emote {
background-color: darken(themed("backgroundColor"), 2);
}
> .image-upload > div {
> .image-upload > .image-box {
background-color: darken(themed("backgroundColor"), 2);
> .formats-viewer {
background-color: transparentize(lighten(themed("backgroundColor"), 4), 0.25);
Expand All @@ -47,28 +47,18 @@
}
}

> .form-grid-item {
width: calc(100% / 3);
}

> .image-upload {
width: calc(100% / 3);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0.5em 1em;
margin-right: 1em;
border-radius: 0.4em;
min-width: 26em;

> span {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
flex-grow: 1;
}

> div {
> .image-box {
display: flex;
flex-direction: column;
align-items: center;
Expand Down Expand Up @@ -100,7 +90,7 @@

> .formats-viewer {
position: absolute;
width: 16em;
width: 20em;
display: flex;
flex-direction: column;
border-radius: 0.4em;
Expand All @@ -121,15 +111,15 @@
margin-bottom: 0.25em;
}
[part="label"] {
width: 33.3333%;
width: 20%;
}
[part="animation"] {
text-align: center;
width: 33.3333%;
width: 40%;
}
[part="transparency"] {
text-align: center;
width: 33.3333%;
width: 40%;
}
[part="close-btn"] {
cursor: pointer;
Expand All @@ -139,17 +129,21 @@
}
}

.parent-emote {
padding: 1em;
border-radius: 0.3em;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 0 0.25em rgb(100, 70, 180);
> .requirements {
font-size: 0.725rem;
// margin-left: 4rem;
// margin-right: auto;
padding-bottom: 0.5rem;
width: 18rem;

> .as-child-notice {
text-align: center;
margin-left: 1em;
> h3 {
padding-top: 1rem;
font-size: 1rem;
padding-bottom: 0.25rem;
}

> p {
font-size: 0.9rem;
}
}
}
Expand All @@ -169,16 +163,37 @@
height: 8rem;
border: 4px dashed currentColor;
border-radius: 0.25em;
object-fit: contain;
}
}

> .inputs {
width: calc(100% / 3);
display: flex;
flex-direction: column;
margin-top: 1em;
padding: 0.5em 1em;
border-radius: 0.4em;

> span {
display: flex;
align-items: center;
width: 100%;
}
.parent-emote {
padding: 1em;
border-radius: 0.3em;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 0 0.25em rgb(100, 70, 180);
margin-bottom: 2.5em;
> .as-child-notice {
text-align: center;
margin-left: 1em;
}
}

.text-input {
display: flex;
flex-direction: column;
Expand All @@ -205,7 +220,14 @@
align-items: center;
}
> .inputs {
align-items: center;
align-items: flex-start;
width: inherit;
.text-input {
max-width: 100%;
}
form {
width: 100%;
}
}
}
}
Expand Down
35 changes: 24 additions & 11 deletions src/views/emote-upload/EmoteUpload.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,17 @@
<div class="overall-form">
<!-- Information Inputs -->
<div class="inputs form-grid-item">
<span>
<div v-if="parentEmote" class="parent-emote">
<img :src="getImage(parentEmote.host, ImageFormat.WEBP, 2)?.url" />
<div class="as-child-notice">
<i18n-t keypath="emote.upload.as_child" tag="p">
<span style="font-weight: 600">{{ parentEmote.name }}</span>
</i18n-t>
</div>
</div>
</span>

<h3>{{ t(txt.emoteDetails) }}</h3>

<form>
Expand All @@ -32,6 +43,7 @@
<div class="image-upload form-grid-item">
<div
:dragOver="dragOver"
class="image-box"
@drop.prevent="onDropFile"
@dragover.prevent
@dragenter="dragOver = true"
Expand Down Expand Up @@ -71,24 +83,25 @@
/>
<Icon v-else icon="times" color="red" />
</div>
<span part="close-btn"></span>
</div>
</div>
<input id="file-upload" hidden type="file" :accept="mimeList" @change="onFileInputChange" />
<label for="file-upload">
<img ref="previewImage" />
</label>
</div>

<span>
<div v-if="parentEmote" class="parent-emote">
<img :src="getImage(parentEmote.host, ImageFormat.WEBP, 2)?.url" />
<div class="as-child-notice">
<i18n-t keypath="emote.upload.as_child" tag="p">
<span style="font-weight: 600">{{ parentEmote.name }}</span>
</i18n-t>
</div>
</div>
</span>
<div class="requirements">
<h3>Up to:</h3>
<p>- 7 MB large</p>
<p>- 1000 x 1000 pixels big</p>
<p>- 1000 frames</p>
<p>- 50 fps</p>
</div>
<div class="requirements">
* Emote will be scaled to a max height of 128 px and/or a max width of 384 px, preserving the
aspect ratio.
</div>
</div>
</div>

Expand Down