Skip to content

Commit

Permalink
NN-608 update toolbar icons
Browse files Browse the repository at this point in the history
  • Loading branch information
anlisha-maharjan committed Nov 8, 2024
1 parent 20a440c commit 9b3025b
Show file tree
Hide file tree
Showing 11 changed files with 140 additions and 54 deletions.
6 changes: 3 additions & 3 deletions frontend/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,6 @@ npm run build
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

### Use Material Icons
For Icons See [Reference](https://fonts.google.com/icons).
Usage: <span class="material-icons">[Copy Icon name here]</span>
### For Icons
See [Reference](https://fonts.google.com/icons).
Usage: <span class="material-symbols-rounded font-variation-ico-filled">[Copy Icon name here]</span>
4 changes: 4 additions & 0 deletions frontend/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Dosis:[email protected]&display=swap" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AxoWise - Bridging Knowledge and Wisdom through Networks.</title>
</head>
Expand Down
1 change: 0 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
"axios": "^1.7.4",
"d3": "^7.9.0",
"d3-scale": "^4.0.2",
"material-icons": "^1.13.12",
"file-saver": "^2.0.5",
"mitt": "^3.0.1",
"ml-hclust": "^3.1.0",
Expand Down
20 changes: 10 additions & 10 deletions frontend/src/components/ThemeSwitcher.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template>
<ul class="flex list-none m-0 p-0 gap-2 items-center">
<ul class="flex items-center gap-2 p-0 m-0 list-none">
<li>
<Button type="button" plain text @click="onThemeToggler">
<span :class="`material-icons dark:text-white`">{{ iconClass }}</span>
<span :class="`material-symbols-rounded dark:text-white`">{{ iconClass }}</span>
</Button>
</li>
<!-- <li class="relative">
Expand All @@ -16,16 +16,16 @@
hideOnOutsideClick: true,
}"
type="button"
class="inline-flex w-8 h-8 p-0 items-center justify-center surface-0 dark:surface-800 border border-surface-200 dark:border-surface-600 rounded"
class="inline-flex items-center justify-center w-8 h-8 p-0 border rounded surface-0 dark:surface-800 border-surface-200 dark:border-surface-600"
>
<i class="pi pi-palette dark:text-white"></i>
</button>
<div
class="absolute top-[2.5rem] right-0 hidden w-[16rem] p-3 bg-white dark:bg-surface-800 rounded-md shadow border border-surface-200 dark:border-surface-700 flex-col justify-start items-start gap-3.5 inline-flex origin-top z-10"
>
<div class="flex-col justify-start items-start gap-2 inline-flex pr-4">
<div class="inline-flex flex-col items-start justify-start gap-2 pr-4">
<span class="text-sm font-medium">Primary Colors</span>
<div class="self-stretch justify-start items-start gap-2 inline-flex flex-wrap">
<div class="inline-flex flex-wrap items-start self-stretch justify-start gap-2">
<button
v-for="primaryColor of primaryColors"
:key="primaryColor.name"
Expand All @@ -40,9 +40,9 @@
></button>
</div>
</div>
<div class="flex-col justify-start items-start gap-2 inline-flex pr-2">
<div class="inline-flex flex-col items-start justify-start gap-2 pr-2">
<span class="text-sm font-medium">Surface Colors</span>
<div class="self-stretch justify-start items-start gap-2 inline-flex">
<div class="inline-flex items-start self-stretch justify-start gap-2">
<button
v-for="surface of surfaces"
:key="surface.name"
Expand All @@ -57,7 +57,7 @@
></button>
</div>
</div>
<div class="flex-col justify-start items-start gap-2 inline-flex w-full">
<div class="inline-flex flex-col items-start justify-start w-full gap-2">
<span class="text-sm font-medium">Preset</span>
<div
class="inline-flex p-[0.28rem] items-start gap-[0.28rem] rounded-[0.71rem] border border-[#00000003] w-full"
Expand All @@ -70,8 +70,8 @@
/>
</div>
</div>
<div class="inline-flex flex-col justify-start items-start gap-2 w-full pt-4 pb-2">
<span class="text-sm font-medium m-0">Ripple Effect</span>
<div class="inline-flex flex-col items-start justify-start w-full gap-2 pt-4 pb-2">
<span class="m-0 text-sm font-medium">Ripple Effect</span>
<ToggleSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
</div>
</div>
Expand Down
43 changes: 25 additions & 18 deletions frontend/src/components/toolbar/MainToolBar.vue
Original file line number Diff line number Diff line change
@@ -1,38 +1,45 @@
<template>
<aside :class="`py-4 animate__animated animate__faster ${widget ? 'animate__fadeInDown' : 'w-0 animate__fadeOutUp'}`">
<nav class="w-[64px] flex flex-col items-center gap-4 overflow-auto">
<Button icon="material-icons" text plain v-tooltip="'Home'" @click="switch_home">
<span class="material-icons">home</span>
<Button class="group" icon="material-symbols-rounded" text plain v-tooltip="'Home'" @click="switch_home">
<span class="material-symbols-rounded group-hover:font-variation-ico-filled">home</span>
</Button>

<Button icon="material-icons" text plain v-tooltip="'Highlight nodes'" @click="protein_active = !protein_active">
<span class="material-icons">hub</span>
<Button class="group" icon="material-symbols-rounded" text plain v-tooltip="'Highlight nodes'"
@click="protein_active = !protein_active">
<span class="material-symbols-rounded group-hover:font-variation-ico-filled">hub</span>
</Button>

<Button icon="material-icons" text plain v-tooltip="'Graph settings'" @click="tools_active = !tools_active">
<span class="material-icons">tune</span>

<Button class="group" icon="material-symbols-rounded" text plain v-tooltip="'Graph settings'"
@click="tools_active = !tools_active">
<span class="material-symbols-rounded group-hover:font-variation-ico-filled">settings_motion_mode</span>
</Button>

<Button icon="material-icons" text plain v-tooltip="'Export graph'" @click="export_active = !export_active">
<span class="material-icons">file_open</span>

<Button class="group" icon="material-symbols-rounded" text plain v-tooltip="'Export graph'" @click="export_active = !export_active">
<span class="material-symbols-rounded group-hover:font-variation-ico-filled">file_export</span>
</Button>

<Button icon="material-icons" text plain v-tooltip="'Graph parameter'"
<Button class="group" icon="material-symbols-rounded" text plain v-tooltip="'Graph parameter'"
@click="selection_active = !selection_active">
<span class="material-icons">settings_applications</span>
<span class="material-symbols-rounded group-hover:font-variation-ico-filled">filter_b_and_w</span>
</Button>

<Button icon="material-icons" text plain v-tooltip="'Re-center'" @click="center">
<span class="material-icons">fullscreen</span>
<Button class="group" icon="material-symbols-rounded" text plain v-tooltip="'Re-center'" @click="center">
<span class="material-symbols-rounded group-hover:font-variation-ico-filled">center_focus_strong</span>
</Button>

<Button icon="material-icons" text plain v-tooltip="'Chat bot'" @click="chatbot">
<span class="material-icons">chat</span>
<Button class="group" icon="material-symbols-rounded" text plain v-tooltip="'Chat bot'" @click="chatbot">
<span class="material-symbols-rounded group-hover:font-variation-ico-filled">forum</span>
</Button>

<Button icon="material-icons" text plain v-tooltip="'Show label'" @click="hide_labels(label_check)">
<span v-if="!label_check" class="material-icons">visibility</span>
<span v-if="label_check" class="material-icons">visibility_off</span>
<Button class="group" icon="material-symbols-rounded" text plain v-tooltip="'Show label'"
@click="hide_labels(label_check)">
<span v-if="!label_check"
class="material-symbols-rounded group-hover:font-variation-ico-filled">subtitles</span>
<span v-if="label_check"
class="material-symbols-rounded group-hover:font-variation-ico-filled">subtitles_off</span>
</Button>
</nav>

Expand All @@ -47,7 +54,7 @@
</Dialog>

<Dialog v-model:visible="protein_active" header="Highlight nodes" position="topleft" :minY="60" :minX="60" :pt="{
root: { class: 'w-[32rem] !mt-[60px] !ml-[60px]' },
root: { class: 'w-[24rem] !mt-[60px] !ml-[60px]' },
header: { class: '!py-2.5 cursor-move' },
title: { class: '!text-base' },
}">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<li class="flex items-center justify-between gap-2 py-2 dark:text-[#c3c3c3]">
Disable module ModuleSelection
Disable module selection
<ToggleSwitch class="toggle-xs" @value-change="check" />
</li>
</template>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/toolbar/modules/SelectionList.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="tool-item">
<div id="selection_highlight" class="window-menu selection">
<div id="selection_highlight_header" class="window-header">
<!-- <div id="selection_highlight_header" class="window-header">
<div class="headertext">
<span>graph parameter</span>
<img
Expand All @@ -10,7 +10,7 @@
v-on:click="unactive_proteinlist()"
/>
</div>
</div>
</div> -->
<div class="selection_list">
<div class="window-label">degree value</div>
<div class="menu-items">
Expand Down
26 changes: 11 additions & 15 deletions frontend/src/layout/AppBar.vue
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
<template>
<Toolbar
class="h-[58px] !py-1.5 relative !rounded-none dark:!border-0 dark:!bg-[#34343D] z-[1]"
:pt="{ end: { class: 'flex items-center gap-4' } }"
>
<Toolbar class="h-[58px] !py-1.5 relative !rounded-none dark:!border-0 dark:!bg-[#34343D] z-[1]"
:pt="{ end: { class: 'flex items-center gap-4' } }">
<template #start>
<div class="flex gap-4">
<Button icon="material-icons" aria-label="menu" severity="secondary" @click="toggle_widget(!widget)">
<span v-if="widget" class="material-icons">widgets</span>
<span v-if="!widget" class="material-icons">dashboard</span>
<Button icon="material-symbols-rounded" aria-label="menu" severity="secondary" @click="toggle_widget(!widget)">
<span v-if="widget" class="material-symbols-rounded font-variation-ico-filled">widgets</span>
<span v-if="!widget" class="material-symbols-rounded font-variation-ico-filled">dashboard</span>
</Button>

<Button @click="toggle" plain text class="capitalize">
<span class="material-icons">display_settings</span>
<span class="material-symbols-rounded">display_settings</span>
{{ view }}
</Button>
</div>
</template>

<template #center><SearchField :data="gephi_data" :mode="mode"></SearchField></template>
<template #center>
<SearchField :data="gephi_data" :mode="mode"></SearchField>
</template>

<template #end>
<keep-alive>
Expand All @@ -30,12 +30,8 @@

<Popover ref="op">
<ul class="flex flex-col p-0 m-0 list-none">
<li
v-for="entry in filter_views"
:key="entry"
v-on:click="swap_view(entry)"
class="flex items-center gap-2 px-2 py-3 capitalize cursor-pointer hover:bg-emphasis rounded-border"
>
<li v-for="entry in filter_views" :key="entry" v-on:click="swap_view(entry)"
class="flex items-center gap-2 px-2 py-3 capitalize cursor-pointer hover:bg-emphasis rounded-border">
{{ entry + " view" }}
</li>
</ul>
Expand Down
1 change: 0 additions & 1 deletion frontend/src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import router from "./router";
import "vue-select/dist/vue-select.css";
import "./style.css";
import "primeicons/primeicons.css";
import "material-icons/iconfont/material-icons.css";
import vSelect from "vue-select";
import axios from "axios";
import VueAxios from "vue-axios";
Expand Down
48 changes: 47 additions & 1 deletion frontend/src/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

/* Start Styles for PrimeVue */
:root {
--body-bg: var(--p-surface-50);
--body-bg: #f3f3f3;
--body-text-color: var(--p-surface-900);
--card-border: 1px solid var(--border-color);
--card-bg: var(--p-surface-0);
Expand Down Expand Up @@ -34,6 +34,50 @@ body {
color: var(--body-text-color);
}

/* Global scrollbar styling for Chrome, Safari, Edge (Chromium-based) */
@media (min-width: 1280px) {
/* WebKit Browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 6px; /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
background-color: #e2e8f0; /* Track color */
border-radius: 100px; /* Rounded corners */
}

::-webkit-scrollbar-thumb {
background-color: #64748b; /* Thumb color */
border-radius: 100px; /* Rounded corners */
}

/* Firefox Styling */
/* Applies similar thin scrollbar with matching colors */
* {
scrollbar-width: thin; /* Makes the scrollbar thin */
scrollbar-color: #64748b #e2e8f0; /* Thumb color and track color */
}
}

/* Optional: Narrow screen scrollbar styles */
@media (max-width: 1279px) {
/* WebKit Browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 8px; /* Width for smaller screens */
}

::-webkit-scrollbar-thumb {
background-color: #64748b; /* Darker thumb color */
border-radius: 100px;
}

/* Firefox Styling */
* {
scrollbar-width: auto;
scrollbar-color: #64748b #f0f4f8; /* Subtle color for small screens */
}
}

