switch to table
This commit is contained in:
Julian Freeman
@@ -1,6 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from "vue";
|
||||
import SortDropdown from "../SortDropdown.vue";
|
||||
import type {
|
||||
AssociatedProfileSortKey,
|
||||
AssociatedProfileSummary,
|
||||
@@ -24,12 +23,9 @@ const emit = defineEmits<{
|
||||
}>();
|
||||
|
||||
const sortKey = ref<AssociatedProfileSortKey>("id");
|
||||
|
||||
const sortedProfiles = computed(() => sortAssociatedProfiles(props.profiles, sortKey.value));
|
||||
|
||||
function hasBookmarkPath(
|
||||
profile: ModalProfile,
|
||||
): profile is BookmarkAssociatedProfileSummary {
|
||||
function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedProfileSummary {
|
||||
return "bookmarkPath" in profile;
|
||||
}
|
||||
</script>
|
||||
@@ -44,33 +40,40 @@ function hasBookmarkPath(
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-toolbar">
|
||||
<SortDropdown
|
||||
v-model="sortKey"
|
||||
label="Sort by"
|
||||
:options="[
|
||||
{ label: 'Profile ID', value: 'id' },
|
||||
{ label: 'Name', value: 'name' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="modal-table">
|
||||
<div class="modal-table-header modal-grid" :class="{ bookmark: isBookmark }">
|
||||
<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 === 'id' }" type="button" @click="sortKey = 'id'">Profile ID</button>
|
||||
<div v-if="isBookmark" class="header-cell">Bookmark Path</div>
|
||||
<div class="header-cell actions-cell">Action</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-list">
|
||||
<article v-for="profile in sortedProfiles" :key="profile.id" class="modal-profile-card">
|
||||
<div class="modal-profile-avatar">
|
||||
<img
|
||||
v-if="profile.avatarDataUrl"
|
||||
:src="profile.avatarDataUrl"
|
||||
:alt="`${profile.name} avatar`"
|
||||
/>
|
||||
<span v-else>{{ profile.avatarLabel }}</span>
|
||||
</div>
|
||||
<div class="modal-profile-body">
|
||||
<div class="modal-profile-topline">
|
||||
<div class="modal-profile-heading">
|
||||
<h4>{{ profile.name }}</h4>
|
||||
<span class="badge neutral">{{ profile.id }}</span>
|
||||
</div>
|
||||
<div class="modal-list">
|
||||
<article
|
||||
v-for="profile in sortedProfiles"
|
||||
:key="profile.id"
|
||||
class="modal-table-row modal-grid"
|
||||
:class="{ bookmark: isBookmark }"
|
||||
>
|
||||
<div class="modal-profile-avatar">
|
||||
<img v-if="profile.avatarDataUrl" :src="profile.avatarDataUrl" :alt="`${profile.name} avatar`" />
|
||||
<span v-else>{{ profile.avatarLabel }}</span>
|
||||
</div>
|
||||
<div class="row-cell primary-cell">
|
||||
<strong>{{ profile.name }}</strong>
|
||||
</div>
|
||||
<div class="row-cell">
|
||||
<span class="badge neutral">{{ profile.id }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="isBookmark && hasBookmarkPath(profile)"
|
||||
class="row-cell muted-cell"
|
||||
:title="profile.bookmarkPath"
|
||||
>
|
||||
{{ profile.bookmarkPath }}
|
||||
</div>
|
||||
<div class="row-cell actions-cell">
|
||||
<button
|
||||
class="card-action-button"
|
||||
type="button"
|
||||
@@ -80,11 +83,8 @@ function hasBookmarkPath(
|
||||
{{ isOpeningProfile(browserId, profile.id) ? "Opening..." : "Open" }}
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="isBookmark && hasBookmarkPath(profile)" class="modal-bookmark-path">
|
||||
{{ profile.bookmarkPath }}
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -104,7 +104,7 @@ function hasBookmarkPath(
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
width: min(720px, 100%);
|
||||
width: min(760px, 100%);
|
||||
max-height: min(78vh, 820px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -123,46 +123,87 @@ function hasBookmarkPath(
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.modal-header h3,
|
||||
.modal-profile-heading h4 {
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.modal-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 18px;
|
||||
background: var(--panel-strong);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 56px minmax(180px, 1fr) 132px 110px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-grid.bookmark {
|
||||
grid-template-columns: 56px minmax(140px, 0.9fr) 120px minmax(180px, 1fr) 110px;
|
||||
}
|
||||
|
||||
.modal-table-header {
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
|
||||
background: rgba(248, 250, 252, 0.82);
|
||||
}
|
||||
|
||||
.header-cell {
|
||||
color: var(--muted);
|
||||
font-size: 0.77rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.header-cell.sortable {
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-cell.sortable.active {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.modal-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.modal-toolbar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.modal-table-row {
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
|
||||
}
|
||||
|
||||
.modal-profile-card {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 16px;
|
||||
background: var(--panel-strong);
|
||||
.modal-table-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.modal-table-row:hover {
|
||||
background: rgba(248, 250, 252, 0.65);
|
||||
}
|
||||
|
||||
.modal-profile-avatar {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex-shrink: 0;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 14px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #dbeafe, #eff6ff);
|
||||
color: #1d4ed8;
|
||||
font-size: 1rem;
|
||||
font-size: 0.96rem;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -173,29 +214,31 @@ function hasBookmarkPath(
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.modal-profile-body {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.modal-profile-topline {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.modal-profile-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
.row-cell {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.modal-bookmark-path {
|
||||
margin: 8px 0 0;
|
||||
.primary-cell strong {
|
||||
display: block;
|
||||
font-size: 0.93rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.muted-cell {
|
||||
color: var(--muted);
|
||||
font-size: 0.86rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.actions-cell {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.icon-cell {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@@ -203,10 +246,14 @@ function hasBookmarkPath(
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.modal-profile-card,
|
||||
.modal-profile-topline,
|
||||
.modal-profile-heading {
|
||||
flex-direction: column;
|
||||
.modal-grid,
|
||||
.modal-grid.bookmark {
|
||||
grid-template-columns: 56px minmax(0, 1fr) 96px;
|
||||
}
|
||||
|
||||
.modal-grid > :nth-child(4),
|
||||
.modal-grid.bookmark > :nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user