| 1 | // Copyright © SixtyFPS GmbH <info@slint.dev> |
|---|
| 2 | // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0 |
|---|
| 3 | |
|---|
| 4 | import { CosmicPalette, CosmicFontSettings } from "styling.slint" ; |
|---|
| 5 | import { MenuBarItemBase, MenuBarBase, MenuFrameBase, MenuItemBase } from "../common/menu-base.slint" ; |
|---|
| 6 | |
|---|
| 7 | export component MenuBarItem { |
|---|
| 8 | in property <MenuEntry> entry <=> base.entry; |
|---|
| 9 | |
|---|
| 10 | callback clicked <=> base.clicked; |
|---|
| 11 | callback hovered <=> base.hovered; |
|---|
| 12 | |
|---|
| 13 | min-width: base.min-width; |
|---|
| 14 | min-height: base.min-height; |
|---|
| 15 | |
|---|
| 16 | base := MenuBarItemBase { |
|---|
| 17 | padding-left: 12px; |
|---|
| 18 | padding-right: 12px; |
|---|
| 19 | padding-top: 4px; |
|---|
| 20 | padding-bottom: 4px; |
|---|
| 21 | default-foreground: CosmicPalette.accent-background; |
|---|
| 22 | hover-foreground: CosmicPalette.accent-background; |
|---|
| 23 | pressed-foreground: CosmicPalette.accent-background; |
|---|
| 24 | hover-background: CosmicPalette.state-hover; |
|---|
| 25 | pressed-background: CosmicPalette.state-pressed; |
|---|
| 26 | font-size: CosmicFontSettings.body.font-size; |
|---|
| 27 | font-weight: CosmicFontSettings.body.font-weight; |
|---|
| 28 | border-radius: 12px; |
|---|
| 29 | } |
|---|
| 30 | } |
|---|
| 31 | |
|---|
| 32 | export component MenuBar inherits MenuBarBase { |
|---|
| 33 | padding: 8px; |
|---|
| 34 | spacing: 4px; |
|---|
| 35 | min-layout-height: 48px; |
|---|
| 36 | } |
|---|
| 37 | |
|---|
| 38 | export component MenuFrame inherits MenuFrameBase { |
|---|
| 39 | background: CosmicPalette.alternate-background; |
|---|
| 40 | border-radius: 8px; |
|---|
| 41 | border-width: 1px; |
|---|
| 42 | border-color: CosmicPalette.border; |
|---|
| 43 | drop-shadow-color: CosmicPalette.shadow; |
|---|
| 44 | drop-shadow-offset-y: 4px; |
|---|
| 45 | drop-shadow-blur: 16px; |
|---|
| 46 | layout-min-width: 360px; |
|---|
| 47 | } |
|---|
| 48 | |
|---|
| 49 | export component MenuItem { |
|---|
| 50 | in property <bool> is-current <=> base.is-current; |
|---|
| 51 | in property <MenuEntry> entry <=> base.entry; |
|---|
| 52 | |
|---|
| 53 | callback set-current <=> base.set-current; |
|---|
| 54 | callback clear-current <=> base.clear-current; |
|---|
| 55 | callback activate <=> base.activate; |
|---|
| 56 | |
|---|
| 57 | min-height: max(40px, base.min-height); |
|---|
| 58 | |
|---|
| 59 | HorizontalLayout { |
|---|
| 60 | base := MenuItemBase { |
|---|
| 61 | default-foreground: CosmicPalette.foreground; |
|---|
| 62 | current-foreground: CosmicPalette.foreground; |
|---|
| 63 | current-background: CosmicPalette.state-hover; |
|---|
| 64 | separator-color: CosmicPalette.border; |
|---|
| 65 | font-size: CosmicFontSettings.body.font-size; |
|---|
| 66 | font-weight: CosmicFontSettings.body.font-weight; |
|---|
| 67 | padding-left: 16px; |
|---|
| 68 | padding-right: 16px; |
|---|
| 69 | spacing: 8px; |
|---|
| 70 | sub-menu-icon: @image-url("_arrow_forward.svg" ); |
|---|
| 71 | icon-size: 16px; |
|---|
| 72 | } |
|---|
| 73 | } |
|---|
| 74 | } |
|---|
| 75 | |
|---|
