mirror of
https://github.com/vitodeploy/vito.git
synced 2025-07-07 08:52:35 +00:00
Redesign (#124)
- redesign the dashboard - add search bar - Mobile-friendly design
This commit is contained in:
Saeed Vaziry
GitHub
@ -1,124 +1,35 @@
|
||||
<div x-data="projectCombobox()">
|
||||
<div class="relative">
|
||||
<div
|
||||
@click="open = !open"
|
||||
class="text-md z-0 flex h-10 w-full cursor-pointer items-center rounded-md bg-gray-900 px-4 py-3 pr-10 leading-5 text-gray-100 focus:ring-1 focus:ring-gray-700"
|
||||
x-text="selected.name ?? 'Select Project'"
|
||||
></div>
|
||||
<button type="button" @click="open = !open" class="absolute inset-y-0 right-0 z-0 flex items-center pr-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
class="h-5 w-5 text-gray-400"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
x-show="open"
|
||||
@click.away="open = false"
|
||||
class="absolute z-10 mt-1 w-full overflow-auto rounded-md bg-white pb-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-700 sm:text-sm"
|
||||
>
|
||||
<div class="relative p-2">
|
||||
<input
|
||||
x-model="query"
|
||||
@input="filterProjectsAndOpen"
|
||||
placeholder="Filter"
|
||||
class="dark:focus:ring-800 w-full rounded-md bg-gray-200 py-2 pl-3 pr-10 text-sm leading-5 focus:ring-1 focus:ring-gray-400 dark:bg-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative max-h-[350px] overflow-y-auto">
|
||||
<template x-for="(project, index) in filteredProjects" :key="index">
|
||||
<div
|
||||
@click="selectProject(project); open = false"
|
||||
:class="project.id === selected.id ? 'cursor-default bg-primary-600 text-white' : 'cursor-pointer'"
|
||||
class="relative select-none px-4 py-2 text-gray-700 hover:bg-primary-600 hover:text-white dark:text-white"
|
||||
>
|
||||
<span class="block truncate" x-text="project.name"></span>
|
||||
<template x-if="project.id === selected.id">
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-3 text-white">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
class="h-5 w-5"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
x-show="filteredProjects.length === 0"
|
||||
class="relative block cursor-default select-none truncate px-4 py-2 text-gray-700 dark:text-white"
|
||||
>
|
||||
No projects found!
|
||||
</div>
|
||||
<div class="py-1">
|
||||
<hr class="border-gray-300 dark:border-gray-600" />
|
||||
</div>
|
||||
<div data-tooltip="Project" class="cursor-pointer">
|
||||
<x-dropdown align="left">
|
||||
<x-slot:trigger>
|
||||
<div>
|
||||
<a
|
||||
href="{{ route("projects") }}"
|
||||
class="relative block cursor-pointer select-none px-4 py-2 text-gray-700 hover:bg-primary-600 hover:text-white dark:text-white"
|
||||
<div
|
||||
class="block w-full rounded-md border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
>
|
||||
<span class="block truncate">Projects List</span>
|
||||
</a>
|
||||
{{ auth()->user()->currentProject?->name ?? __("Select Project") }}
|
||||
</div>
|
||||
<button type="button" class="absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<x-heroicon name="o-chevron-down" class="h-4 w-4 text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="{{ route("projects", ["create" => true]) }}"
|
||||
class="relative block cursor-pointer select-none px-4 py-2 text-gray-700 hover:bg-primary-600 hover:text-white dark:text-white"
|
||||
>
|
||||
<span class="block truncate">Create a Project</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-slot>
|
||||
<x-slot:content>
|
||||
@foreach (auth()->user()->projects as $project)
|
||||
<x-dropdown-link class="relative" :href="route('projects.switch', ['project' => $project])">
|
||||
<span class="block truncate">{{ ucfirst($project->name) }}</span>
|
||||
@if ($project->id == auth()->user()->current_project_id)
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-3 text-primary-600">
|
||||
<x-heroicon name="o-check" class="h-5 w-5" />
|
||||
</span>
|
||||
@endif
|
||||
</x-dropdown-link>
|
||||
@endforeach
|
||||
|
||||
<script>
|
||||
function projectCombobox() {
|
||||
const projects = @json(auth()->user()->projects()->select('id', 'name')->get());
|
||||
return {
|
||||
open: false,
|
||||
query: '',
|
||||
projects: projects,
|
||||
selected: @if(isset($project)) @json($project->only('id', 'name')) @else {} @endif,
|
||||
filteredProjects: projects,
|
||||
selectProject(project) {
|
||||
if (this.selected.id !== project.id) {
|
||||
this.selected = project;
|
||||
window.location.href = '{{ url('/settings/projects/switch') }}/' + project.id
|
||||
}
|
||||
},
|
||||
filterProjectsAndOpen() {
|
||||
if (this.query === '') {
|
||||
this.filteredProjects = this.projects;
|
||||
this.open = false;
|
||||
} else {
|
||||
this.filteredProjects = this.projects.filter((project) =>
|
||||
project.name
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, '')
|
||||
.includes(this.query.toLowerCase().replace(/\s+/g, ''))
|
||||
);
|
||||
this.open = true;
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<x-dropdown-link href="{{ route('projects') }}">
|
||||
{{ __("Projects List") }}
|
||||
</x-dropdown-link>
|
||||
<x-dropdown-link href="{{ route('projects', ['create' => 'open']) }}">
|
||||
{{ __("Create a Project") }}
|
||||
</x-dropdown-link>
|
||||
</x-slot>
|
||||
</x-dropdown>
|
||||
</div>
|
||||
|
||||
193
resources/views/layouts/partials/search.blade.php
Normal file
193
resources/views/layouts/partials/search.blade.php
Normal file
@ -0,0 +1,193 @@
|
||||
<div
|
||||
x-data="{
|
||||
open: false,
|
||||
isTyping: false,
|
||||
focused: false,
|
||||
searchQuery: '',
|
||||
isLoading: false,
|
||||
searchResult: [],
|
||||
noResults: false,
|
||||
showResults: false,
|
||||
keyUp: false,
|
||||
focusedItem: null,
|
||||
init() {
|
||||
document.onkeydown = (e) => {
|
||||
if (e.key === '/') {
|
||||
if (
|
||||
! document.activeElement.type ||
|
||||
document.activeElement.type === 'undefined'
|
||||
) {
|
||||
this.openSearch()
|
||||
}
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
this.close()
|
||||
} else {
|
||||
this.changeFocus(e.code)
|
||||
}
|
||||
}
|
||||
$watch(
|
||||
'searchQuery',
|
||||
this.debounce(() => {
|
||||
this.isTyping = false
|
||||
}, 700),
|
||||
)
|
||||
$watch('isTyping', (value) => {
|
||||
if (! value && this.keyUp && this.searchQuery.length > 0) {
|
||||
this.search(this.searchQuery)
|
||||
}
|
||||
if (! value && this.searchQuery.length === 0) {
|
||||
this.showResults = false
|
||||
this.searchResult = []
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.open = false
|
||||
this.isLoading = false
|
||||
this.focused = false
|
||||
this.focusedItem = null
|
||||
document.body.classList.remove('overflow-y-hidden')
|
||||
},
|
||||
openSearch() {
|
||||
this.open = true
|
||||
document.body.classList.add('overflow-y-hidden')
|
||||
setTimeout(() => {
|
||||
this.$refs.input.select()
|
||||
}, 50)
|
||||
},
|
||||
search(searchQuery) {
|
||||
this.showResults = true
|
||||
this.noResults = false
|
||||
this.isLoading = true
|
||||
fetch('/search?q=' + searchQuery)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
this.searchResult = data.results
|
||||
if (this.searchResult.length === 0) {
|
||||
this.noResults = true
|
||||
}
|
||||
this.keyUp = false
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error)
|
||||
})
|
||||
.then(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
keyEntered(e) {
|
||||
this.keyUp = true
|
||||
if (e.code === 'Escape') {
|
||||
this.close()
|
||||
}
|
||||
this.changeFocus(e.code)
|
||||
},
|
||||
changeFocus(type) {
|
||||
if (type === 'Backspace' && this.open && ! this.focused) {
|
||||
setTimeout(() => {
|
||||
this.$refs.input.select()
|
||||
}, 100)
|
||||
}
|
||||
if (type === 'ArrowDown') {
|
||||
if (this.searchResult.length > 0) {
|
||||
if (this.focusedItem !== null) {
|
||||
if (this.focusedItem < this.searchResult.length - 1) {
|
||||
this.focusedItem++
|
||||
}
|
||||
} else {
|
||||
this.focusedItem = 0
|
||||
}
|
||||
document.getElementById(`result-${this.focusedItem}`).focus()
|
||||
}
|
||||
}
|
||||
if (type === 'ArrowUp') {
|
||||
if (this.searchResult.length > 0) {
|
||||
if (this.focusedItem !== null) {
|
||||
if (this.focusedItem > 0) {
|
||||
this.focusedItem--
|
||||
}
|
||||
document
|
||||
.getElementById(`result-${this.focusedItem}`)
|
||||
.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
debounce(func, wait, immediate) {
|
||||
let timeout
|
||||
return function () {
|
||||
const context = this,
|
||||
args = arguments
|
||||
const later = function () {
|
||||
timeout = null
|
||||
if (! immediate) func.apply(context, args)
|
||||
}
|
||||
const callNow = immediate && ! timeout
|
||||
clearTimeout(timeout)
|
||||
timeout = setTimeout(later, wait)
|
||||
if (callNow) func.apply(context, args)
|
||||
}
|
||||
},
|
||||
}"
|
||||
@open-search.window="openSearch"
|
||||
>
|
||||
<div x-show="open" class="absolute bottom-0 left-0 right-0 top-0 flex max-w-full items-start justify-center">
|
||||
<div
|
||||
x-on:click="close"
|
||||
class="fixed inset-0 bottom-0 left-0 right-0 top-0 z-[1000] items-center bg-gray-500 opacity-75 dark:bg-gray-900"
|
||||
></div>
|
||||
<div class="absolute z-[1000] mt-20 lg:scale-110">
|
||||
<div class="w-[500px]">
|
||||
<x-text-input
|
||||
id="search-input"
|
||||
x-ref="input"
|
||||
@focus="focused = true"
|
||||
@blur="focused = false"
|
||||
type="text"
|
||||
class="w-full"
|
||||
@input="isTyping = true"
|
||||
x-model="searchQuery"
|
||||
placeholder="Search something..."
|
||||
@keyup="keyEntered"
|
||||
autocomplete="off"
|
||||
></x-text-input>
|
||||
<div
|
||||
x-show="showResults"
|
||||
class="list-none divide-y divide-gray-100 rounded-md bg-white py-1 text-base shadow ring-1 ring-black ring-opacity-5 dark:divide-gray-700/50 dark:bg-gray-800"
|
||||
>
|
||||
<div x-show="isLoading" class="w-full px-3 py-2 text-sm text-gray-800 dark:text-gray-300">
|
||||
Please wait
|
||||
</div>
|
||||
<div
|
||||
x-show="!isLoading && noResults"
|
||||
class="w-full px-3 py-2 text-sm text-gray-800 dark:text-gray-300"
|
||||
>
|
||||
No results
|
||||
</div>
|
||||
<template x-for="(item, index) in searchResult">
|
||||
<button
|
||||
x-bind:id="`result-${index}`"
|
||||
class="flex w-full items-center justify-between p-3 text-left text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:bg-gray-100 focus:outline-none dark:text-gray-300 dark:hover:bg-gray-700/50 dark:focus:bg-gray-700"
|
||||
x-on:click="window.location.href = item.url"
|
||||
>
|
||||
<div class="font-semibold text-primary-500" x-text="item.text"></div>
|
||||
<div class="flex items-center">
|
||||
<span
|
||||
class="mr-1 rounded-xl bg-gray-100 px-2 text-gray-500 dark:bg-gray-700 dark:text-gray-400"
|
||||
x-text="item.project"
|
||||
data-tooltip="Project"
|
||||
></span>
|
||||
<span
|
||||
class="rounded-xl bg-primary-100 px-2 text-primary-500 dark:bg-primary-500 dark:bg-opacity-10"
|
||||
x-text="item.type"
|
||||
data-tooltip="Type"
|
||||
></span>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,124 +1,35 @@
|
||||
<div x-data="serverCombobox()">
|
||||
<div class="relative">
|
||||
<div
|
||||
@click="open = !open"
|
||||
class="text-md z-0 flex h-10 w-full cursor-pointer items-center rounded-md bg-gray-900 px-4 py-3 pr-10 leading-5 text-gray-100 focus:ring-1 focus:ring-gray-700"
|
||||
x-text="selected.name ?? 'Select Server'"
|
||||
></div>
|
||||
<button type="button" @click="open = !open" class="absolute inset-y-0 right-0 z-0 flex items-center pr-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
class="h-5 w-5 text-gray-400"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
x-show="open"
|
||||
@click.away="open = false"
|
||||
class="absolute z-10 mt-1 w-full overflow-auto rounded-md bg-white pb-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-700 sm:text-sm"
|
||||
>
|
||||
<div class="relative p-2">
|
||||
<input
|
||||
x-model="query"
|
||||
@input="filterServersAndOpen"
|
||||
placeholder="Filter"
|
||||
class="dark:focus:ring-800 w-full rounded-md bg-gray-200 py-2 pl-3 pr-10 text-sm leading-5 focus:ring-1 focus:ring-gray-400 dark:bg-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative max-h-[350px] overflow-y-auto">
|
||||
<template x-for="(server, index) in filteredServers" :key="index">
|
||||
<div
|
||||
@click="selectServer(server); open = false"
|
||||
:class="server.id === selected.id ? 'cursor-default bg-primary-600 text-white' : 'cursor-pointer'"
|
||||
class="relative select-none px-4 py-2 text-gray-700 hover:bg-primary-600 hover:text-white dark:text-white"
|
||||
>
|
||||
<span class="block truncate" x-text="server.name"></span>
|
||||
<template x-if="server.id === selected.id">
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-3 text-white">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
class="h-5 w-5"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
x-show="filteredServers.length === 0"
|
||||
class="relative block cursor-default select-none truncate px-4 py-2 text-gray-700 dark:text-white"
|
||||
>
|
||||
No servers found!
|
||||
</div>
|
||||
<div class="py-1">
|
||||
<hr class="border-gray-300 dark:border-gray-600" />
|
||||
</div>
|
||||
<div data-tooltip="Servers" class="cursor-pointer">
|
||||
<x-dropdown width="full">
|
||||
<x-slot:trigger>
|
||||
<div>
|
||||
<a
|
||||
href="{{ route("servers") }}"
|
||||
class="@if(request()->routeIs('servers')) cursor-default bg-primary-600 text-white @else cursor-pointer @endif relative block select-none px-4 py-2 text-gray-700 hover:bg-primary-600 hover:text-white dark:text-white"
|
||||
<div
|
||||
class="block w-full rounded-md border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
>
|
||||
<span class="block truncate">Servers List</span>
|
||||
</a>
|
||||
{{ isset($server) ? $server->name : "Select Server" }}
|
||||
</div>
|
||||
<button type="button" class="absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<x-heroicon name="o-chevron-down" class="h-4 w-4 text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="{{ route("servers.create") }}"
|
||||
class="@if(request()->routeIs('servers.create')) cursor-default bg-primary-600 text-white @else cursor-pointer @endif relative block select-none px-4 py-2 text-gray-700 hover:bg-primary-600 hover:text-white dark:text-white"
|
||||
>
|
||||
<span class="block truncate">Create a Server</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-slot>
|
||||
<x-slot:content>
|
||||
@foreach (auth()->user()->currentProject->servers as $s)
|
||||
<x-dropdown-link class="relative" :href="route('servers.show', ['server' => $s])">
|
||||
<span class="block truncate">{{ ucfirst($s->name) }}</span>
|
||||
@if (isset($server) && $server->id == $s->id)
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-3 text-primary-600">
|
||||
<x-heroicon name="o-check" class="h-5 w-5" />
|
||||
</span>
|
||||
@endif
|
||||
</x-dropdown-link>
|
||||
@endforeach
|
||||
|
||||
<script>
|
||||
function serverCombobox() {
|
||||
const servers = @json(auth()->user()->currentProject->servers()->select('id', 'name')->get());
|
||||
return {
|
||||
open: false,
|
||||
query: '',
|
||||
servers: servers,
|
||||
selected: @if(isset($server)) @json($server->only('id', 'name')) @else {} @endif,
|
||||
filteredServers: servers,
|
||||
selectServer(server) {
|
||||
if (this.selected.id !== server.id) {
|
||||
this.selected = server;
|
||||
window.location.href = '{{ url('/servers/') }}/' + server.id
|
||||
}
|
||||
},
|
||||
filterServersAndOpen() {
|
||||
if (this.query === '') {
|
||||
this.filteredServers = this.servers;
|
||||
this.open = false;
|
||||
} else {
|
||||
this.filteredServers = this.servers.filter((server) =>
|
||||
server.name
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, '')
|
||||
.includes(this.query.toLowerCase().replace(/\s+/g, ''))
|
||||
);
|
||||
this.open = true;
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<x-dropdown-link href="{{ route('servers') }}">
|
||||
{{ __("Servers List") }}
|
||||
</x-dropdown-link>
|
||||
<x-dropdown-link href="{{ route('servers.create') }}">
|
||||
{{ __("Create a Server") }}
|
||||
</x-dropdown-link>
|
||||
</x-slot>
|
||||
</x-dropdown>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user