mirror of
https://github.com/johrpan/musicus.git
synced 2025-10-25 20:37:24 +02:00
Use simple colors for program designs
This commit is contained in:
parent
a70b7b5453
commit
e2c6e85097
5 changed files with 123 additions and 57 deletions
|
|
@ -39,17 +39,17 @@
|
|||
</key>
|
||||
<key name="program1" type="s">
|
||||
<!-- Translators: Configuration for the default programs in JSON. Please only translate the values of "title" and "description". -->
|
||||
<default l10n="messages">'{"title":"Just play some music","description":"Randomly select some music. Customize programs using the button in the top right.","design":"Program1","prefer_recently_added":0.0,"prefer_least_recently_played":0.1,"avoid_repeated_composers":60,"avoid_repeated_instruments":60,"play_full_recordings":true}'</default>
|
||||
<default l10n="messages">'{"title":"Just play some music","description":"Randomly select some music. Customize programs using the button in the top right.","design":"Slate","prefer_recently_added":0.0,"prefer_least_recently_played":0.1,"avoid_repeated_composers":60,"avoid_repeated_instruments":60,"play_full_recordings":true}'</default>
|
||||
<summary>Default settings for program 1</summary>
|
||||
</key>
|
||||
<key name="program2" type="s">
|
||||
<!-- Translators: Configuration for the default programs in JSON. Please only translate the values of "title" and "description". -->
|
||||
<default l10n="messages">'{"title":"What\'s new?","description":"Recordings that you recently added to your music library.","design":"Program2","prefer_recently_added":1.0,"prefer_least_recently_played":0.0,"avoid_repeated_composers":60,"avoid_repeated_instruments":60,"play_full_recordings":true}'</default>
|
||||
<default l10n="messages">'{"title":"What\'s new?","description":"Recordings that you recently added to your music library.","design":"Orange","prefer_recently_added":1.0,"prefer_least_recently_played":0.0,"avoid_repeated_composers":60,"avoid_repeated_instruments":60,"play_full_recordings":true}'</default>
|
||||
<summary>Default settings for program 2</summary>
|
||||
</key>
|
||||
<key name="program3" type="s">
|
||||
<!-- Translators: Configuration for the default programs in JSON. Please only translate the values of "title" and "description". -->
|
||||
<default l10n="messages">'{"title":"A long time ago","description":"Works that you haven\'t listened to for a long time.","design":"Program3","prefer_recently_added":0.0,"prefer_least_recently_played":1.0,"avoid_repeated_composers":60,"avoid_repeated_instruments":60,"play_full_recordings":true}'</default>
|
||||
<default l10n="messages">'{"title":"A long time ago","description":"Works that you haven\'t listened to for a long time.","design":"Purple","prefer_recently_added":0.0,"prefer_least_recently_played":1.0,"avoid_repeated_composers":60,"avoid_repeated_instruments":60,"play_full_recordings":true}'</default>
|
||||
<summary>Default settings for program 3</summary>
|
||||
</key>
|
||||
</schema>
|
||||
|
|
|
|||
|
|
@ -59,15 +59,6 @@
|
|||
.program-tile {
|
||||
padding: 12px;
|
||||
min-width: 200px;
|
||||
transition: transform 100ms;
|
||||
}
|
||||
|
||||
.program-tile:hover {
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.program-tile:active {
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
.program-tile .title {
|
||||
|
|
@ -85,34 +76,49 @@
|
|||
box-shadow: 0 0 0 3px var(--accent-bg-color);
|
||||
}
|
||||
|
||||
.program-1 {
|
||||
.blue {
|
||||
color: white;
|
||||
background: linear-gradient(-225deg, #ac32e4 0%, #7918f2 48%, #4801ff 100%);
|
||||
background-color: var(--accent-blue);
|
||||
}
|
||||
|
||||
.program-2 {
|
||||
.teal {
|
||||
color: white;
|
||||
background: linear-gradient(145deg, #f12711, #f5af19);
|
||||
background-color: var(--accent-teal);
|
||||
}
|
||||
|
||||
.program-3 {
|
||||
.green {
|
||||
color: white;
|
||||
background: linear-gradient(-80deg, #ad5389, #3c1053);
|
||||
background-color: var(--accent-green);
|
||||
}
|
||||
|
||||
.program-4 {
|
||||
.yellow {
|
||||
color: white;
|
||||
background: linear-gradient(140deg, #136797, #0b486b);
|
||||
background-color: var(--accent-yellow);
|
||||
}
|
||||
|
||||
.program-5 {
|
||||
.orange {
|
||||
color: white;
|
||||
background: linear-gradient(100deg, #6a9113, #141517);
|
||||
background-color: var(--accent-orange);
|
||||
}
|
||||
|
||||
.program-6 {
|
||||
.red {
|
||||
color: white;
|
||||
background: linear-gradient(120deg, #870000, #190a05);
|
||||
background-color: var(--accent-red);
|
||||
}
|
||||
|
||||
.pink {
|
||||
color: white;
|
||||
background-color: var(--accent-pink);
|
||||
}
|
||||
|
||||
.purple {
|
||||
color: white;
|
||||
background-color: var(--accent-purple);
|
||||
}
|
||||
|
||||
.slate {
|
||||
color: white;
|
||||
background-color: var(--accent-slate);
|
||||
}
|
||||
|
||||
.selector>contents {
|
||||
|
|
|
|||
|
|
@ -69,66 +69,110 @@ template $MusicusProgramEditor: Adw.NavigationPage {
|
|||
|
||||
Gtk.ToggleButton {
|
||||
action-name: "program.set-design";
|
||||
action-target: "'program-1'";
|
||||
action-target: "'default'";
|
||||
|
||||
styles [
|
||||
"program-design-button",
|
||||
"program-1",
|
||||
"default",
|
||||
"circular",
|
||||
]
|
||||
}
|
||||
|
||||
Gtk.ToggleButton {
|
||||
action-name: "program.set-design";
|
||||
action-target: "'program-2'";
|
||||
action-target: "'blue'";
|
||||
|
||||
styles [
|
||||
"program-design-button",
|
||||
"program-2",
|
||||
"blue",
|
||||
"circular",
|
||||
]
|
||||
}
|
||||
|
||||
Gtk.ToggleButton {
|
||||
action-name: "program.set-design";
|
||||
action-target: "'program-3'";
|
||||
action-target: "'teal'";
|
||||
|
||||
styles [
|
||||
"program-design-button",
|
||||
"program-3",
|
||||
"teal",
|
||||
"circular",
|
||||
]
|
||||
}
|
||||
|
||||
Gtk.ToggleButton {
|
||||
action-name: "program.set-design";
|
||||
action-target: "'program-4'";
|
||||
action-target: "'green'";
|
||||
|
||||
styles [
|
||||
"program-design-button",
|
||||
"program-4",
|
||||
"green",
|
||||
"circular",
|
||||
]
|
||||
}
|
||||
|
||||
Gtk.ToggleButton {
|
||||
action-name: "program.set-design";
|
||||
action-target: "'program-5'";
|
||||
action-target: "'yellow'";
|
||||
|
||||
styles [
|
||||
"program-design-button",
|
||||
"program-5",
|
||||
"yellow",
|
||||
"circular",
|
||||
]
|
||||
}
|
||||
|
||||
Gtk.ToggleButton {
|
||||
action-name: "program.set-design";
|
||||
action-target: "'program-6'";
|
||||
action-target: "'orange'";
|
||||
|
||||
styles [
|
||||
"program-design-button",
|
||||
"program-6",
|
||||
"orange",
|
||||
"circular",
|
||||
]
|
||||
}
|
||||
|
||||
Gtk.ToggleButton {
|
||||
action-name: "program.set-design";
|
||||
action-target: "'red'";
|
||||
|
||||
styles [
|
||||
"program-design-button",
|
||||
"red",
|
||||
"circular",
|
||||
]
|
||||
}
|
||||
|
||||
Gtk.ToggleButton {
|
||||
action-name: "program.set-design";
|
||||
action-target: "'pink'";
|
||||
|
||||
styles [
|
||||
"program-design-button",
|
||||
"pink",
|
||||
"circular",
|
||||
]
|
||||
}
|
||||
|
||||
Gtk.ToggleButton {
|
||||
action-name: "program.set-design";
|
||||
action-target: "'purple'";
|
||||
|
||||
styles [
|
||||
"program-design-button",
|
||||
"purple",
|
||||
"circular",
|
||||
]
|
||||
}
|
||||
|
||||
Gtk.ToggleButton {
|
||||
action-name: "program.set-design";
|
||||
action-target: "'slate'";
|
||||
|
||||
styles [
|
||||
"program-design-button",
|
||||
"slate",
|
||||
"circular",
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -168,12 +168,16 @@ impl Default for Program {
|
|||
#[derive(glib::Enum, Serialize, Deserialize, Eq, PartialEq, Clone, Copy, Debug)]
|
||||
#[enum_type(name = "MusicusProgramDesign")]
|
||||
pub enum ProgramDesign {
|
||||
Program1,
|
||||
Program2,
|
||||
Program3,
|
||||
Program4,
|
||||
Program5,
|
||||
Program6,
|
||||
Default,
|
||||
Blue,
|
||||
Teal,
|
||||
Green,
|
||||
Yellow,
|
||||
Orange,
|
||||
Red,
|
||||
Pink,
|
||||
Purple,
|
||||
Slate,
|
||||
}
|
||||
|
||||
impl ProgramDesign {
|
||||
|
|
@ -184,19 +188,23 @@ impl ProgramDesign {
|
|||
|
||||
impl Default for ProgramDesign {
|
||||
fn default() -> Self {
|
||||
Self::Program1
|
||||
Self::Default
|
||||
}
|
||||
}
|
||||
|
||||
impl ToString for ProgramDesign {
|
||||
fn to_string(&self) -> String {
|
||||
String::from(match self {
|
||||
ProgramDesign::Program1 => "program-1",
|
||||
ProgramDesign::Program2 => "program-2",
|
||||
ProgramDesign::Program3 => "program-3",
|
||||
ProgramDesign::Program4 => "program-4",
|
||||
ProgramDesign::Program5 => "program-5",
|
||||
ProgramDesign::Program6 => "program-6",
|
||||
ProgramDesign::Default => "default",
|
||||
ProgramDesign::Blue => "blue",
|
||||
ProgramDesign::Teal => "teal",
|
||||
ProgramDesign::Green => "green",
|
||||
ProgramDesign::Yellow => "yellow",
|
||||
ProgramDesign::Orange => "orange",
|
||||
ProgramDesign::Red => "red",
|
||||
ProgramDesign::Pink => "pink",
|
||||
ProgramDesign::Purple => "purple",
|
||||
ProgramDesign::Slate => "slate",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -206,12 +214,16 @@ impl FromStr for ProgramDesign {
|
|||
|
||||
fn from_str(s: &str) -> std::result::Result<Self, ()> {
|
||||
match s {
|
||||
"program-1" => Ok(ProgramDesign::Program1),
|
||||
"program-2" => Ok(ProgramDesign::Program2),
|
||||
"program-3" => Ok(ProgramDesign::Program3),
|
||||
"program-4" => Ok(ProgramDesign::Program4),
|
||||
"program-5" => Ok(ProgramDesign::Program5),
|
||||
"program-6" => Ok(ProgramDesign::Program6),
|
||||
"default" => Ok(ProgramDesign::Default),
|
||||
"blue" => Ok(ProgramDesign::Blue),
|
||||
"teal" => Ok(ProgramDesign::Teal),
|
||||
"green" => Ok(ProgramDesign::Green),
|
||||
"yellow" => Ok(ProgramDesign::Yellow),
|
||||
"orange" => Ok(ProgramDesign::Orange),
|
||||
"red" => Ok(ProgramDesign::Red),
|
||||
"pink" => Ok(ProgramDesign::Pink),
|
||||
"purple" => Ok(ProgramDesign::Purple),
|
||||
"slate" => Ok(ProgramDesign::Slate),
|
||||
_ => Err(()),
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,8 +74,12 @@ mod imp {
|
|||
}
|
||||
|
||||
fn set_program(&self, program: &Program) {
|
||||
self.obj()
|
||||
.set_css_classes(&["program-tile", &program.design().css_class()]);
|
||||
self.obj().set_css_classes(&[
|
||||
"program-tile",
|
||||
"card",
|
||||
"activatable",
|
||||
&program.design().css_class(),
|
||||
]);
|
||||
|
||||
if let Some(title) = program.title() {
|
||||
self.title_label.set_label(&title);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue