Skip to content

Commit e4203e8

Browse files
cyrossignolcyrossignol
committed
Add initial workspace review queue
1 parent 594de15 commit e4203e8

36 files changed

Lines changed: 4257 additions & 16 deletions

‎assets/scss/main.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
@import "theme.scss";
22
@import "bootstrap/scss/bootstrap.scss";
3+
@import "maplibre-gl/dist/maplibre-gl.css";
4+
5+
:root {
6+
--ws-create-color: $review-create-color;
7+
--ws-modify-color: $review-modify-color;
8+
--ws-delete-color: $review-delete-color;
9+
}
310

411
html, body, #__nuxt {
512
width: 100%;
@@ -34,3 +41,28 @@ label > .form-select:first-child {
3441
width: 100%;
3542
height: 100%;
3643
}
44+
45+
.dropdown-menu {
46+
box-shadow: $box-shadow;
47+
}
48+
49+
/* Review */
50+
51+
.bg-create {
52+
background-color: $review-create-color;
53+
}
54+
.bg-modify {
55+
background-color: $review-modify-color;
56+
}
57+
.bg-delete {
58+
background-color: $review-delete-color;
59+
}
60+
.text-create {
61+
color: #{darken($review-create-color, 27%)};
62+
}
63+
.text-modify {
64+
color: $review-modify-color;
65+
}
66+
.text-delete {
67+
color: #{darken($review-delete-color, 3%)};
68+
}

‎assets/scss/theme.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,7 @@ $primary: #9b0092;
1010
@import "bootstrap/scss/mixins";
1111

1212
$navbar-height: 58px;
13+
14+
$review-create-color: #39dbc0;
15+
$review-modify-color: #db950a;
16+
$review-delete-color: #cc2c47;

