mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-05 00:09:35 +00:00
fix: menu item and home view changes (#8725)
### **PR Type**
Enhancement
___
### **Description**
- Refine menu link hover/active behavior
- Add Streams header icon
- Redesign charts layout with CSS grid
- Improve tiles responsiveness and spacing
___
### Diagram Walkthrough
```mermaid
flowchart LR
Menu["MenuLink.vue styles"] -- "remove scale, add border" --> HoverActive["Stable hover/active states"]
HomeHeader["HomeView Streams header"] -- "add icon" --> Accessibility["Improved visual affordance"]
Layout["HomeView charts layout"] -- "CSS grid + wrappers" --> Responsive["Responsive, consistent tiles/charts"]
```
<details> <summary><h3> File Walkthrough</h3></summary>
<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table>
<tr>
<td>
<details>
<summary><strong>MenuLink.vue</strong><dd><code>Stabilize menu item
hover/active states</code>
</dd></summary>
<hr>
web/src/components/MenuLink.vue
<ul><li>Add transparent border to .q-item<br> <li> Remove scale
transforms on hover/active<br> <li> Keep GPU-friendly translateZ(0)<br>
<li> Tweak hover background and icon/label colors</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8725/files#diff-8d69d8a33ed108d9bf912563bd5eed048a132ca6eaff6e559abf2ac0614abfe9">+5/-2</a>
</td>
</tr>
<tr>
<td>
<details>
<summary><strong>HomeView.vue</strong><dd><code>Responsive charts grid
and Streams icon addition</code>
</dd></summary>
<hr>
web/src/views/HomeView.vue
<ul><li>Add Streams header icon using <code>outlinedWindow</code><br>
<li> Replace flex-based charts area with CSS grid<br> <li> Introduce
<code>.functions-dashboards-column</code> and
<code>.tile-wrapper</code><br> <li> Normalize tile sizing, spacing, and
hover shadow</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8725/files#diff-9af441af191d3254ef5f9db603dca75486de7638cda41a3c050e7b3c33d68280">+71/-15</a>
</td>
</tr>
</table></td></tr></tr></tbody></table>
</details>
___
This commit is contained in:
Ashish Kolhe
@@ -170,6 +170,9 @@ export default defineComponent({
|
||||
margin: 0px;
|
||||
border-radius: 6px;
|
||||
|
||||
/* Always have a border to prevent layout shift when active */
|
||||
border: 1px solid transparent;
|
||||
|
||||
/* Minimal height to prevent scrollbar */
|
||||
min-height: 24px;
|
||||
|
||||
@@ -188,7 +191,7 @@ export default defineComponent({
|
||||
|
||||
// Phase 2: Enhanced hover state
|
||||
&:hover:not(.q-router-link--active) {
|
||||
transform: scale(1.02) translateZ(0);
|
||||
transform: translateZ(0);
|
||||
background-color: rgba(30, 41, 59, 0.6);
|
||||
|
||||
.q-icon {
|
||||
@@ -202,7 +205,7 @@ export default defineComponent({
|
||||
|
||||
// Phase 2 & 3: Enhanced active state with modern UX
|
||||
&.q-router-link--active {
|
||||
transform: scale(1.05) translateZ(0) !important;
|
||||
transform: translateZ(0) !important;
|
||||
// Rich, vibrant multi-layer gradient background
|
||||
background:
|
||||
linear-gradient(135deg, rgba(168, 85, 247, 0.4) 0%, rgba(236, 72, 153, 0.35) 100%),
|
||||
|
||||
+71
-15
@@ -27,7 +27,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
aria-label="Streams overview section"
|
||||
>
|
||||
<div class="row justify-between items-center streams-header">
|
||||
<div class="section-header">Streams</div>
|
||||
<div class="row tw-items-center tw-gap-2">
|
||||
<div class="tile-icon icon-bg-blue" aria-hidden="true">
|
||||
<q-icon :name="outlinedWindow" size="1.5rem" />
|
||||
</div>
|
||||
<div class="section-header">Streams</div>
|
||||
</div>
|
||||
<q-btn no-caps flat round :class="store.state.theme === 'dark' ? 'view-button-dark' : 'view-button-light'"
|
||||
aria-label="View all streams"
|
||||
>
|
||||
@@ -198,11 +203,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
</div>
|
||||
<!-- 2nd section -->
|
||||
<div class="charts-main-container row tw-gap-4 q-mt-md" style="display: flex; gap: 16px;">
|
||||
<div class="charts-main-container">
|
||||
<!-- functions and dashboards tiles + 2 charts -->
|
||||
<div class="xl:tw-flex-col lg:tw-flex md:tw-flex-row tw-justify-evenly sm:tw-justify-start tw-gap-4 md:tw-w-full xl:tw-w-fit " >
|
||||
<div class="functions-dashboards-column">
|
||||
|
||||
<div class="tw-w-full lg:tw-w-[calc(50%-0.5rem)] xl:tw-w-[240px] tw-max-w-full">
|
||||
<div class="tile-wrapper">
|
||||
<div class="functions-tile-content rounded-borders text-center column justify-between"
|
||||
:class="store.state.theme === 'dark' ? 'dark-tile-content' : 'light-tile-content'"
|
||||
role="article"
|
||||
@@ -236,7 +241,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
</div>
|
||||
|
||||
<!-- Tile 2 -->
|
||||
<div class="tw-w-full lg:tw-w-[calc(50%-0.5rem)] xl:tw-w-[240px] tw-max-w-full">
|
||||
<div class="tile-wrapper">
|
||||
<div class="dashboards-tile-content rounded-borders text-center column justify-between"
|
||||
:class="store.state.theme === 'dark' ? 'dark-tile-content' : 'light-tile-content'"
|
||||
role="article"
|
||||
@@ -270,7 +275,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chart 1 -->
|
||||
<div class="chart-container first-chart-container rounded-borders tw-w-full tw-max-w-full xl:tw-w-[31%] tw-p-4"
|
||||
<div class="chart-container first-chart-container rounded-borders tw-p-4"
|
||||
:class="store.state.theme === 'dark' ? 'chart-container-dark' : 'chart-container-light'"
|
||||
role="region"
|
||||
aria-label="Alerts overview section"
|
||||
@@ -315,7 +320,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container second-chart-container rounded-borders tw-w-full tw-max-w-full xl:tw-w-[calc(100%-240px-31%-2rem)] tw-p-4"
|
||||
<div class="chart-container second-chart-container rounded-borders tw-p-4"
|
||||
:class="store.state.theme === 'dark' ? 'chart-container-dark' : 'chart-container-light'"
|
||||
role="region"
|
||||
aria-label="Pipelines overview section"
|
||||
@@ -410,6 +415,7 @@ import CustomChartRenderer from "@/components/dashboards/panels/CustomChartRende
|
||||
import TrialPeriod from "@/enterprise/components/billings/TrialPeriod.vue";
|
||||
import HomeViewSkeleton from "@/components/shared/HomeViewSkeleton.vue";
|
||||
import store from "@/test/unit/helpers/store";
|
||||
import { outlinedWindow } from "@quasar/extras/material-icons-outlined";
|
||||
|
||||
export default defineComponent({
|
||||
name: "PageHome",
|
||||
@@ -823,7 +829,8 @@ export default defineComponent({
|
||||
animatedScheduledAlerts,
|
||||
animatedRtAlerts,
|
||||
animatedScheduledPipelines,
|
||||
animatedRtPipelines
|
||||
animatedRtPipelines,
|
||||
outlinedWindow
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -894,17 +901,17 @@ export default defineComponent({
|
||||
|
||||
// Mixin for common tile styles
|
||||
@mixin tile-base {
|
||||
height: 160px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
contain: layout style paint;
|
||||
gap: 8px;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
// Mixin for container base styles
|
||||
@mixin container-base {
|
||||
border-radius: 8px;
|
||||
border-radius: 0.5rem;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
animation: fadeInUp 0.5s ease-out backwards;
|
||||
}
|
||||
@@ -1119,6 +1126,56 @@ export default defineComponent({
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
// Layout for charts section
|
||||
.charts-main-container {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(min-content, max-content) 1fr 2fr;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
align-items: stretch;
|
||||
|
||||
// Responsive: stack on smaller screens
|
||||
@media (max-width: 1280px) {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto auto;
|
||||
}
|
||||
}
|
||||
|
||||
.functions-dashboards-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
|
||||
// On smaller screens, display as a row
|
||||
@media (max-width: 1280px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
// On mobile, stack vertically again
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.tile-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.functions-tile-content,
|
||||
.dashboards-tile-content {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
// Only apply to the outer row (title + button), not the inner row (icon + title text)
|
||||
> .column > .row.justify-between {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.first-chart-container {
|
||||
border-left: 3px solid var(--accent-orange);
|
||||
animation-delay: 350ms;
|
||||
@@ -1264,8 +1321,7 @@ export default defineComponent({
|
||||
.chart-container,
|
||||
.streams-container {
|
||||
&:hover {
|
||||
box-shadow: 0 8px 25px var(--hover-shadow);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px var(--hover-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user