.card {
background: var(--card-bg);
border: var(--card-border);
Expand All @@ -52,9 +96,11 @@ body {
height: 14px !important;
margin-top: -6px !important;
}

.toggle-xs.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle {
left: 15px !important;
}

/* End Styles for PrimeVue */

* {
Expand Down
39 changes: 37 additions & 2 deletions frontend/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,45 @@
/** @type {import('tailwindcss').Config} */

import tailwindcssPrimeUI from "tailwindcss-primeui";

export default {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
darkMode: ["selector", '[class="p-dark"]'],
theme: {
extend: {},
extend: {
colors: {
primary: {
50: "#f0fdfa",
100: "#ccfbf1",
200: "#99f6e4",
300: "#5eead4",
400: "#2dd4bf",
500: "#14b8a6",
600: "#0d9488",
700: "#0f766e",
800: "#115e59",
900: "#134e4a",
950: "#042f2e",
},
},
fontVariationSettings: {
"ico-filled": '"FILL" 1, "wght" 700, "GRAD" 0, "opsz" 48', // set Material icon as filled
},
},
},
// eslint-disable-next-line no-undef
plugins: [require("tailwindcss-primeui")],
plugins: [
tailwindcssPrimeUI,
//### Include ico-filled in hover prefix
function ({ addUtilities, theme, e }) {
const fontVariationSettings = theme("fontVariationSettings");
const newUtilities = Object.entries(fontVariationSettings).map(([key, value]) => ({
[`.${e(`font-variation-${key}`)}`]: {
fontVariationSettings: value,
transition: "font-variation-settings 0.3s ease",
},
}));
addUtilities(newUtilities, ["hover", "group-hover"]);
},
],
};

0 comments on commit 9b3025b

Please sign in to comment.