Mirrors/CloudTAK
1
0
Fork 0
mirror of https://github.com/dfpc-coe/CloudTAK.git synced 2025-12-22 05:37:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add More Dropdowns

Browse Source
This commit is contained in:
ingalls
2025-12-16 10:22:59 -07:00
parent 26db7b0a71
commit 5de962e3e7
2 changed files with 56 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
api/web/src/components/CloudTAK/util/PropertyLinks.vue
View File

@@ -1,31 +1,56 @@
<template> <template>
<div <div
v-if='url_links.length || responder_links.length' v-if='url_links.length || responder_links.length'
class='col-12 py-2' class='col-12'
> >
<div <div
v-if='url_links.length' v-if='url_links.length'
class='col-12 mb-3' class='col-12'
> >
<div class='col-12 mb-2'> <div
class='d-flex align-items-center cursor-pointer user-select-none py-2 px-2 rounded transition-all mx-2'
:class='{ "bg-accent": expandedLinks, "hover": !expandedLinks }'
@click='expandedLinks = !expandedLinks'
>
<IconLink <IconLink
:size='18' :size='18'
stroke='1' stroke='1'
color='#6b7990' color='#6b7990'
class='ms-2 me-1' class='ms-2 me-1'
/> />
<label class='subheader user-select-none'>Links</label> <label class='subheader cursor-pointer m-0'>Links</label>
<div class='ms-auto d-flex align-items-center'>
<span class='badge bg-blue-lt me-2'>{{ url_links.length }}</span>
<IconChevronDown
class='transition-transform'
:class='{ "rotate-180": !expandedLinks }'
:size='18'
/>
</div>
</div> </div>
<div class='list-group list-group-flush bg-accent rounded mx-2'>
<a <div
v-for='(link, link_it) of url_links' class='grid-transition'
:key='link_it' :class='{ expanded: expandedLinks }'
:href='link.url' >
target='_blank' <div class='overflow-hidden mb-2'>
class='list-group-item list-group-item-action d-flex align-items-center bg-transparent border-0' <div class='list-group list-group-flush bg-accent rounded mx-2 mt-2'>
> <a
<span class='text-truncate'>{{ link.remarks || link.url }}</span> v-for='(link, link_it) of url_links'
</a> :key='link_it'
:href='link.url'
target='_blank'
class='list-group-item list-group-item-action d-flex align-items-center bg-transparent border-0'
>
<IconExternalLink
:size='18'
stroke='1'
class='me-2'
/>
<span class='text-truncate'>{{ link.remarks || link.url }}</span>
</a>
</div>
</div>
</div> </div>
</div> </div>
@@ -35,8 +60,8 @@
> >
<div <div
class='d-flex align-items-center cursor-pointer user-select-none py-2 px-2 rounded transition-all mx-2' class='d-flex align-items-center cursor-pointer user-select-none py-2 px-2 rounded transition-all mx-2'
:class='{ "bg-accent": expanded, "hover": !expanded }' :class='{ "bg-accent": expandedResponders, "hover": !expandedResponders }'
@click='expanded = !expanded' @click='expandedResponders = !expandedResponders'
> >
<IconUsers <IconUsers
:size='18' :size='18'
@@ -49,7 +74,7 @@
<span class='badge bg-blue-lt me-2'>{{ responder_links.length }}</span> <span class='badge bg-blue-lt me-2'>{{ responder_links.length }}</span>
<IconChevronDown <IconChevronDown
class='transition-transform' class='transition-transform'
:class='{ "rotate-180": !expanded }' :class='{ "rotate-180": !expandedResponders }'
:size='18' :size='18'
/> />
</div> </div>
@@ -57,7 +82,7 @@
<div <div
class='grid-transition' class='grid-transition'
:class='{ expanded: expanded }' :class='{ expanded: expandedResponders }'
> >
<div class='overflow-hidden'> <div class='overflow-hidden'>
<div class='row row-cards mx-2 pt-2'> <div class='row row-cards mx-2 pt-2'>
@@ -102,10 +127,11 @@
<script setup lang='ts'> <script setup lang='ts'>
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { IconUsers, IconLink, IconChevronDown } from '@tabler/icons-vue'; import { IconUsers, IconLink, IconChevronDown, IconExternalLink } from '@tabler/icons-vue';
import timediff from '../../../timediff'; import timediff from '../../../timediff';
const expanded = ref(false); const expandedResponders = ref(false);
const expandedLinks = ref(false);
const props = defineProps<{ const props = defineProps<{
links: Array<{ links: Array<{
@@ -150,4 +176,8 @@ const responder_links = computed(() => {
.transition-transform { .transition-transform {
transition: transform 0.3s ease-out; transition: transform 0.3s ease-out;
} }
.list-group-item-action:hover {
background-color: rgba(255, 255, 255, 0.05) !important;
}
</style> </style>

6
api/web/src/components/CloudTAK/util/PropertyTimes.vue
View File

@@ -13,6 +13,12 @@
/> />
<label class='subheader cursor-pointer m-0'>Times</label> <label class='subheader cursor-pointer m-0'>Times</label>
<div class='ms-auto d-flex align-items-center'> <div class='ms-auto d-flex align-items-center'>
<span
v-if='props.cot.properties.start'
class='cursor-pointer me-2 text-muted small'
@click.stop='mode = mode === "relative" ? "absolute" : "relative"'
v-text='`Start: ${startProp}`'
/>
<IconChevronDown <IconChevronDown
class='transition-transform' class='transition-transform'
:class='{ "rotate-180": !expanded }' :class='{ "rotate-180": !expanded }'