Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: dark mode #138 #143

Merged
merged 2 commits into from
Sep 30, 2024
Merged

feat: dark mode #138 #143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7eb05ea
feat: dark mode #138
mostafaznv Sep 30, 2024
8ff7790
build: update assets
mostafaznv Sep 30, 2024
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
2 changes: 1 addition & 1 deletion dist/css/field.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/js/field.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion resources/js/ckeditor/plugins/SnippetBrowser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,6 @@ export default class SnippetBrowser {
}

get icon() {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 502.664 502.664"><path d="M153.821 358.226L0 274.337v-46.463l153.821-83.414v54.574L46.636 250.523l107.185 53.431v54.272zm26.273 29.358L282.103 115.08h32.227L212.084 387.584h-31.99zm168.749-29.358v-54.272l107.164-52.999-107.164-52.59v-53.927l153.821 83.522v46.183l-153.821 84.083z" fill="#000"/></svg>`
return `<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 502.664 502.664"><path d="M281.398 117.079c-.489 1.267-23.338 62.246-50.775 135.51-27.437 73.263-50.068 133.685-50.29 134.271-.321.844 2.936 1.019 15.673.838l16.079-.228 50.499-134.462c27.775-73.955 50.768-135.311 51.097-136.348l.597-1.885h-31.99l-.89 2.304M76.656 186.33.419 227.693l-.222 23.354-.222 23.354 75.97 41.455c41.784 22.8 76.474 41.576 77.088 41.725.914.222 1.117-4.632 1.117-26.621v-26.893l-53.648-26.753-53.649-26.754 3.173-1.598c1.745-.879 25.415-12.257 52.601-25.284s49.9-24.056 50.476-24.508c.799-.628 1.047-7.161 1.047-27.529 0-14.688-.282-26.699-.628-26.69-.346.009-34.935 18.63-76.866 41.379m271.858-14.73v26.666l53.717 26.324 53.717 26.323-53.717 26.63-53.717 26.631v26.867c0 25.24.089 26.834 1.466 26.316.806-.303 35.482-19.099 77.057-41.769l75.591-41.217-.192-23.294-.191-23.293-76.237-41.412c-41.931-22.777-76.52-41.418-76.866-41.425-.346-.007-.628 11.987-.628 26.653" fill-rule="evenodd"/></svg>`
}
}
2 changes: 1 addition & 1 deletion resources/js/ckeditor/plugins/element-attribute/src/add-attribute-to-element-ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ class ElementAddAttributesUI extends Plugin {
}

_pluginIcon() {
return '<svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="none" style="color: transparent"><path d="M0 0h24v24h-24v-24Z"></path><path stroke="#323232" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 15v-6"></path><path stroke="#323232" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.6 15h-3v-6h3c1.105 0 2 .895 2 2v2c0 1.105-.895 2-2 2Z"></path><path stroke="#323232" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.353 21.353h-12.706c-1.657 0-3-1.343-3-3v-12.706c0-1.657 1.343-3 3-3h12.705c1.657 0 3 1.343 3 3v12.705c.001 1.658-1.342 3.001-2.999 3.001Z"></path></g></svg>'
return '<svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.88 1.982A3.752 3.752 0 0 0 1.982 4.9c-.058.288-.063 1.013-.053 7.24l.011 6.92.091.293c.404 1.304 1.312 2.212 2.616 2.616l.293.091 6.92.011c7.616.012 7.194.025 7.851-.23 1.204-.468 2.125-1.592 2.326-2.841.059-.361.059-13.639 0-14-.201-1.249-1.123-2.374-2.326-2.84-.652-.253-.234-.24-7.739-.237-5.682.003-6.876.013-7.092.059m14.019 1.479c.335.088.525.181.81.396.323.244.621.645.76 1.023l.111.3v13.64l-.111.3a2.364 2.364 0 0 1-1.349 1.349l-.3.111H5.18l-.3-.111c-.526-.194-1.068-.688-1.284-1.172-.205-.456-.196-.134-.196-7.297 0-7.163-.009-6.841.196-7.297.184-.412.696-.923 1.108-1.108.441-.198.136-.19 7.278-.192 5.885-.003 6.709.004 6.917.058M7.815 8.277a.8.8 0 0 0-.462.354l-.093.149v6.44l.093.149c.357.574 1.223.443 1.363-.207.059-.275.06-6.065.001-6.321a.747.747 0 0 0-.902-.564m3.6-.001a.806.806 0 0 0-.462.355l-.093.149V15.233l.12.17a.965.965 0 0 0 .28.253c.155.082.212.084 1.96.084 1.761 0 1.807-.002 2.12-.092a2.797 2.797 0 0 0 1.908-1.908c.088-.307.092-.376.092-1.74 0-1.364-.004-1.433-.092-1.74a2.81 2.81 0 0 0-1.888-1.904c-.287-.085-.376-.089-2.06-.1-.968-.006-1.816.003-1.885.02m3.639 1.565c.29.109.596.415.705.705.075.201.081.309.081 1.454 0 1.45-.014 1.523-.366 1.874-.351.352-.424.366-1.876.366H12.36V9.76h1.238c1.147 0 1.255.006 1.456.081" fill-rule="evenodd" /></svg>'
}

