Skip to content

Commit ed07918

Browse files
cyrossignolcyrossignol
committed
Add workspace review queue
1 parent 403f8d0 commit ed07918

35 files changed

Lines changed: 4143 additions & 61 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: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<template>
2+
<div class="chat-box">
3+
<div v-if="!props.messages?.length" class="empty-notice">
4+
<app-icon variant="chat" size="36" />
5+
<span>{{ props.emptyText }}</span>
6+
</div>
7+
<ul v-else class="message-list">
8+
<chat-box-message
9+
v-for="message in props.messages"
10+
:key="message.id"
11+
v-bind="message"
12+
/>
13+
</ul>
14+
15+
<form class="input-group" @submit.prevent="send">
16+
<label class="flex-grow-1">
17+
<span class="visually-hidden">Message</span>
18+
<textarea
19+
v-model="draft"
20+
class="form-control"
21+
placeholder="Type your message here"
22+
/>
23+
</label>
24+
<button type="submit" class="btn btn-light border" title="Send">
25+
<app-icon variant="send" no-margin/>
26+
<span class="visually-hidden">Post Comment</span>
27+
</button>
28+
</form>
29+
</div>
30+
</template>
31+
32+
<script lang="ts">
33+
export interface ChatMessage {
34+
id: PropertyKey,
35+
date: Date;
36+
user?: string;
37+
text: string;
38+
}
39+
</script>
40+
41+
<script setup lang="ts">
42+
43+
interface Props {
44+
messages: Array<ChatMessage>;
45+
emptyText?: string;
46+
}
47+
48+
const props = withDefaults(defineProps<Props>(), {
49+
emptyText: 'Start a discussion…'
50+
});
51+
52+
defineExpose({ clear });
53+
54+
const emit = defineEmits(['send']);
55+
const draft = ref('');
56+
57+
function send() {
58+
emit('send', draft.value);
59+
}
60+
61+
function clear() {
62+
draft.value = '';
63+
}
64+
</script>
65+
66+
<style lang="scss">
67+
.chat-box {
68+
display: flex;
69+
flex-direction: column;
70+
71+
.message-list {
72+
list-style-type: none;
73+
padding: 1rem;
74+
margin: 0;
75+
max-height: 30rem;
76+
overflow: auto;
77+
}
78+
79+
.empty-notice {
80+
text-align: center;
81+
padding: 5rem 1rem;
82+
font-size: 1.5em;
83+
font-weight: 300;
84+
85+
i {
86+
opacity: 0.4;
87+
}
88+
span {
89+
opacity: 0.65;
90+
}
91+
}
92+
93+
.message-list,
94+
.empty-notice {
95+
border-top: 1px solid var(--bs-border-color);
96+
box-shadow: inset 0 0px 0.5rem rgba(0, 0, 0, 0.075);
97+
}
98+
99+
.input-group {
100+
* {
101+
border-radius: 0;
102+
}
103+
104+
textarea {
105+
&:focus {
106+
box-shadow: none;
107+
}
108+
}
109+
}
110+
}
111+
</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: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,26 @@
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 class="btn" :to="reviewRoute">
9+
<app-icon variant="playlist_add_check" size="24" no-margin />
10+
<span class="d-none d-sm-inline ms-2">Review</span>
11+
</nuxt-link>
812
<!--
913
<a :href="tasksHref" class="btn" target="_blank">
1014
<app-icon variant="checklist" size="24" />
1115
<span class="d-none d-sm-inline">Tasks</span>
1216
</a>
1317
-->
1418
<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>
19+
<app-icon variant="drive_folder_upload" size="24" no-margin />
20+
<span class="d-none d-sm-inline ms-2">Export</span>
1721
</nuxt-link>
1822
</div>
1923
<div class="btn-group ms-auto">
2024
<nuxt-link class="btn" :to="settingsRoute">
21-
<app-icon variant="settings" size="24" />
22-
<span class="d-none d-sm-inline">Settings</span>
25+
<app-icon variant="settings" size="24" no-margin />
26+
<span class="d-none d-sm-inline ms-2">Settings</span>
2327
</nuxt-link>
2428
</div>
2529
</div>
@@ -49,6 +53,7 @@ const editRoute = computed(() => ({
4953
hash: editHash.value
5054
}));
5155
56+
const reviewRoute = computed(() => workspacePath('review'));
5257
const exportRoute = computed(() => workspacePath('export'));
5358
const settingsRoute = computed(() => workspacePath('settings'));
5459

0 commit comments

Comments
 (0)