Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move Activity Bar Settings to Activity #17457

Merged
merged 8 commits into from
Feb 14, 2024
Merged

Move Activity Bar Settings to Activity #17457

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1decc94
adjust panel style
ElectronicBlueberry Feb 13, 2024
d99af5b
remove disabled state
ElectronicBlueberry Feb 13, 2024
e4418cf
add href prop
ElectronicBlueberry Feb 13, 2024
602fe6e
add settings panel
ElectronicBlueberry Feb 13, 2024
17b3a96
move settings to panel
ElectronicBlueberry Feb 13, 2024
ae5d17c
make activity toggles buttons
ElectronicBlueberry Feb 13, 2024
8207cfb
re-use same flex panel for sidebar
ElectronicBlueberry Feb 13, 2024
b20433a
only show scrollbar when needed
ElectronicBlueberry Feb 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 11 additions & 37 deletions client/src/components/ActivityBar/ActivityBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { storeToRefs } from "pinia";
import { type Ref, ref } from "vue";
import { computed, type Ref, ref } from "vue";
import { useRoute } from "vue-router/composables";
import draggable from "vuedraggable";

Expand All @@ -11,13 +11,12 @@
import { useUserStore } from "@/stores/userStore";

import ActivityItem from "./ActivityItem.vue";
import ActivitySettings from "./ActivitySettings.vue";
import InteractiveItem from "./Items/InteractiveItem.vue";
import NotificationItem from "./Items/NotificationItem.vue";
import UploadItem from "./Items/UploadItem.vue";
import ContextMenu from "@/components/Common/ContextMenu.vue";
import FlexPanel from "@/components/Panels/FlexPanel.vue";
import NotificationsPanel from "@/components/Panels/NotificationsPanel.vue";
import SettingsPanel from "@/components/Panels/SettingsPanel.vue";
import ToolPanel from "@/components/Panels/ToolPanel.vue";
import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";

Expand All @@ -37,11 +36,6 @@
// activities from store
const { activities } = storeToRefs(activityStore);

// context menu references
const contextMenuVisible = ref(false);
const contextMenuX = ref(0);
const contextMenuY = ref(0);

// drag references
const dragTarget: Ref<EventTarget | null> = ref(null);
const dragItem: Ref<Activity | null> = ref(null);
Expand All @@ -63,6 +57,8 @@
return userStore.toggledSideBar === menuKey;
}

const isSideBarOpen = computed(() => userStore.toggledSideBar !== "");

/**
* Evaluates the drop data and keeps track of the drop area
*/
Expand Down Expand Up @@ -113,28 +109,13 @@
function onToggleSidebar(toggle: string) {
userStore.toggleSideBar(toggle);
}

/**
* Positions and displays the context menu
*/
function toggleContextMenu(evt: MouseEvent) {
if (evt && !contextMenuVisible.value) {
evt.preventDefault();
contextMenuVisible.value = true;
contextMenuX.value = evt.x;
contextMenuY.value = evt.y;
} else {
contextMenuVisible.value = false;
}
}
</script>

<template>
<div class="d-flex">
<div

Check warning on line 116 in client/src/components/ActivityBar/ActivityBar.vue

View workflow job for this annotation

GitHub Actions / client-unit-test (18) 

Visible, non-interactive elements should not have an interactive handler
class="activity-bar d-flex flex-column no-highlight"
data-description="activity bar"
@contextmenu="toggleContextMenu"
@dragover.prevent="onDragOver"
@dragenter.prevent="onDragEnter"
@dragleave.prevent="onDragLeave">
Expand Down Expand Up @@ -203,25 +184,18 @@
<ActivityItem
id="activity-settings"
icon="cog"
:is-active="isActiveRoute('/user')"
:is-active="isActiveSideBar('settings')"
title="Settings"
tooltip="Edit preferences"
to="/user"
@click="onToggleSidebar()" />
@click="onToggleSidebar('settings')" />
</b-nav>
</div>
<FlexPanel v-if="isActiveSideBar('tools')" key="tools" side="left" :collapsible="false">
<ToolPanel />
</FlexPanel>
<FlexPanel v-else-if="isActiveSideBar('workflows')" key="workflows" side="left" :collapsible="false">
<WorkflowPanel />
</FlexPanel>
<FlexPanel v-else-if="isActiveSideBar('notifications')" key="notifications" side="left" :collapsible="false">
<NotificationsPanel />
<FlexPanel v-if="isSideBarOpen" side="left" :collapsible="false">
<ToolPanel v-if="isActiveSideBar('tools')" />
<WorkflowPanel v-else-if="isActiveSideBar('workflows')" />
<NotificationsPanel v-else-if="isActiveSideBar('notifications')" />
<SettingsPanel v-else-if="isActiveSideBar('settings')" />
</FlexPanel>
<ContextMenu :visible="contextMenuVisible" :x="contextMenuX" :y="contextMenuY" @hide="toggleContextMenu">
<ActivitySettings />
</ContextMenu>
</div>
</template>

