julian/chrom-tool
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix table ui

Browse Source
This commit is contained in:
Julian Freeman
2026-04-16 19:38:46 -04:00
parent c8e1641896
commit 16eb25d552
6 changed files with 79 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/browser-data/AssociatedProfilesModal.vue
View File

@@ -42,7 +42,7 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
</button> </button>
</div> </div>
<div class="modal-table"> <div class="modal-table styled-scrollbar">
<div class="modal-table-header modal-grid" :class="{ bookmark: isBookmark }"> <div class="modal-table-header modal-grid" :class="{ bookmark: isBookmark }">
<div class="header-cell icon-cell">Avatar</div> <div class="header-cell icon-cell">Avatar</div>
<button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="sortKey = 'name'">Name</button> <button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="sortKey = 'name'">Name</button>
@@ -51,7 +51,6 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
<div class="header-cell actions-cell">Action</div> <div class="header-cell actions-cell">Action</div>
</div> </div>
<div class="modal-list">
<article <article
v-for="profile in sortedProfiles" v-for="profile in sortedProfiles"
:key="profile.id" :key="profile.id"
@@ -91,7 +90,6 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
</div> </div>
</article> </article>
</div> </div>
</div>
</section> </section>
</div> </div>
</template> </template>
@@ -139,10 +137,10 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0; min-height: 0;
overflow: auto;
border: 1px solid rgba(148, 163, 184, 0.18); border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 18px; border-radius: 18px;
background: var(--panel-strong); background: var(--panel-strong);
overflow: hidden;
} }
.modal-grid { .modal-grid {
@@ -157,9 +155,14 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
} }
.modal-table-header { .modal-table-header {
position: sticky;
top: 0;
z-index: 2;
padding: 10px 14px; padding: 10px 14px;
border-bottom: 1px solid rgba(148, 163, 184, 0.14); border-bottom: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(248, 250, 252, 0.82); background: rgba(248, 250, 252, 0.94);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
} }
.header-cell { .header-cell {
@@ -180,13 +183,6 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
color: var(--text); color: var(--text);
} }
.modal-list {
display: flex;
flex-direction: column;
min-height: 0;
overflow: auto;
}
.modal-table-row { .modal-table-row {
padding: 12px 14px; padding: 12px 14px;
border-bottom: 1px solid rgba(148, 163, 184, 0.12); border-bottom: 1px solid rgba(148, 163, 184, 0.12);

9
src/components/browser-data/BookmarksList.vue
View File

@@ -14,7 +14,7 @@ const emit = defineEmits<{
<template> <template>
<section class="table-section"> <section class="table-section">
<div v-if="bookmarks.length" class="data-table"> <div v-if="bookmarks.length" class="data-table styled-scrollbar">
<div class="data-table-header bookmarks-grid"> <div class="data-table-header bookmarks-grid">
<button class="header-cell sortable" :class="{ active: sortKey === 'title' }" type="button" @click="emit('update:sortKey', 'title')">Name</button> <button class="header-cell sortable" :class="{ active: sortKey === 'title' }" type="button" @click="emit('update:sortKey', 'title')">Name</button>
<button class="header-cell sortable" :class="{ active: sortKey === 'url' }" type="button" @click="emit('update:sortKey', 'url')">URL</button> <button class="header-cell sortable" :class="{ active: sortKey === 'url' }" type="button" @click="emit('update:sortKey', 'url')">URL</button>
@@ -43,17 +43,20 @@ const emit = defineEmits<{
<style scoped> <style scoped>
.table-section { .table-section {
padding: 0; padding: 0;
height: 100%;
min-height: 0;
} }
.data-table { .data-table {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100%; height: 100%;
min-height: 0;
border: 1px solid rgba(148, 163, 184, 0.18); border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 22px; border-radius: 22px;
background: var(--panel); background: var(--panel);
box-shadow: var(--shadow); box-shadow: var(--shadow);
overflow: clip; overflow: auto;
} }
.bookmarks-grid { .bookmarks-grid {

9
src/components/browser-data/BrowserDataView.vue
View File

@@ -163,4 +163,13 @@ const emit = defineEmits<{
background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 240, 255, 0.92)); background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 240, 255, 0.92));
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
} }
.content-scroll-area {
display: flex;
}
.content-scroll-area > * {
flex: 1;
min-height: 0;
}
</style> </style>

9
src/components/browser-data/ExtensionsList.vue
View File

@@ -15,7 +15,7 @@ const emit = defineEmits<{
<template> <template>
<section class="table-section"> <section class="table-section">
<div v-if="extensions.length" class="data-table"> <div v-if="extensions.length" class="data-table styled-scrollbar">
<div class="data-table-header extensions-grid"> <div class="data-table-header extensions-grid">
<div class="header-cell icon-cell">Icon</div> <div class="header-cell icon-cell">Icon</div>
<button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button> <button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button>
@@ -54,17 +54,20 @@ const emit = defineEmits<{
<style scoped> <style scoped>
.table-section { .table-section {
padding: 0; padding: 0;
height: 100%;
min-height: 0;
} }
.data-table { .data-table {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100%; height: 100%;
min-height: 0;
border: 1px solid rgba(148, 163, 184, 0.18); border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 22px; border-radius: 22px;
background: var(--panel); background: var(--panel);
box-shadow: var(--shadow); box-shadow: var(--shadow);
overflow: clip; overflow: auto;
} }
.extensions-grid { .extensions-grid {

9
src/components/browser-data/ProfilesList.vue
View File

@@ -23,7 +23,7 @@ const emit = defineEmits<{
{{ openProfileError }} {{ openProfileError }}
</div> </div>
<div v-if="profiles.length" class="data-table"> <div v-if="profiles.length" class="data-table styled-scrollbar">
<div class="data-table-header profiles-grid"> <div class="data-table-header profiles-grid">
<div class="header-cell icon-cell">Avatar</div> <div class="header-cell icon-cell">Avatar</div>
<button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button> <button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button>
@@ -71,17 +71,20 @@ const emit = defineEmits<{
<style scoped> <style scoped>
.table-section { .table-section {
padding: 0; padding: 0;
height: 100%;
min-height: 0;
} }
.data-table { .data-table {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100%; height: 100%;
min-height: 0;
border: 1px solid rgba(148, 163, 184, 0.18); border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 22px; border-radius: 22px;
background: var(--panel); background: var(--panel);
box-shadow: var(--shadow); box-shadow: var(--shadow);
overflow: clip; overflow: auto;
} }
.profiles-grid { .profiles-grid {

15
src/styles/app.css
View File

@@ -86,8 +86,8 @@
.content-scroll-area { .content-scroll-area {
min-height: 0; min-height: 0;
overflow: auto; overflow: hidden;
padding-right: 2px; padding-right: 0;
} }
.count-pill, .count-pill,
@@ -175,23 +175,24 @@
} }
.browser-nav, .browser-nav,
.content-scroll-area { .styled-scrollbar {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: rgba(100, 116, 139, 0.42) transparent; scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
} }
.content-scroll-area::-webkit-scrollbar { .styled-scrollbar::-webkit-scrollbar {
width: 10px; width: 10px;
height: 10px;
} }
.content-scroll-area::-webkit-scrollbar-track { .styled-scrollbar::-webkit-scrollbar-track {
background: transparent; background: transparent;
} }
.content-scroll-area::-webkit-scrollbar-thumb { .styled-scrollbar::-webkit-scrollbar-thumb {
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 999px; border-radius: 999px;
background: linear-gradient(180deg, rgba(148, 163, 184, 0.72), rgba(100, 116, 139, 0.58)); background: linear-gradient(180deg, rgba(148, 163, 184, 0.72), rgba(100, 116, 139, 0.58));
background-clip: padding-box; background-clip: padding-box;
} }
.content-scroll-area::-webkit-scrollbar-thumb:hover { .styled-scrollbar::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(100, 116, 139, 0.82), rgba(71, 85, 105, 0.72)); background: linear-gradient(180deg, rgba(100, 116, 139, 0.82), rgba(71, 85, 105, 0.72));
background-clip: padding-box; background-clip: padding-box;
} }