Skip to content

Commit 9f11083

Browse files
g3forceg3force
committed
Tune Protocol view
1 parent ab844d1 commit 9f11083

File tree

3 files changed

+85
-83
lines changed

3 files changed

+85
-83
lines changed

‎frontend/src/components/common/OriginIcon.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script setup lang="ts">
2+
3+
import {originIcon} from "@/helpers";
4+
5+
const props = defineProps<{
6+
origin: string,
7+
tooltip?: boolean,
8+
}>()
9+
</script>
10+
11+
<template>
12+
<q-icon
13+
class="q-mx-xs"
14+
color="primary"
15+
:name="originIcon(origin)"
16+
:alt="origin"
17+
>
18+
<q-tooltip v-if="props.tooltip === true">
19+
{{ origin }}
20+
</q-tooltip>
21+
</q-icon>
22+
</template>

‎frontend/src/components/protocol/ProtocolItem.vue

Lines changed: 55 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
<script setup lang="ts">
2-
import {computed, inject, ref} from "vue";
1+
<script setup lang="ts" xmlns:slot="http://www.w3.org/1999/html">
2+
import {computed, inject} from "vue";
33
import TeamBadge from "@/components/common/TeamBadge.vue";
44
import type {ProtocolEntry} from "@/proto/ssl_gc_api";
55
import formatDuration from "format-duration";
6-
import {gameEventDetails, gameEventDetailsKeys, originIcon} from "@/helpers";
6+
import {gameEventDetails, gameEventDetailsKeys} from "@/helpers";
77
import {changeDetails} from "@/helpers/ChangeDetails";
88
import type {ControlApi} from "@/providers/controlApi/ControlApi";
9+
import OriginIcon from "@/components/common/OriginIcon.vue";
910

1011
const props = defineProps<{
1112
protocolEntry: ProtocolEntry,
1213
dense?: boolean,
1314
}>()
14-
const showDetails = ref(false)
1515
1616
const control = inject<ControlApi>('control-api')
1717
@@ -51,93 +51,72 @@ const hasGameEventOrigins = computed(() => {
5151
return gameEventOrigins.value?.length > 0
5252
})
5353
54-
function toggleExpandItem() {
55-
showDetails.value = !showDetails.value
56-
}
57-
5854
function revert() {
5955
control?.Revert(props.protocolEntry.id!)
6056
}
6157
</script>
6258

6359
<template>
64-
<div>
65-
<q-item
66-
>
67-
<q-item-section avatar top v-if="!dense">
68-
<q-icon :name="change.icon" color="primary" size="34px"/>
69-
</q-item-section>
60+
<q-item dense class="q-mr-xs">
61+
<q-item-section avatar top v-if="!dense">
62+
<q-icon :name="change.icon" color="primary" size="34px"/>
63+
</q-item-section>
7064

71-
<q-item-section top class="col-2" v-if="!dense">
72-
<q-item-label class="q-mt-sm">{{ change.typeName }}</q-item-label>
73-
</q-item-section>
65+
<q-item-section top class="col-2" v-if="!dense">
66+
<q-item-label class="q-mt-sm">{{ change.typeName }}</q-item-label>
67+
</q-item-section>
7468

