This commit is contained in:
@@ -1,62 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const color = ref("");
|
||||
const colorValue = ref(null);
|
||||
const colorPicker = ref(null);
|
||||
|
||||
const selectedColorCode = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
colorValue.value.addEventListener('click', () => {
|
||||
colorPicker.value.click();
|
||||
})
|
||||
|
||||
colorPicker.value.addEventListener('input', (event) => {
|
||||
let newColor = event.target.value;
|
||||
colorValue.value.classList.remove('unselected');
|
||||
colorValue.value.style.backgroundColor = newColor;
|
||||
color.value = newColor;
|
||||
selectedColorCode.value.textContent = color.value.toUpperCase();
|
||||
});
|
||||
});
|
||||
|
||||
let GetColor = () => color.value;
|
||||
|
||||
defineExpose({ GetColor });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input type="color" id="colorPicker" ref="colorPicker">
|
||||
<div class="color-value unselected" ref="colorValue">
|
||||
<span class="selected-color-code" ref="selectedColorCode"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#colorPicker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.color-value {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
|
||||
&.unselected {
|
||||
background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
|
||||
background-size: 10px 10px;
|
||||
background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.selected-color-code {
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
354
frontend/app/components/partials/ContentSidebar.vue
Normal file
354
frontend/app/components/partials/ContentSidebar.vue
Normal file
@@ -0,0 +1,354 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
|
||||
import { useCampaignService } from '~/services/Campaign.js';
|
||||
import { emitter } from '~/services/Emitter';
|
||||
import Server from '~/services/Server';
|
||||
import { CreateWindow } from '~/services/Windows';
|
||||
|
||||
const { Campaign } = useCampaignService();
|
||||
const notes = ref([]);
|
||||
const loadingNotes = ref(false);
|
||||
const notesError = ref('');
|
||||
const sidebarCollapsed = ref(false);
|
||||
|
||||
const campaignId = computed(() => {
|
||||
return Campaign.value?._id ?? Campaign.value?.id ?? null;
|
||||
});
|
||||
|
||||
const notesMeta = computed(() => {
|
||||
const count = notes.value.length;
|
||||
return `${count} ${count === 1 ? 'note' : 'notes'}`;
|
||||
});
|
||||
|
||||
async function fetchCampaignNotes() {
|
||||
if (!campaignId.value) {
|
||||
notes.value = [];
|
||||
notesError.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
loadingNotes.value = true;
|
||||
notesError.value = '';
|
||||
|
||||
try {
|
||||
const response = await Server().get('/note/list', {
|
||||
params: {
|
||||
campaign: campaignId.value
|
||||
}
|
||||
});
|
||||
|
||||
if (response.data.status !== 'ok') {
|
||||
notes.value = [];
|
||||
notesError.value = response.data.msg ?? 'Unable to load notes.';
|
||||
return;
|
||||
}
|
||||
|
||||
notes.value = response.data.notes.map((note) => {
|
||||
return {
|
||||
key: note._id,
|
||||
title: note.title,
|
||||
text: note.content ?? '',
|
||||
date: note.date
|
||||
};
|
||||
});
|
||||
} catch (error) {
|
||||
notes.value = [];
|
||||
notesError.value = 'Unable to load notes.';
|
||||
} finally {
|
||||
loadingNotes.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSidebar() {
|
||||
sidebarCollapsed.value = !sidebarCollapsed.value;
|
||||
}
|
||||
|
||||
function openCreateNoteWindow() {
|
||||
if (!Campaign.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
CreateWindow('create_note');
|
||||
}
|
||||
|
||||
function openNote(note) {
|
||||
emitter.emit('push-note', note);
|
||||
}
|
||||
|
||||
function handleNoteCreated(note) {
|
||||
if (!note) {
|
||||
return;
|
||||
}
|
||||
|
||||
const noteCampaignId = note.campaign?._id ?? note.campaign ?? null;
|
||||
if (campaignId.value && noteCampaignId && noteCampaignId !== campaignId.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const createdNote = {
|
||||
key: note._id,
|
||||
title: note.title,
|
||||
text: note.content ?? '',
|
||||
date: note.date
|
||||
};
|
||||
|
||||
notes.value = notes.value.filter((currentNote) => {
|
||||
return currentNote.key !== createdNote.key;
|
||||
});
|
||||
notes.value.unshift(createdNote);
|
||||
openNote(createdNote);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on('note-created', handleNoteCreated);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off('note-created', handleNoteCreated);
|
||||
});
|
||||
|
||||
watch(Campaign, () => {
|
||||
fetchCampaignNotes();
|
||||
}, { immediate: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sidebar-shell">
|
||||
<nav class="sidebar-actions" aria-label="Campaign tools">
|
||||
<button
|
||||
class="sidebar-action"
|
||||
type="button"
|
||||
@click="toggleSidebar"
|
||||
:aria-expanded="(!sidebarCollapsed).toString()"
|
||||
aria-controls="campaign-notes-list"
|
||||
:title="sidebarCollapsed ? 'Expand notes' : 'Collapse notes'"
|
||||
:aria-label="sidebarCollapsed ? 'Expand notes' : 'Collapse notes'"
|
||||
>
|
||||
<img
|
||||
class="sidebar-action-icon"
|
||||
:src="sidebarCollapsed ? '/icons/iconoir/regular/nav-arrow-right.svg' : '/icons/iconoir/regular/nav-arrow-left.svg'"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="sidebar-action"
|
||||
type="button"
|
||||
@click="openCreateNoteWindow"
|
||||
:disabled="!Campaign"
|
||||
title="New note"
|
||||
aria-label="New note"
|
||||
>
|
||||
<img class="sidebar-action-icon" src="/icons/iconoir/regular/plus.svg" alt="" aria-hidden="true">
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="sidebar-action"
|
||||
type="button"
|
||||
@click="fetchCampaignNotes"
|
||||
:disabled="!Campaign || loadingNotes"
|
||||
title="Refresh notes"
|
||||
aria-label="Refresh notes"
|
||||
>
|
||||
<img class="sidebar-action-icon" src="/icons/iconoir/regular/refresh.svg" alt="" aria-hidden="true">
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<aside class="notes-sidebar" :class="{ collapsed: sidebarCollapsed }">
|
||||
<div class="sidebar-header">
|
||||
<div class="sidebar-copy">
|
||||
<span class="sidebar-eyebrow">Campaign</span>
|
||||
<strong class="sidebar-title">Notes</strong>
|
||||
<span class="sidebar-meta">{{ notesMeta }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="campaign-notes-list" class="sidebar-list">
|
||||
<div v-if="loadingNotes" class="sidebar-state">
|
||||
Loading notes...
|
||||
</div>
|
||||
|
||||
<div v-else-if="notesError" class="sidebar-state error">
|
||||
{{ notesError }}
|
||||
</div>
|
||||
|
||||
<div v-else-if="notes.length === 0" class="sidebar-state">
|
||||
No notes in this campaign yet.
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<button
|
||||
v-for="note in notes"
|
||||
:key="note.key"
|
||||
type="button"
|
||||
class="note-link"
|
||||
@click="openNote(note)"
|
||||
>
|
||||
<span class="note-link-title">{{ note.title }}</span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidebar-shell {
|
||||
min-height: 0;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar-actions {
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
padding: 8px 6px;
|
||||
border-right: 1px solid var(--color-border);
|
||||
background-color: var(--color-background-light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.sidebar-action {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
background: var(--color-background-soft);
|
||||
box-shadow: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar-action:hover {
|
||||
background: var(--color-button-hover);
|
||||
}
|
||||
|
||||
.sidebar-action:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.sidebar-action-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
filter: invert(var(--color-icon-invert));
|
||||
}
|
||||
|
||||
.notes-sidebar {
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
border-right: 1px solid var(--color-border);
|
||||
background-color: var(--color-background-light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
transition: width 0.2s ease, min-width 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.notes-sidebar.collapsed {
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
box-sizing: border-box;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.sidebar-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sidebar-eyebrow,
|
||||
.sidebar-meta {
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
line-height: 1.2;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.sidebar-list {
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-state {
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
background: var(--color-background-soft);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sidebar-state.error {
|
||||
color: #9e2a2b;
|
||||
}
|
||||
|
||||
.note-link {
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease, background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.note-link:hover {
|
||||
transform: translateX(2px);
|
||||
background: var(--color-background-light);
|
||||
}
|
||||
|
||||
.note-link-title {
|
||||
font-weight: 600;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.note-link-date {
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.notes-sidebar {
|
||||
width: 220px;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.sidebar-header,
|
||||
.sidebar-list {
|
||||
width: 220px;
|
||||
min-width: 220px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,84 +0,0 @@
|
||||
<script setup>
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { AddTooltip } from '~/services/Tooltip';
|
||||
const props = defineProps(['icon', 'action', 'size', 'toggled', 'tooltip']);
|
||||
let icon = props.icon;
|
||||
let action = props.action;
|
||||
|
||||
let size = props.size;
|
||||
let toggled = props.toggled;
|
||||
let tooltip = props.tooltip;
|
||||
|
||||
const button = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
if(tooltip){
|
||||
AddTooltip(button.value, tooltip);
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<template>
|
||||
<div class="icon-button sound-click" :class="size + ' ' + toggled" v-on:click.prevent="action" ref="button">
|
||||
<img class="icon" draggable="false" :src="icon" :class="size">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.icon-button {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
||||
&.big {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
&.small {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
&.toggled {
|
||||
filter: invert(0.9);
|
||||
}
|
||||
|
||||
background-color: var(--color-background-soft);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 2px;
|
||||
|
||||
transition: .3s background-color;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.icon-button:hover {
|
||||
background-color: var(--color-background-softer);
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
pointer-events: none;
|
||||
|
||||
&.big {
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
}
|
||||
|
||||
&.small {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user