Expand Down
22 changes: 15 additions & 7 deletions client/src/components/ActivityBar/ActivitySettings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,11 +59,11 @@ function onQuery(newQuery: string) {
</script>

<template>
<div class="activity-settings rounded p-3 no-highlight">
<DelayedInput class="mb-3" :delay="100" placeholder="Search activities" @change="onQuery" />
<div v-if="foundActivities" class="activity-settings-content overflow-auto">
<div class="activity-settings rounded no-highlight">
<DelayedInput :delay="100" placeholder="Search activities" @change="onQuery" />
<div v-if="foundActivities" class="activity-settings-content">
<div v-for="activity in filteredActivities" :key="activity.id">
<div class="activity-settings-item p-2 cursor-pointer" @click="onClick(activity)">
<button class="activity-settings-item p-2 cursor-pointer" @click="onClick(activity)">
<div class="d-flex justify-content-between align-items-start">
<span class="w-100">
<FontAwesomeIcon
Expand Down Expand Up @@ -97,7 +97,7 @@ function onQuery(newQuery: string) {
<small v-localize>
{{ activity.description || "No description available" }}
</small>
</div>
</button>
</div>
</div>
<div v-else class="activity-settings-content">
Expand All @@ -110,14 +110,22 @@ function onQuery(newQuery: string) {
@import "theme/blue.scss";

.activity-settings {
width: 20rem;
overflow-y: hidden;
display: flex;
flex-direction: column;
}

.activity-settings-content {
height: 20rem;
overflow-y: scroll;
}

.activity-settings-item {
background: none;
border: none;
text-align: left;
transition: none;
width: 100%;

.icon-check {
color: darken($brand-success, 15%);
}
Expand Down
14 changes: 10 additions & 4 deletions client/src/components/Panels/ActivityPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
interface Props {
title: string;
goToAllTitle?: string;
href?: string;
}

const props = defineProps<Props>();
Expand Down Expand Up @@ -30,6 +31,7 @@ const emit = defineEmits(["goToAll"]);
class="activity-panel-footer"
variant="primary"
:data-description="`props.mainButtonText button`"
:to="props.href"
@click="emit('goToAll')">
{{ props.goToAllTitle }}
</BButton>
Expand All @@ -43,7 +45,7 @@ const emit = defineEmits(["goToAll"]);
height: 100%;
display: flex;
flex-flow: column;
padding: 0.5rem 0.25rem;
padding: 0.5rem 1rem;
Copy link
Member

@itisAliRH itisAliRH Feb 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ii´s looks like there's too much padding; I would prefer 0.5rem here:
image

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be the same spacing as the tool box. I'm open to change it, but if we do we should do so for the tool box as well

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would prefer to use the activity panel for the tool box as well to have a consistent UI.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That sounds like a different and controversial option ... can we merge without that ?

Copy link
Member Author

@ElectronicBlueberry ElectronicBlueberry Feb 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd prefer keeping it aligned with existing styles for now, and making any style changes in a separate PR.
That way we can discuss there in more detail

background-color: $brand-light;

.activity-panel-header {
Expand All @@ -53,22 +55,26 @@ const emit = defineEmits(["goToAll"]);
display: flex;
align-items: center;
justify-content: space-between;
min-height: 2rem;

.activity-panel-heading {
margin: 0 !important;
margin: 0;
padding-left: 0.25rem;
}
}
}

.activity-panel-body {
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
overflow-y: auto;
overflow-y: hidden;
padding: 0.2rem 0.2rem;
}

.activity-panel-footer {
margin-top: 0.5rem;
font-weight: bold;
}
}
</style>
15 changes: 6 additions & 9 deletions client/src/components/Panels/NotificationsPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
import { storeToRefs } from "pinia";
import { computed } from "vue";
import { useRouter } from "vue-router/composables";

import { useConfirmDialog } from "@/composables/confirmDialog";
import { useNotificationsStore } from "@/stores/notificationsStore";
Expand All @@ -16,7 +15,6 @@ import ActivityPanel from "@/components/Panels/ActivityPanel.vue";

library.add(faCheckDouble);

const router = useRouter();
const { confirm } = useConfirmDialog();

const notificationsStore = useNotificationsStore();
Expand All @@ -38,19 +36,14 @@ async function onMarkAllAsRead() {
});
}
}

function goToAllNotifications() {
router.push("/user/notifications");
}
</script>

<template>
<ActivityPanel title="Unread Notifications" go-to-all-title="All notifications" @goToAll="goToAllNotifications">
<ActivityPanel title="Unread Notifications" go-to-all-title="All notifications" href="/user/notifications">
<template v-slot:header-buttons>
<BButtonGroup>
<BButton
v-b-tooltip.bottom.hover
:disabled="!unreadNotifications.length"
data-description="mark all as read"
size="sm"
variant="link"
Expand All @@ -75,7 +68,7 @@ function goToAllNotifications() {
No unread notifications to show.
</BAlert>

<TransitionGroup name="notifications-box-list" tag="div">
<TransitionGroup class="notifications-box-list" name="notifications-box-list" tag="div">
<div v-for="notification in unreadNotifications" :key="notification.id" class="notifications-box-card">
<NotificationCard :notification="notification" />
</div>
Expand All @@ -90,6 +83,10 @@ function goToAllNotifications() {
background-color: $body-bg;
}

.notifications-box-list {
overflow-y: scroll;
}

.notifications-box-list-enter-active {
transition: all 0.5s ease;
}
Expand Down
11 changes: 11 additions & 0 deletions client/src/components/Panels/SettingsPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<script setup lang="ts">
import ActivitySettings from "@/components/ActivityBar/ActivitySettings.vue";
import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
</script>

<template>
<ActivityPanel title="Settings" go-to-all-title="User Preferences" href="/user">
<h3>Customize Activity Bar</h3>
<ActivitySettings />
</ActivityPanel>
</template>
Loading