75-
<q-item-section top>
76-
<q-item-label lines="1">
77-
<TeamBadge :team="change.forTeam"/>
78-
<span class="text-weight-medium">{{ change.title }}</span>
79-
<span class="text-grey-8"> - {{ origin }}</span>
80-
<q-icon class="q-mx-xs" :name="originIcon(origin)" color="primary" :alt="origin"/>
81-
<span v-if="hasGameEventOrigins">
82-
(
83-
<q-icon class="q-mx-xs" :name="originIcon(origin)" color="primary" :alt="origin"
84-
v-for="(origin, key) in gameEventOrigins" :key="key">
85-
<q-tooltip>
86-
{{ origin }}
87-
</q-tooltip>
88-
</q-icon>
89-
)
90-
</span>
91-
</q-item-label>
92-
<q-item-label caption lines="1">
93-
<span>{{ matchTime }}</span>
94-
<q-btn flat round icon="loupe" dense
95-
color="primary"
96-
v-if="dense"
97-
:size="dense ? '8px' : '12px'"
98-
:class="{ invisible: details === undefined, 'revert': true }"
99-
@click="toggleExpandItem"
100-
/>
101-
<q-btn flat round icon="history" dense
102-
color="primary"
103-
v-if="dense"
104-
:size="dense ? '8px' : '12px'"
105-
:class="{ invisible: !revertible, 'revert': true }"
106-
@click="revert"
107-
/>
108-
</q-item-label>
109-
<template v-if="showDetails">
110-
<q-item-label v-for="key in detailsKeys" :key="key">
111-
{{ key }}: {{ details[key] }}
112-
</q-item-label>
69+
<q-item-section>
70+
<q-expansion-item hide-expand-icon header-class="q-pl-none">
71+
<template v-slot:header>
72+
<q-item-section>
73+
<q-item-label lines="1">
74+
<q-icon :name="change.icon" color="primary" size="15px" v-if="dense" class="q-mr-xs"/>
75+
<TeamBadge :team="change.forTeam"/>
76+
<span class="text-weight-medium">{{ change.title }}</span>
77+
<span class="text-grey-8"> - {{ origin }}</span>
78+
<OriginIcon :origin="origin"/>
79+
<span v-if="hasGameEventOrigins">(</span>
80+
<OriginIcon
81+
v-for="(gameEventOrigin, key) in gameEventOrigins"
82+
:key="key"
83+
:origin="gameEventOrigin"
84+
/>
85+
<span v-if="hasGameEventOrigins">)</span>
86+
</q-item-label>
87+
<q-item-label caption lines="1">
88+
{{ matchTime }}
89+
</q-item-label>
90+
</q-item-section>
11391
</template>
114-
</q-item-section>
115-
<q-btn flat round icon="loupe"
116-
color="primary"
117-
v-if="!dense"
118-
:size="dense ? '8px' : '12px'"
119-
:class="{ invisible: details === undefined, 'revert': true }"
120-
@click="toggleExpandItem"
121-
/>
122-
<q-btn flat round icon="history"
92+
93+
<q-card v-if="detailsKeys.length > 0">
94+
<q-card-section>
95+
<q-item-label v-for="key in detailsKeys" :key="key">
96+
{{ key }}: {{ details[key] }}
97+
</q-item-label>
98+
</q-card-section>
99+
</q-card>
100+
</q-expansion-item>
101+
</q-item-section>
102+
103+
<div class="tool-button" v-if="revertible">
104+
<q-btn dense round
105+
icon="history"
106+
size="10px"
123107
color="primary"
124-
v-if="!dense"
125-
:size="dense ? '8px' : '12px'"
126-
:class="{ invisible: !revertible, 'revert': true }"
127108
@click="revert"
128109
/>
129-
<q-badge color="orange" text-color="black" :label="props.protocolEntry.id" floating/>
130-
</q-item>
131-
</div>
110+
</div>
111+
112+
<q-badge color="orange" text-color="black" :label="props.protocolEntry.id" floating/>
113+
</q-item>
132114
</template>
133115

134116
<style>
135-
.invisible {
136-
visibility: hidden;
137-
}
138-
139-
.revert {
140-
bottom: 0;
117+
.tool-button {
118+
position: absolute;
119+
top: 18px;
141120
right: 0;
142121
}
143122
</style>

‎frontend/src/components/protocol/ProtocolList.vue

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,15 @@ const store = useProtocolStore()
1818
virtual-scroll-slice-ratio-before="0.5"
1919
virtual-scroll-slice-ratio-after="0.5"
2020
:items="store.protocolEntries"
21-
v-slot="{ item }"
2221
>
23-
<ProtocolItem
24-
class="q-pr-sm q-pt-sm"
25-
:dense="dense"
26-
:key="item.id"
27-
:protocol-entry="item"
28-
/>
22+
<template v-slot="{ item, index }">
23+
<ProtocolItem
24+
:class="{'q-mt-xs': index===0}"
25+
:dense="dense"
26+
:key="item.id"
27+
:protocol-entry="item"
28+
/>
29+
</template>
2930
</q-virtual-scroll>
3031
</template>
3132

0 commit comments

Comments
 (0)