‎components/AppIcon.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,18 @@ const classes = computed(() => ([
3030
.material-icons {
3131
vertical-align: middle;
3232
margin-top: -3px;
33+
34+
&.me-2 {
35+
margin-right: 0.33em !important;
36+
}
3337
}
3438
.badge .material-icons {
3539
font-size: 1em;
3640
vertical-align: bottom;
3741
margin-top: 0;
3842
3943
&.me-2 {
40-
margin-right: 0.25rem !important;
44+
margin-right: 0.25em !important;
4145
}
4246
}
4347
</style>

‎components/AppNavbar.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,8 @@ const auth = tdeiClient.auth
5454

5555
<style>
5656
.app-navbar {
57+
z-index: 900;
58+
5759
.navbar-brand {
5860
display: inline-flex;
5961
}

‎components/AppPage.vue‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
11
<template>
2-
<section class="container-lg py-4">
2+
<section :class="classes">
33
<slot />
44
</section>
55
</template>
6+
7+
<script setup lang="ts">
8+
const props = defineProps({
9+
fluid: {
10+
type: Boolean,
11+
default: false,
12+
},
13+
});
14+
15+
const classes = computed(() => ({
16+
'py-4': true,
17+
'container-fluid': props.fluid === true,
18+
'container-lg': props.fluid === false,
19+
}));
20+
</script>

‎components/ChatBox.vue‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<template>
2+
<div class="chat-box">
3+
<div
4+
v-if="!props.messages?.length"
5+
class="empty-notice"
6+
>
7+
<app-icon
8+
variant="chat"
9+
size="36"
10+
/>
11+
<span>{{ props.emptyText }}</span>
12+
</div>
13+
<ul
14+
v-else
15+
class="message-list"
16+
>
17+
<chat-box-message
18+
v-for="message in props.messages"
19+
:key="message.id"
20+
v-bind="message"
21+
/>
22+
</ul>
23+
24+
<form
25+
class="input-group"
26+
@submit.prevent="send"
27+
>
28+
<label class="flex-grow-1">
29+
<span class="visually-hidden">Message</span>
30+
<textarea
31+
v-model="draft"
32+
class="form-control"
33+
placeholder="Type your message here"
34+
/>
35+
</label>
36+
<button
37+
type="submit"
38+
class="btn btn-light border"
39+
title="Send"
40+
>
41+
<app-icon
42+
variant="send"
43+
no-margin
44+
/>
45+
<span class="visually-hidden">Post Comment</span>
46+
</button>
47+
</form>
48+
</div>
49+
</template>
50+
51+
<script lang="ts">
52+
export interface ChatMessage {
53+
id: PropertyKey;
54+
date: Date;
55+
user?: string;
56+
text: string;
57+
}
58+
</script>
59+
60+
<script setup lang="ts">
61+
interface Props {
62+
messages: ChatMessage[];
63+
emptyText?: string;
64+
}
65+
66+
const props = withDefaults(defineProps<Props>(), {
67+
emptyText: 'Start a discussion…',
68+
});
69+
70+
defineExpose({ clear });
71+
72+
const emit = defineEmits(['send']);
73+
const draft = ref('');
74+
75+
function send() {
76+
emit('send', draft.value);
77+
}
78+
79+
function clear() {
80+
draft.value = '';
81+
}
82+
</script>
83+
84+
<style lang="scss">
85+
.chat-box {
86+
display: flex;
87+
flex-direction: column;
88+
89+
.message-list {
90+
list-style-type: none;
91+
padding: 1rem;
92+
margin: 0;
93+
max-height: 30rem;
94+
overflow: auto;
95+
}
96+
97+
.empty-notice {
98+
text-align: center;
99+
padding: 5rem 1rem;
100+
font-size: 1.5em;
101+
font-weight: 300;
102+
103+
i {
104+
opacity: 0.4;
105+
}
106+
span {
107+
opacity: 0.65;
108+
}
109+
}
110+
111+
.message-list,
112+
.empty-notice {
113+
border-top: 1px solid var(--bs-border-color);
114+
box-shadow: inset 0 0px 0.5rem rgba(0, 0, 0, 0.075);
115+
}
116+
117+
.input-group {
118+
* {
119+
border-radius: 0;
120+
}
121+
122+
textarea {
123+
&:focus {
124+
box-shadow: none;
125+
}
126+
}
127+
}
128+
}
129+
</style>

‎components/ChatBoxMessage.vue‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<li class="chat-box-message">
3+
<header>
4+
<span class="visually-hidden">Comment by</span>
5+
<span class="fw-bold">
6+
<app-icon variant="account_circle" />{{ props.user ?? 'Anonymous' }}
7+
</span>
8+
<span :title="date">{{ elapsed }}</span>
9+
</header>
10+
<blockquote>{{ props.text }}</blockquote>
11+
</li>
12+
</template>
13+
14+
<script setup lang="ts">
15+
import { formatElapsed, formatShort } from '~/util/time';
16+
17+
interface Props {
18+
id: PropertyKey;
19+
text: string;
20+
user?: string;
21+
date: Date;
22+
}
23+
24+
const props = defineProps<Props>();
25+
const elapsed = computed(() => formatElapsed(props.date));
26+
const date = computed(() => formatShort(props.date));
27+
</script>
28+
29+
<style lang="scss">
30+
.chat-box-message {
31+
width: calc(100% - 1rem);
32+
padding: 0.5rem;
33+
margin-bottom: 1rem;
34+
background: var(--bs-light);
35+
border: 1px solid var(--bs-border-color);
36+
border-radius: var(--bs-border-radius);
37+
box-shadow: var(--bs-box-shadow-sm);
38+
39+
header {
40+
display: flex;
41+
justify-content: space-between;
42+
margin-bottom: 1rem;
43+
}
44+
45+
&:last-child {
46+
margin: 0;
47+
}
48+
49+
&.mine {
50+
background: var(--bs-primary-bg-subtle);
51+
border-color: var(--bs-primary-border-subtle);
52+
margin-left: auto;
53+
54+
header {
55+
text-align: right;
56+
}
57+
}
58+
59+
blockquote {
60+
white-space: pre-line;
61+
margin: 0;
62+
}
63+
}
64+
</style>

‎components/dashboard/Toolbar.vue‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,33 @@
44
<app-icon variant="edit_location_alt" size="24" />
55
Edit
66
</nuxt-link>
7-
<div class="btn-group">
7+
<div class="btn-group ms-1">
8+
<nuxt-link
9+
class="btn"
10+
:to="reviewRoute"
11+
>
12+
<app-icon
13+
variant="playlist_add_check"
14+
size="24"
15+
no-margin
16+
/>
17+
<span class="d-none d-sm-inline ms-2">Review</span>
18+
</nuxt-link>
819
<!--
920
<a :href="tasksHref" class="btn" target="_blank">
1021
<app-icon variant="checklist" size="24" />
1122
<span class="d-none d-sm-inline">Tasks</span>
1223
</a>
1324
-->
1425
<nuxt-link class="btn" :to="exportRoute" :aria-disabled="!workspace.center">
15-
<app-icon variant="drive_folder_upload" size="24" />
16-
<span class="d-none d-sm-inline">Export</span>
26+
<app-icon variant="drive_folder_upload" size="24" no-margin />
27+
<span class="d-none d-sm-inline ms-2">Export</span>
1728
</nuxt-link>
1829
</div>
1930
<div class="btn-group ms-auto">
2031
<nuxt-link class="btn" :to="settingsRoute">
21-
<app-icon variant="settings" size="24" />
22-
<span class="d-none d-sm-inline">Settings</span>
32+
<app-icon variant="settings" size="24" no-margin />
33+
<span class="d-none d-sm-inline ms-2">Settings</span>
2334
</nuxt-link>
2435
</div>
2536
</div>
@@ -49,6 +60,7 @@ const editRoute = computed(() => ({
4960
hash: editHash.value
5061
}));
5162
63+
const reviewRoute = computed(() => workspacePath('review'));
5264
const exportRoute = computed(() => workspacePath('export'));
5365
const settingsRoute = computed(() => workspacePath('settings'));
5466

0 commit comments

Comments
 (0)