get _isVisible() {
Expand Down
3 changes: 1 addition & 2 deletions resources/js/components/RadioInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="radio-container">
<label v-for="option in options" class="radio" :key="option.value">
<label v-for="option in options" class="radio text-gray-600 dark:text-gray-500" :key="option.value">
{{ option.label }}

<input
Expand Down Expand Up @@ -60,7 +60,6 @@ function onChange(e) {
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: rgba(var(--colors-gray-600));
user-select: none;

input {
Expand Down
2 changes: 1 addition & 1 deletion resources/js/components/media-browser/MediaBrowser.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<modal v-model="modalStatus" class="media-browser" :title="__(title)" :content-no-overflow="true">
<template #header>
<span>{{ __('Media Browser') }}</span>
<span class="">{{ __('Media Browser') }}</span>
</template>


Expand Down
16 changes: 6 additions & 10 deletions resources/js/components/media-browser/MediaBrowserInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template>
<div v-if="item" class="info h-full nova-ckeditor-mobile-none">
<div v-if="item" class="info h-full nova-ckeditor-mobile-none bg-white dark:bg-gray-800 border-l border-gray-100 dark:border-gray-600">
<div class="flex-grow overflow-y-auto overflow-x-hidden">
<div class="info__header mb-2">
<strong :title="item.name">{{ item.name }}</strong>
<strong class="text-gray-500 dark:text-gray-200" :title="item.name">{{ item.name }}</strong>

<button @click="close" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
Expand Down Expand Up @@ -34,8 +34,10 @@
</div>

<div class="info__data">
<div v-for="item in info" :key="item.label" class="info__data--item">
<span class="info__data--item-label">{{ __(item.label) }}</span>
<div v-for="item in info" :key="item.label" class="info__data--item text-gray-500 dark:text-gray-200 border-b border-gray-100 dark:border-gray-700">
<span class="info__data--item-label text-gray-600 dark:text-gray-500">
{{ __(item.label) }}
</span>

<div class="info__data--item-value">
<template v-if="item.label === 'Dominant Color'">
Expand Down Expand Up @@ -243,8 +245,6 @@ function secondsToHms(seconds) {
justify-content: space-between;
width: 320px;
padding: 8px 8px 0;
background: #fff;
border-left: solid 1px rgba(var(--colors-gray-100));

&__header {
display: flex;
Expand All @@ -254,7 +254,6 @@ function secondsToHms(seconds) {
strong {
font-size: 18px;
font-weight: 600;
color: rgba(var(--colors-gray-500));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Expand Down Expand Up @@ -294,13 +293,10 @@ function secondsToHms(seconds) {
align-items: center;
justify-content: space-between;
font-size: 14px;
color: rgba(var(--colors-gray-500));
border-bottom: solid 1px rgba(var(--colors-gray-100));
height: 36px;

&-label {
font-weight: bold;
color: rgba(var(--colors-gray-600));
}

&-value {
Expand Down
6 changes: 2 additions & 4 deletions resources/js/components/media-browser/MediaBrowserItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div @dblclick.stop="pick" @click.stop="select(true)" class="item" :class="{selected: isSelected}">
<div @dblclick.stop="pick" @click.stop="select(true)" class="item bg-white dark:bg-gray-800" :class="{selected: isSelected}">
<figure class="item__preview">
<figcaption class="item__preview--format">{{ format }}</figcaption>

Expand Down Expand Up @@ -40,7 +40,7 @@
</figcaption>
</figure>

<div class="item__details">
<div class="item__details border-t border-gray-200 dark:border-gray-700">
<span class="item__details--name" :title="item.name">{{ item.name }}</span>

<button @click.stop.prevent="select(false)" type="button" class="item__details--select">
Expand Down Expand Up @@ -148,7 +148,6 @@ function play() {
.item {
position: relative;
display: block;
background-color: white;
box-shadow: 0 0 4px 2px rgba(46, 49, 56, 0.15);
border: 1px solid transparent;
overflow: hidden;
Expand Down Expand Up @@ -219,7 +218,6 @@ function play() {
}

&__details {
border-top: 1px solid rgba(46, 49, 56, 0.15);
display: flex;
align-items: center;
justify-content: space-between;
Expand Down
3 changes: 1 addition & 2 deletions resources/js/components/media-browser/MediaBrowserList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<transition name="fade">
<div v-if="loading" class="loading" />
<div v-if="loading" class="loading bg-white/75 dark:bg-gray-800/75" />
</transition>


Expand Down Expand Up @@ -180,7 +180,6 @@ fetch(props.page)
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
z-index: 10;
}

Expand Down
3 changes: 1 addition & 2 deletions resources/js/components/media-browser/MediaBrowserNavbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="navbar">
<div class="navbar bg-white dark:bg-gray-800">
<div class="inline-flex items-center gap-1 nova-ckeditor-mobile-none">
<button
@click.stop="download"
Expand Down Expand Up @@ -214,7 +214,6 @@ init()
position: relative;
width: 100%;
height: 52px;
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
Expand Down
7 changes: 3 additions & 4 deletions resources/js/components/media-browser/MediaBrowserPagination.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="pagination">
<div class="pagination bg-white dark:bg-gray-800">
<div v-if="loading" class="loading">
<div class="indeterminate"></div>
</div>
Expand Down Expand Up @@ -31,6 +31,7 @@
v-model.number="inputPage"
@select.stop.prevent
type="number"
class="border-b border-gray-200 dark:border-gray-600"
:title="__('Enter Page Number')"
min="1"
:max="total"
Expand Down Expand Up @@ -138,7 +139,6 @@ function pick() {
display: flex;
align-items: center;
justify-content: center;
background: white;
height: 50px;
box-shadow: 0 0 6px rgba(46, 49, 56, 0.05);
z-index: 100;
Expand Down Expand Up @@ -175,10 +175,9 @@ function pick() {
text-align: center;
width: 32px;
outline: none;
border: none;
appearance: textfield;
border-bottom: solid 1px rgba(var(--colors-gray-200));
margin-bottom: -2px;
background: transparent;

&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
Expand Down
2 changes: 1 addition & 1 deletion resources/js/components/media-browser/MediaBrowserRenameModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
@select.stop.prevent
v-model="name"
ref="input"
class="rename-modal__input flex-grow"
class="rename-modal__input flex-grow bg-transparent"
/>
</div>
</template>
Expand Down
13 changes: 6 additions & 7 deletions resources/js/components/media-browser/MediaBrowserSearchModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,17 @@


<div class="p-3 overflow-x-hidden">
<span class="search-modal__history--label">{{ __('Recent searches') }}:</span>
<span class="search-modal__history--label text-gray-500 dark:text-gray-400">
{{ __('Recent searches') }}:
</span>

<div
v-for="(item, index) in reverseHistory"
@click.stop="select(index)"
class="search-modal__history--item flex items-center justify-between"
class="search-modal__history--item flex items-center justify-between hover:bg-gray-200 dark:hover:bg-gray-800"
:key="index"
>
<span>{{ item }}</span>
<span class="text-gray-500 dark:text-gray-400">{{ item }}</span>

<button
@click.stop="deleteItemFromHistory(index)"
Expand Down Expand Up @@ -156,12 +158,12 @@ initHistory()
outline: none;
//width: 300px;
height: 30px;
background: transparent;
}

.search-modal__history {
&--label {
display: block;
color: rgba(var(--colors-gray-500));
font-size: 14px;
margin-bottom: 12px;
}
Expand All @@ -174,7 +176,6 @@ initHistory()
border-radius: 6px;

& > span {
color: rgba(var(--colors-gray-500));
font-size: 16px;
white-space: nowrap;
overflow: hidden;
Expand All @@ -197,8 +198,6 @@ initHistory()
}

&:hover {
background: rgba(var(--colors-gray-200));

& > button {
opacity: 1;
}
Expand Down
17 changes: 6 additions & 11 deletions resources/js/components/media-browser/MediaBrowserTypeList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<template>
<div class="browser-list" :class="{'is-extended': extended}">
<div class="browser-list bg-white dark:bg-gray-800 border-r border-gray-100 dark:border-gray-600" :class="{'is-extended': extended}">
<div>
<div
v-if="hasImagePicker"
@click="select('image')"
class="browser-list__item"
class="browser-list__item text-gray-500 dark:text-gray-200"
:class="{selected: modelValue === 'image'}"
:title="__('Images')"
>
Expand All @@ -16,7 +16,7 @@
<div
v-if="hasVideoPicker"
@click="select('video')"
class="browser-list__item"
class="browser-list__item text-gray-500 dark:text-gray-200"
:class="{selected: modelValue === 'video'}"
:title="__('Videos')"
>
Expand All @@ -28,7 +28,7 @@
<div
v-if="hasAudioPicker"
@click="select('audio')"
class="browser-list__item"
class="browser-list__item text-gray-500 dark:text-gray-200"
:class="{selected: modelValue === 'audio'}"
:title="__('Audios')"
>
Expand All @@ -40,7 +40,7 @@
<div
v-if="hasFilePicker"
@click="select('file')"
class="browser-list__item"
class="browser-list__item text-gray-500 dark:text-gray-200"
:class="{selected: modelValue === 'file'}"
:title="__('Files')"
>
Expand All @@ -51,7 +51,7 @@
</div>

<div class="browser-list__toggle-sidebar">
<button type="button" @click.stop.prevent="toggle">
<button type="button" class="hover:bg-gray-100 dark:hover:bg-gray-700" @click.stop.prevent="toggle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.59 18 19 16.59 14.42 12 19 7.41 17.59 6l-6 6z"></path><path d="m11 18 1.41-1.41L7.83 12l4.58-4.59L11 6l-6 6z"></path></svg>
</button>
</div>
Expand Down Expand Up @@ -138,8 +138,6 @@ function pick() {
display: flex;
flex-direction: column;
justify-content: space-between;
background: #fff;
border-right: solid 1px rgba(var(--colors-gray-100));

&__item {
display: flex;
Expand All @@ -148,7 +146,6 @@ function pick() {
gap: 14px;
height: 48px;
font-size: 14px;
color: rgba(var(--colors-gray-500));
padding: 0 16px;
transition: all 300ms, border-left-width 100ms;
cursor: pointer;
Expand Down Expand Up @@ -201,8 +198,6 @@ function pick() {
}

&:hover {
background: rgba(var(--colors-gray-100));

svg {
fill: rgba(var(--colors-gray-800));
}
Expand Down
14 changes: 7 additions & 7 deletions resources/js/components/modal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div ref="modal" class="absolute">
<div ref="modal" class="absolute text-gray-500 dark:text-gray-200">
<transition name="editorModal" mode="out-in">
<div
v-if="modelValue"
Expand All @@ -9,10 +9,10 @@
:class="{
'modal-is-active': modelValue,
'full-screen-modal w-screen h-screen top-0 left-0 w-full': fullscreen,
'centered-modal rounded-lg shadow-lg border': !fullscreen
'centered-modal rounded-lg shadow-lg border border-gray-200 dark:border-gray-600': !fullscreen
}"
>
<div class="modal__header flex-0 flex items-center px-3 py-2 bg-white border-b border-primary-10%">
<div class="modal__header flex-0 flex items-center px-3 py-2 bg-white dark:bg-gray-800 border-b border-primary-10% dark:border-gray-600">
<div v-if="title" class="flex-0 text-gray-400 pl-2">
<h2 class="self-center text-primary-600 text-base font-semibold">{{ title }}</h2>
</div>
Expand All @@ -23,8 +23,8 @@

<div class="flex-0 flex items-center" :class="{'pr-2': title}">
<slot name="header-right">
<button @click.prevent="$emit('update:modelValue',false)" class="h-5 w-5 m-0 cursor-pointer text-primary-400">
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-testid="CloseOutlined-icon" class="ckbox-icon ckbox-icon--base ckbox-btn__icon">
<button @click.prevent="$emit('update:modelValue',false)" class="h-5 w-5 m-0 cursor-pointer text-primary-400 text-gray-900 dark:text-gray-400">
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" data-testid="CloseOutlined-icon" class="ckbox-icon ckbox-icon--base ckbox-btn__icon">
<path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path>
</svg>
</button>
Expand All @@ -33,13 +33,13 @@
</div>

<div
class="flex-1 w-full bg-grad-sidebar modal-content"
class="flex-1 w-full bg-grad-sidebar dark:bg-gray-700 modal-content"
:style="{'overflow-y': contentNoOverflow ? 'hidden' : 'scroll'}"
>
<slot name="default"/>
</div>

<div class="modal-footer flex-0 w-full bg-logo border-t border-gray-300 p-2" v-if="hasSlot('footer')">
<div class="modal-footer flex-0 w-full bg-logo border-t border-gray-300 dark:border-gray-500 p-2" v-if="hasSlot('footer')">
<slot name="footer"/>
</div>
</div>
Expand Down
3 changes: 1 addition & 2 deletions resources/js/components/snippet-browser/SnippetBrowserFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="footer px-3">
<div class="footer px-3 bg-white dark:bg-gray-800">
<default-button
@click.stop="$emit('pick')"
type="button"
Expand Down Expand Up @@ -34,7 +34,6 @@ const props = defineProps({
display: flex;
align-items: center;
justify-content: flex-end;
background: white;
height: 50px;
box-shadow: 0 0 6px rgba(46, 49, 56, 0.05);
z-index: 100;
Expand Down
Loading