From 3aa62d5230f0db1b8bf862c7b38dbba0d799d9d2 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 14 Oct 2026 19:17:18 +0000 Subject: [PATCH] Select Color: Phosphor eyedropper icon; load button and page arrows in active-tab colours - The pipette is Phosphor Icons' "eyedropper" (regular, MIT); its licence is in assets/icons/ui/LICENSE-phosphor.txt and the SVG header. - The load-book button and the page strip's up/down arrows use the active tab's colours (background.strong and its text colour), slightly darker on hover. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_013rGmDUNr1hUf4zo1X3dak8 --- assets/icons/ui/LICENSE-phosphor.txt | 21 +++++++++++++++++++++ assets/icons/ui/eyedropper.svg | 3 ++- src/ui/color_select/picker.rs | 24 +++++++++++++++++------- 3 files changed, 40 insertions(+), 8 deletions(-) create mode 100644 assets/icons/ui/LICENSE-phosphor.txt diff --git a/assets/icons/ui/LICENSE-phosphor.txt b/assets/icons/ui/LICENSE-phosphor.txt new file mode 100644 index 000000000..78c981081 --- /dev/null +++ b/assets/icons/ui/LICENSE-phosphor.txt @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 Phosphor Icons + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/assets/icons/ui/eyedropper.svg b/assets/icons/ui/eyedropper.svg index fe34cd3f9..fd3e85c09 100644 --- a/assets/icons/ui/eyedropper.svg +++ b/assets/icons/ui/eyedropper.svg @@ -1 +1,2 @@ - + + diff --git a/src/ui/color_select/picker.rs b/src/ui/color_select/picker.rs index 157c139c0..f2421bfb7 100644 --- a/src/ui/color_select/picker.rs +++ b/src/ui/color_select/picker.rs @@ -730,7 +730,7 @@ impl ColorPicker { let load_button = |content: Element<'static, Message>| { button(content) .on_press(picker_msg(ColorPickerMsg::LoadBook)) - .style(button::secondary) + .style(tab_button_style) }; let Some(book) = self.books.get(self.book) else { return container( @@ -761,7 +761,7 @@ impl ColorPicker { .width(Length::Fill), load_button( container( - secondary_icon(crate::ui::icons::themed_handle( + tab_icon(crate::ui::icons::themed_handle( crate::ui::icons::FOLDER_OPEN )) .width(16) @@ -854,14 +854,14 @@ impl ColorPicker { .width(9) .height(5) .style(|theme: &Theme, _status| svg::Style { - color: Some(theme.palette().secondary.base.text), + color: Some(theme.palette().background.strong.text), }), ) .on_press(picker_msg(ColorPickerMsg::BookPage(page))) .width(Length::Fill) .height(18) .padding([6, 8]) - .style(button::secondary) + .style(tab_button_style) }; let strip = column![ arrow("M0 4L3.5 0L7 4z", self.book_page.saturating_sub(1)), @@ -1139,10 +1139,20 @@ fn search_box<'a>( .into() } -/// An icon in the text colour of a secondary button, so it reads on it. -fn secondary_icon<'a>(handle: svg::Handle) -> svg::Svg<'a> { +/// A small button in the colours of the active tab: the load button and +/// the page arrows. +fn tab_button_style(theme: &Theme, status: button::Status) -> button::Style { + let mut style = segment_style(theme, true, status); + if matches!(status, button::Status::Hovered | button::Status::Pressed) { + style.background = Some(theme.palette().background.stronger.color.into()); + } + style +} + +/// An icon in the active tab's text colour, for `tab_button_style`. +fn tab_icon<'a>(handle: svg::Handle) -> svg::Svg<'a> { svg(handle).style(|theme: &Theme, _status| svg::Style { - color: Some(theme.palette().secondary.base.text), + color: Some(theme.palette().background.strong.text), }) }