fix(header_bar): increase compact height
Increases Compact header height to 40 (from 36), to better accommodate larger widgets (e.g. the search bar). This makes it distinct from the SSD header, which is now addressed by the `_` match case. Also makes the horizontal header padding fixed at 8, so that the app window padding can also be 8.
This commit is contained in:
Vukašin Vojinović
Michael Murphy
parent
228eb4d70d
commit
e645dee2f0
8 changed files with 37 additions and 29 deletions
|
|
@ -1,10 +1,14 @@
|
|||
use crate::Spacing;
|
||||
use serde::{Deserialize, Serialize};
|
||||
|
||||
/// Density options for the Cosmic theme
|
||||
#[derive(Copy, Clone, Debug, Default, Eq, PartialEq, Serialize, Deserialize)]
|
||||
pub enum Density {
|
||||
/// Lower padding/spacing of elements
|
||||
Compact,
|
||||
/// Higher padding/spacing of elements
|
||||
Spacious,
|
||||
/// Standard padding/spacing of elements
|
||||
#[default]
|
||||
Standard,
|
||||
}
|
||||
|
|
|
|||
10
res/icons/navbar-closed-symbolic.svg
Normal file
10
res/icons/navbar-closed-symbolic.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="path-1-inside-1_3277_252" fill="white">
|
||||
<rect x="1" y="2" width="14" height="12" rx="1"/>
|
||||
</mask>
|
||||
<rect x="1" y="2" width="14" height="12" rx="1" stroke="#232323" stroke-width="4" mask="url(#path-1-inside-1_3277_252)"/>
|
||||
<rect x="6" y="2" width="2" height="12" fill="#232323"/>
|
||||
<rect x="4" y="5" width="1" height="1" fill="#232323"/>
|
||||
<rect x="4" y="7" width="1" height="1" fill="#232323"/>
|
||||
<rect x="4" y="9" width="1" height="1" fill="#232323"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 558 B |
8
res/icons/navbar-open-symbolic.svg
Normal file
8
res/icons/navbar-open-symbolic.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="path-1-inside-1_3277_253" fill="white">
|
||||
<rect x="1" y="2" width="14" height="12" rx="1"/>
|
||||
</mask>
|
||||
<rect x="1" y="2" width="14" height="12" rx="1" stroke="#232323" stroke-width="4" mask="url(#path-1-inside-1_3277_253)"/>
|
||||
<rect x="5" y="2" width="2" height="12" fill="#232323"/>
|
||||
<path d="M7.99983 8.02603L10.9998 5C10.9998 5 11.5568 4.55672 12 5.00002C12.4432 5.44331 12 6.00002 12 6.00002L10 8.02603L12 10C12 10 12.5 10.5 12 11C11.5 11.5 11 11 11 11L7.99983 8.02603Z" fill="#232323"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 597 B |
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
use std::collections::HashMap;
|
||||
|
||||
use crate::{config::CosmicTk, widget::nav_bar};
|
||||
use crate::widget::nav_bar;
|
||||
use cosmic_config::CosmicConfigEntry;
|
||||
use cosmic_theme::ThemeMode;
|
||||
use iced::window;
|
||||
|
|
|
|||
|
|
@ -48,8 +48,6 @@ pub mod message {
|
|||
pub use self::command::Command;
|
||||
pub use self::core::Core;
|
||||
pub use self::settings::Settings;
|
||||
use crate::config::interface_density;
|
||||
use crate::cosmic_theme::Density;
|
||||
use crate::prelude::*;
|
||||
use crate::theme::THEME;
|
||||
use crate::widget::{context_drawer, horizontal_space, id_container, menu, nav_bar, popover};
|
||||
|
|
@ -654,11 +652,6 @@ impl<App: Application> ApplicationExt for App {
|
|||
.focused_window()
|
||||
.is_some_and(|i| i == self.main_window_id());
|
||||
|
||||
let padding = match interface_density() {
|
||||
Density::Compact => 2,
|
||||
_ => 8,
|
||||
};
|
||||
|
||||
let content_row = crate::widget::row::with_children({
|
||||
let mut widgets = Vec::with_capacity(4);
|
||||
|
||||
|
|
@ -739,7 +732,7 @@ impl<App: Application> ApplicationExt for App {
|
|||
let content: Element<_> = if core.window.content_container {
|
||||
content_row
|
||||
.apply(crate::widget::container)
|
||||
.padding([0, padding, padding, padding])
|
||||
.padding([0, 8, 8, 8])
|
||||
.width(iced::Length::Fill)
|
||||
.height(iced::Length::Fill)
|
||||
.style(crate::theme::Container::WindowBackground)
|
||||
|
|
|
|||
|
|
@ -277,10 +277,10 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> {
|
|||
end.push(widget::horizontal_space(Length::Fixed(12.0)).into());
|
||||
end.push(self.window_controls());
|
||||
|
||||
let (height, padding) = match self.density.unwrap_or_else(crate::config::header_size) {
|
||||
Density::Compact => (36.0, 2.0),
|
||||
Density::Spacious => (48.0, 8.0),
|
||||
Density::Standard => (48.0, 8.0),
|
||||
let height = match self.density.unwrap_or_else(crate::config::header_size) {
|
||||
Density::Compact => 40.0,
|
||||
Density::Spacious => 48.0,
|
||||
Density::Standard => 48.0,
|
||||
};
|
||||
|
||||
// Creates the headerbar widget.
|
||||
|
|
@ -316,8 +316,8 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> {
|
|||
)
|
||||
.align_items(iced::Alignment::Center)
|
||||
.height(Length::Fixed(height))
|
||||
.padding(padding)
|
||||
.spacing(padding)
|
||||
.padding([0, 8])
|
||||
.spacing(8)
|
||||
.apply(widget::container)
|
||||
.style(crate::theme::Container::HeaderBar {
|
||||
focused: self.focused,
|
||||
|
|
@ -387,13 +387,6 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> {
|
|||
}};
|
||||
}
|
||||
|
||||
let density = self.density.unwrap_or_else(crate::config::header_size);
|
||||
let spacing = if matches!(density, Density::Compact) {
|
||||
2
|
||||
} else {
|
||||
8
|
||||
};
|
||||
|
||||
widget::row::with_capacity(3)
|
||||
.push_maybe(
|
||||
self.on_minimize
|
||||
|
|
@ -410,7 +403,7 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> {
|
|||
.take()
|
||||
.map(|m| icon!("window-close-symbolic", 16, m)),
|
||||
)
|
||||
.spacing(spacing)
|
||||
.spacing(8)
|
||||
.apply(widget::container)
|
||||
.height(Length::Fill)
|
||||
.center_y()
|
||||
|
|
|
|||
|
|
@ -29,12 +29,12 @@ impl<'a, Message: 'static + Clone> From<NavBarToggle<Message>> for Element<'a, M
|
|||
fn from(nav_bar_toggle: NavBarToggle<Message>) -> Self {
|
||||
let icon = if nav_bar_toggle.active {
|
||||
widget::icon::from_svg_bytes(
|
||||
&include_bytes!("../../res/icons/close-menu-symbolic.svg")[..],
|
||||
&include_bytes!("../../res/icons/navbar-open-symbolic.svg")[..],
|
||||
)
|
||||
.symbolic(true)
|
||||
} else {
|
||||
widget::icon::from_svg_bytes(
|
||||
&include_bytes!("../../res/icons/open-menu-symbolic.svg")[..],
|
||||
&include_bytes!("../../res/icons/navbar-closed-symbolic.svg")[..],
|
||||
)
|
||||
.symbolic(true)
|
||||
};
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ where
|
|||
let spacing = THEME.lock().unwrap().cosmic().space_xxs();
|
||||
|
||||
TextInput::new(placeholder, value)
|
||||
.padding([0, spacing, 0, spacing])
|
||||
.padding([0, spacing])
|
||||
.style(crate::theme::TextInput::Search)
|
||||
.leading_icon(
|
||||
crate::widget::icon::from_name("system-search-symbolic")
|
||||
|
|
@ -125,7 +125,7 @@ where
|
|||
{
|
||||
let spacing = THEME.lock().unwrap().cosmic().space_xxs();
|
||||
let mut input = TextInput::new(placeholder, value)
|
||||
.padding([0, spacing, 0, spacing])
|
||||
.padding([0, spacing])
|
||||
.style(crate::theme::TextInput::Default)
|
||||
.leading_icon(
|
||||
crate::widget::icon::from_name("system-lock-screen-symbolic")
|
||||
|
|
@ -170,7 +170,7 @@ where
|
|||
|
||||
TextInput::new(placeholder, value)
|
||||
.style(crate::theme::TextInput::Inline)
|
||||
.padding([spacing, spacing, spacing, spacing])
|
||||
.padding(spacing)
|
||||
}
|
||||
|
||||
#[cfg(feature = "wayland")]
|
||||
|
|
@ -246,7 +246,7 @@ where
|
|||
select_on_focus: false,
|
||||
font: None,
|
||||
width: Length::Fill,
|
||||
padding: [spacing, spacing, spacing, spacing].into(),
|
||||
padding: spacing.into(),
|
||||
size: None,
|
||||
helper_size: 10.0,
|
||||
helper_line_height: text::LineHeight::Absolute(14.0.into()),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue