Skip to content

Commit

Permalink
#96 polish inspector page classnames
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kreezag
Kreezag committed Aug 3, 2024
1 parent a09f349 commit 2d0adc9
Showing 1 changed file with 98 additions and 92 deletions.
190 changes: 98 additions & 92 deletions src/screens/inspector/ui/inspector-page-timeline/inspector-page-timeline.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const segmentColor = (color: string): string => {
};
const transaction: Ref<InspectorTransaction> = computed(
() => props.payload[0] as InspectorTransaction
() => props.payload[0] as InspectorTransaction,
);
const grid = computed(() => {
Expand Down Expand Up @@ -61,22 +61,22 @@ const segments: Ref<InspectorSegment[]> = computed(() =>
(
<T extends keyof InspectorItemType>(type: T) =>
(
action: InspectorItemType[keyof InspectorItemType]
action: InspectorItemType[keyof InspectorItemType],
): action is InspectorItemType[T] =>
action.model === type
)("segment")
)("segment"),
)
.filter(
(segment: InspectorSegment) =>
transaction.value.hash === segment?.transaction?.hash
)
transaction.value.hash === segment?.transaction?.hash,
),
);
const segmentTypes = computed(() =>
[...new Set(segments.value.map((data) => data.type))].map((type) => ({
color: segmentColor(type),
type,
}))
})),
);
const series = computed(() => {
Expand All @@ -85,7 +85,7 @@ const series = computed(() => {
return segments.value.map((segment: InspectorSegment) => {
const widthPercent = Math.max(
Number(((segment.duration * 100) / duration).toFixed(2)),
0.5
0.5,
);
const marginPercent = (((segment.start || 0) * 100) / duration).toFixed();
Expand All @@ -104,65 +104,71 @@ const series = computed(() => {

<template>
<section class="inspector-page-timeline">
<h3 class="inspector-page-timeline__title">Timeline</h3>
<div class="inspector-page-timeline__head">
<h3 class="inspector-page-timeline__head-title">Timeline</h3>

<div
v-if="segmentTypes.length > 0"
class="inspector-page-timeline__segment-types"
>
<div
v-for="type in segmentTypes"
:key="type.type"
class="inspector-page-timeline__segment-type"
v-if="segmentTypes.length > 0"
class="inspector-page-timeline__head-tips"
>
<div
:class="type.color"
class="inspector-page-timeline__segment-type__color-box"
></div>
<span class="inspector-page-timeline__segment-type__label">
{{ type.type }}
</span>
v-for="type in segmentTypes"
:key="type.type"
class="inspector-page-timeline__head-tip"
>
<div
:class="type.color"
class="inspector-page-timeline__head-tip-box"
></div>

<span class="inspector-page-timeline__head-tip-label">
{{ type.type }}
</span>
</div>
</div>
</div>

<div v-if="series.length > 0" class="inspector-page-timeline__segments">
<div class="inspector-page-timeline__segments-cells">
<div v-if="series.length > 0" class="inspector-page-timeline__body">
<div class="inspector-page-timeline__body-cells">
<div
v-for="segment in grid.segments"
:key="segment"
class="inspector-page-timeline__segments-cell"
class="inspector-page-timeline__body-cell"
>
{{ segment }} ms
</div>
</div>

<div
class="inspector-page-timeline__series"
class="inspector-page-timeline__segments"
:style="{ 'background-size': `${grid.widthPercent}% 20%` }"
>
<div
v-for="row in series"
:key="`${row.segment.label} - ${row.segment.duration}`"
class="inspector-page-timeline__series-segment"
class="inspector-page-timeline__segment"
>
<div class="inspector-page-timeline__series-segment-label">
<div class="inspector-page-timeline__segment-label">
{{ row.segment.label }} - {{ row.segment.duration }} ms
</div>
<div class="flex items-center w-full">

<div class="inspector-page-timeline__segment-view">
<div
:style="{ width: row.marginPercent + '%' }"
class="inspector-page-timeline__series-segment-start"
class="inspector-page-timeline__segment-start"
>
<span class="inspector-page-timeline__series-segment-start-label"
>{{ row.segment.start }} ms</span
>
<span class="inspector-page-timeline__segment-start-label">
{{ row.segment.start }} ms
</span>
</div>

<div
class="inspector-page-timeline__series-segment-time"
class="inspector-page-timeline__segment-time"
:class="[row.color]"
:style="{ width: row.widthPercent + '%' }"
></div>
<div class="inspector-page-timeline__series-segment-end"></div>

<div class="inspector-page-timeline__segment-end"></div>
</div>
</div>
</div>
Expand All @@ -184,86 +190,110 @@ const series = computed(() => {
@apply py-5;
}
.inspector-page-timeline__title {
.inspector-page-timeline__head-title {
@include text-muted;
@apply font-bold uppercase text-sm mb-5;
}
.inspector-page-timeline__segment-types {
.inspector-page-timeline__head-tips {
@apply flex space-x-7 mb-4;
}
.inspector-page-timeline__segment-type {
.inspector-page-timeline__head-tip {
@apply flex items-center;
}
.inspector-page-timeline__segment-type__color-box {
.inspector-page-timeline__head-tip-box {
@apply bg-gray-600;
}
.inspector-page-timeline__head-tip-box.orange {
@apply bg-orange-600;
}
.inspector-page-timeline__head-tip-box.blue {
@apply bg-blue-600;
}
.inspector-page-timeline__head-tip-box.purple {
@apply bg-purple-600;
}
.inspector-page-timeline__head-tip-label {
@apply text-xs font-bold;
}
.inspector-page-timeline__head-tip-box {
@apply w-4 h-4 rounded mr-2;
}
.inspector-page-timeline__segments {
.inspector-page-timeline__body {
@apply overflow-x-scroll border border-gray-50 dark:border-gray-600;
}
.inspector-page-timeline__segments-cells {
.inspector-page-timeline__body-cells {
@apply grid grid-cols-6 divide-x divide-gray-50 dark:divide-gray-600 border-b border-gray-50 dark:border-gray-600 font-bold text-center text-2xs sm:text-xs md:text-sm;
}
.inspector-page-timeline__segments-cell {
.inspector-page-timeline__body-cell {
@apply py-2 pl-3;
}
.inspector-page-timeline__series {
.inspector-page-timeline__segments {
background-image: linear-gradient(to right, #dedede 1px, transparent 1px);
}
.dark .inspector-page-timeline__series {
background-image: linear-gradient(
to right,
rgba(255, 255, 255, 0.04) 1px,
transparent 1px
);
.dark & {
background-image: linear-gradient(
to right,
rgba(255, 255, 255, 0.04) 1px,
transparent 1px
);
}
}
.inspector-page-timeline__series-segment {
.inspector-page-timeline__segment {
@apply mt-4 text-right;
}
.inspector-page-timeline__series-segment-label {
.inspector-page-timeline__segment-label {
@apply text-2xs md:text-xs font-bold whitespace-nowrap pr-2 pb-1;
}
.inspector-page-timeline__series-segment-start {
@apply flex items-center justify-end;
.inspector-page-timeline__segment-view {
@apply flex items-center w-full;
}
.inspector-page-timeline__series-segment-end,
.inspector-page-timeline__series-segment-start {
.inspector-page-timeline__segment-start {
@apply flex items-center justify-end;
@apply h-4 md:h-5 lg:h-6;
background-color: rgba(177 177 177 / 17%);
}
.dark .inspector-page-timeline__series-segment-end,
.dark .inspector-page-timeline__series-segment-start {
background-color: rgba(255, 255, 255, 0.04);
.dark & {
background-color: rgba(255, 255, 255, 0.04);
}
}
.inspector-page-timeline__series-segment-end {
.inspector-page-timeline__segment-end {
@apply flex-1;
@apply h-4 md:h-5 lg:h-6;
background-color: rgba(177 177 177 / 17%);
.dark & {
background-color: rgba(255, 255, 255, 0.04);
}
}
.inspector-page-timeline__series-segment-start-label {
.inspector-page-timeline__segment-start-label {
@apply text-2xs font-bold dark:text-gray-200 mr-3;
}
.inspector-page-timeline__series-segment-time {
.inspector-page-timeline__segment-time {
@apply flex-none;
min-width: 0;
}
.inspector-page-timeline__series-segment-start,
.inspector-page-timeline__series-segment-time,
.inspector-page-timeline__series-segment-end {
@apply h-4 md:h-5 lg:h-6;
@apply bg-gray-600;
min-width: 0;
}
.inspector-page-timeline__no-segments {
Expand All @@ -273,28 +303,4 @@ const series = computed(() => {
.inspector-page-timeline__no-segments-placeholder {
@apply text-lg md:text-xl lg:text-3xl mt-5 font-bold text-gray-300;
}
.inspector-page-timeline__series-segment-time,
.inspector-page-timeline__segment-type__color-box {
@apply bg-gray-600;
}
.inspector-page-timeline__series-segment-time.orange,
.inspector-page-timeline__segment-type__color-box.orange {
@apply bg-orange-600;
}
.inspector-page-timeline__series-segment-time.blue,
.inspector-page-timeline__segment-type__color-box.blue {
@apply bg-blue-600;
}
.inspector-page-timeline__series-segment-time.purple,
.inspector-page-timeline__segment-type__color-box.purple {
@apply bg-purple-600;
}
.inspector-page-timeline__segment-type__label {
@apply text-xs font-bold;
}
</style>

0 comments on commit 2d0adc9

Please sign in to comment.