fix ui
This commit is contained in:
Julian Freeman
48
src/App.vue
48
src/App.vue
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import SortDropdown from "./components/SortDropdown.vue";
|
||||
import { useBrowserAssistant } from "./features/browser-assistant/useBrowserAssistant";
|
||||
|
||||
const {
|
||||
@@ -109,14 +110,15 @@ const {
|
||||
<div class="content-scroll-area">
|
||||
<section v-if="activeSection === 'profiles'" class="content-section">
|
||||
<div class="sort-bar">
|
||||
<label class="sort-control">
|
||||
<span>Sort by</span>
|
||||
<select v-model="profileSortKey">
|
||||
<option value="name">Name</option>
|
||||
<option value="email">Email</option>
|
||||
<option value="id">Profile ID</option>
|
||||
</select>
|
||||
</label>
|
||||
<SortDropdown
|
||||
v-model="profileSortKey"
|
||||
label="Sort by"
|
||||
:options="[
|
||||
{ label: 'Name', value: 'name' },
|
||||
{ label: 'Email', value: 'email' },
|
||||
{ label: 'Profile ID', value: 'id' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="sortedProfiles.length" class="stack-list">
|
||||
@@ -149,13 +151,14 @@ const {
|
||||
|
||||
<section v-else-if="activeSection === 'extensions'" class="content-section">
|
||||
<div class="sort-bar">
|
||||
<label class="sort-control">
|
||||
<span>Sort by</span>
|
||||
<select v-model="extensionSortKey">
|
||||
<option value="name">Name</option>
|
||||
<option value="id">Extension ID</option>
|
||||
</select>
|
||||
</label>
|
||||
<SortDropdown
|
||||
v-model="extensionSortKey"
|
||||
label="Sort by"
|
||||
:options="[
|
||||
{ label: 'Name', value: 'name' },
|
||||
{ label: 'Extension ID', value: 'id' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="sortedExtensions.length" class="stack-list">
|
||||
@@ -212,13 +215,14 @@ const {
|
||||
|
||||
<section v-else class="content-section">
|
||||
<div class="sort-bar">
|
||||
<label class="sort-control">
|
||||
<span>Sort by</span>
|
||||
<select v-model="bookmarkSortKey">
|
||||
<option value="title">Name</option>
|
||||
<option value="url">URL</option>
|
||||
</select>
|
||||
</label>
|
||||
<SortDropdown
|
||||
v-model="bookmarkSortKey"
|
||||
label="Sort by"
|
||||
:options="[
|
||||
{ label: 'Name', value: 'title' },
|
||||
{ label: 'URL', value: 'url' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="sortedBookmarks.length" class="bookmark-list">
|
||||
|
||||
82
src/components/SortDropdown.vue
Normal file
82
src/components/SortDropdown.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, ref } from "vue";
|
||||
|
||||
type Option = {
|
||||
label: string;
|
||||
value: string;
|
||||
};
|
||||
|
||||
const props = defineProps<{
|
||||
label?: string;
|
||||
modelValue: string;
|
||||
options: Option[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
"update:modelValue": [value: string];
|
||||
}>();
|
||||
|
||||
const open = ref(false);
|
||||
const root = ref<HTMLElement | null>(null);
|
||||
|
||||
const selectedLabel = computed(
|
||||
() =>
|
||||
props.options.find((option) => option.value === props.modelValue)?.label ??
|
||||
props.options[0]?.label ??
|
||||
"",
|
||||
);
|
||||
|
||||
function toggle() {
|
||||
open.value = !open.value;
|
||||
}
|
||||
|
||||
function select(value: string) {
|
||||
emit("update:modelValue", value);
|
||||
open.value = false;
|
||||
}
|
||||
|
||||
function handleDocumentPointer(event: PointerEvent) {
|
||||
if (!root.value) return;
|
||||
const target = event.target;
|
||||
if (target instanceof Node && !root.value.contains(target)) {
|
||||
open.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
window.addEventListener("pointerdown", handleDocumentPointer);
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (typeof window !== "undefined") {
|
||||
window.removeEventListener("pointerdown", handleDocumentPointer);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="root" class="sort-dropdown">
|
||||
<span v-if="label" class="sort-dropdown-label">{{ label }}</span>
|
||||
<button
|
||||
class="sort-dropdown-trigger"
|
||||
:class="{ open }"
|
||||
type="button"
|
||||
@click="toggle"
|
||||
>
|
||||
<span>{{ selectedLabel }}</span>
|
||||
<span class="sort-dropdown-caret" aria-hidden="true"></span>
|
||||
</button>
|
||||
<div v-if="open" class="sort-dropdown-menu">
|
||||
<button
|
||||
v-for="option in options"
|
||||
:key="option.value"
|
||||
class="sort-dropdown-option"
|
||||
:class="{ active: option.value === modelValue }"
|
||||
type="button"
|
||||
@click="select(option.value)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
127
src/styles.css
127
src/styles.css
@@ -295,22 +295,100 @@ button {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.sort-control {
|
||||
.sort-dropdown {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sort-dropdown-label {
|
||||
color: var(--muted);
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
.sort-control select {
|
||||
min-width: 132px;
|
||||
padding: 7px 28px 7px 10px;
|
||||
.sort-dropdown-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
min-width: 152px;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.26);
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92));
|
||||
color: var(--text);
|
||||
outline: none;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 160ms ease,
|
||||
box-shadow 160ms ease,
|
||||
background 160ms ease;
|
||||
}
|
||||
|
||||
.sort-dropdown-trigger:hover {
|
||||
border-color: rgba(100, 116, 139, 0.36);
|
||||
}
|
||||
|
||||
.sort-dropdown-trigger.open {
|
||||
border-color: rgba(47, 111, 237, 0.42);
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(47, 111, 237, 0.12),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.sort-dropdown-caret {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
flex-shrink: 0;
|
||||
border-right: 1.8px solid #64748b;
|
||||
border-bottom: 1.8px solid #64748b;
|
||||
transform: rotate(45deg) translateY(-1px);
|
||||
transition: transform 160ms ease;
|
||||
}
|
||||
|
||||
.sort-dropdown-trigger.open .sort-dropdown-caret {
|
||||
transform: rotate(-135deg) translate(-2px, -2px);
|
||||
}
|
||||
|
||||
.sort-dropdown-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
z-index: 30;
|
||||
min-width: 100%;
|
||||
padding: 6px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.22);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(15, 23, 42, 0.14),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.75);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.sort-dropdown-option {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
text-align: left;
|
||||
color: var(--text);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 140ms ease,
|
||||
color 140ms ease;
|
||||
}
|
||||
|
||||
.sort-dropdown-option:hover {
|
||||
background: rgba(241, 245, 249, 0.92);
|
||||
}
|
||||
|
||||
.sort-dropdown-option.active {
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #213f75, #325ca8);
|
||||
}
|
||||
|
||||
.section-tabs {
|
||||
@@ -516,6 +594,36 @@ button {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.browser-nav,
|
||||
.content-scroll-area {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
|
||||
}
|
||||
|
||||
.browser-nav::-webkit-scrollbar,
|
||||
.content-scroll-area::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.browser-nav::-webkit-scrollbar-track,
|
||||
.content-scroll-area::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.browser-nav::-webkit-scrollbar-thumb,
|
||||
.content-scroll-area::-webkit-scrollbar-thumb {
|
||||
border: 3px solid transparent;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, rgba(148, 163, 184, 0.72), rgba(100, 116, 139, 0.58));
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.browser-nav::-webkit-scrollbar-thumb:hover,
|
||||
.content-scroll-area::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(180deg, rgba(100, 116, 139, 0.82), rgba(71, 85, 105, 0.72));
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.state-panel.error {
|
||||
background: linear-gradient(180deg, rgba(254, 242, 242, 0.92), rgba(255, 255, 255, 0.86));
|
||||
}
|
||||
@@ -545,14 +653,13 @@ button {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.sort-control {
|
||||
.sort-dropdown {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sort-control select {
|
||||
.sort-dropdown-trigger {
|
||||
min-width: 0;
|
||||
width: 160px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.profile-card,
|
||||
|
||||
Reference in New Issue
Block a user