feat: Dark Mode (#7471)
This commit is contained in:
Sivin Varghese
@@ -5,26 +5,49 @@
|
||||
:show-close-button="false"
|
||||
:on-close="onClose"
|
||||
>
|
||||
<div v-on-clickaway="onClose" class="gallery-modal--wrap" @click="onClose">
|
||||
<div class="gallery-modal--header">
|
||||
<div class="header-info--wrap" @click.stop>
|
||||
<div
|
||||
v-on-clickaway="onClose"
|
||||
class="bg-white dark:bg-slate-900 flex flex-col h-[inherit] w-[inherit]"
|
||||
@click="onClose"
|
||||
>
|
||||
<div class="items-center flex h-16 justify-between py-2 px-6 w-full">
|
||||
<div class="items-center flex justify-start min-w-[15rem]" @click.stop>
|
||||
<thumbnail
|
||||
:username="senderDetails.name"
|
||||
:src="senderDetails.avatar"
|
||||
/>
|
||||
<div class="header-info">
|
||||
<h3 class="sub-block-title sender-name">
|
||||
<span class="text-truncate">{{ senderDetails.name }}</span>
|
||||
<div
|
||||
class="flex items-start flex-col justify-center ml-2 rtl:ml-0 rtl:mr-2"
|
||||
>
|
||||
<h3
|
||||
class="sub-block-title inline-block leading-[1.4] m-0 p-0 capitalize"
|
||||
>
|
||||
<span
|
||||
class="text-slate-800 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ senderDetails.name }}
|
||||
</span>
|
||||
</h3>
|
||||
<span class="time-stamp text-truncate">{{ readableTime }}</span>
|
||||
<span
|
||||
class="text-xs m-0 p-0 text-slate-400 dark:text-slate-200 overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ readableTime }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-name--header text-block-title">
|
||||
<span class="text-truncate">
|
||||
<div
|
||||
class="items-center text-slate-700 dark:text-slate-100 flex font-semibold justify-start min-w-0 p-1 w-auto text-block-title"
|
||||
>
|
||||
<span
|
||||
class="text-slate-700 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ fileNameFromDataUrl }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="header-actions" @click.stop>
|
||||
<div
|
||||
class="items-center flex gap-2 justify-end min-w-[15rem]"
|
||||
@click.stop
|
||||
>
|
||||
<woot-button
|
||||
size="large"
|
||||
color-scheme="secondary"
|
||||
@@ -41,8 +64,8 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-modal--body">
|
||||
<div class="attachment-toggle--button">
|
||||
<div class="items-center flex h-full justify-center w-full">
|
||||
<div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
|
||||
<woot-button
|
||||
v-if="hasMoreThanOneAttachment"
|
||||
size="large"
|
||||
@@ -58,13 +81,13 @@
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="attachments-viewer">
|
||||
<div class="attachment-view">
|
||||
<div class="flex items-center flex-col justify-center w-full h-full">
|
||||
<div>
|
||||
<img
|
||||
v-if="isImage"
|
||||
:key="activeAttachment.message_id"
|
||||
:src="activeAttachment.data_url"
|
||||
class="modal-image skip-context-menu"
|
||||
class="modal-image skip-context-menu my-0 mx-auto"
|
||||
@click.stop
|
||||
/>
|
||||
<video
|
||||
@@ -73,7 +96,7 @@
|
||||
:src="activeAttachment.data_url"
|
||||
controls
|
||||
playsInline
|
||||
class="modal-video skip-context-menu"
|
||||
class="modal-video skip-context-menu my-0 mx-auto"
|
||||
@click.stop
|
||||
/>
|
||||
<audio
|
||||
@@ -87,7 +110,7 @@
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
||||
<div class="attachment-toggle--button">
|
||||
<div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
|
||||
<woot-button
|
||||
v-if="hasMoreThanOneAttachment"
|
||||
size="large"
|
||||
@@ -104,8 +127,10 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-modal--footer">
|
||||
<div class="header-count text-block-title">
|
||||
<div class="items-center flex h-16 justify-center w-full py-2 px-6">
|
||||
<div
|
||||
class="items-center rounded-sm flex font-semibold justify-center min-w-[5rem] p-1 bg-slate-25 dark:bg-slate-800 text-slate-600 dark:text-slate-200 text-block-title"
|
||||
>
|
||||
<span class="count">
|
||||
{{ `${activeImageIndex + 1} / ${allAttachments.length}` }}
|
||||
</span>
|
||||
@@ -252,123 +277,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.gallery-modal--wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
|
||||
.gallery-modal--header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: var(--space-jumbo);
|
||||
justify-content: space-between;
|
||||
padding: var(--space-small) var(--space-medium);
|
||||
width: 100%;
|
||||
|
||||
.header-info--wrap {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
min-width: var(--space-giga);
|
||||
|
||||
.header-info {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: var(--space-small);
|
||||
|
||||
.sender-name {
|
||||
display: inline-block;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.time-stamp {
|
||||
color: var(--s-400);
|
||||
font-size: var(--font-size-mini);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-name--header {
|
||||
align-items: center;
|
||||
color: var(--s-700);
|
||||
display: flex;
|
||||
font-weight: var(--font-weight-bold);
|
||||
justify-content: flex-start;
|
||||
min-width: 0;
|
||||
padding: var(--space-smaller);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-small);
|
||||
justify-content: flex-end;
|
||||
min-width: var(--space-giga);
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-modal--body {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gallery-modal--footer {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: var(--space-jumbo);
|
||||
justify-content: center;
|
||||
padding: var(--space-small) var(--space-medium);
|
||||
width: 100%;
|
||||
|
||||
.header-count {
|
||||
align-items: center;
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--s-25);
|
||||
color: var(--s-600);
|
||||
display: flex;
|
||||
font-weight: var(--font-weight-bold);
|
||||
justify-content: center;
|
||||
min-width: 5rem;
|
||||
padding: var(--space-smaller);
|
||||
}
|
||||
}
|
||||
|
||||
.attachments-viewer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
.attachment-view {
|
||||
img {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
video {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.attachment-toggle--button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-width: var(--space-mega);
|
||||
width: var(--space-mega);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user