"Button Mapping"
- - -- "Each button can be assigned a function when Hypershift is off, and another function when Hypershift is on." -
-- "Assign a button to hypershift_toggle to let it switch Hypershift status." -
+{format!( "Editing {} on profile {}{}.", - mapping.button, + button_label(&mapping.button), mapping.profile, if mapping.hypershift { " with hypershift enabled" } else { "" } )} @@ -238,7 +270,7 @@ fn ButtonPanel( class:active=move || mapping_state.get().map(|item| item.category == category_name).unwrap_or(false) on:click=move |_| reset_category(category) > - {category} + {button_category_label(category)} } }).collect_view()} diff --git a/src/app/helpers/data.rs b/src/app/helpers/data.rs index 613937e..9a459e7 100644 --- a/src/app/helpers/data.rs +++ b/src/app/helpers/data.rs @@ -1,22 +1,40 @@ fn button_label(button: &str) -> &'static str { match button { - "aim" => "Aim", + "aim" => "Aim Trigger", "left" => "Left", "middle" => "Middle", "right" => "Right", "forward" => "Forward", "wheel_up" => "Wheel Up", - "middle_forward" => "Tilt Forward", + "middle_forward" => "Scroll Mode", "wheel_left" => "Wheel Left", "backward" => "Backward", "wheel_down" => "Wheel Down", - "middle_backward" => "Tilt Back", + "middle_backward" => "DPI Cycle", "wheel_right" => "Wheel Right", - "bottom" => "Bottom", + "bottom" => "Profile Button", _ => "Button", } } +fn button_category_label(category: &str) -> String { + match category { + "disabled" => "Disabled", + "mouse" => "Mouse", + "keyboard" => "Keyboard", + "macro" => "Macro", + "dpi_switch" => "DPI Switch", + "profile_switch" => "Profile Switch", + "system" => "System", + "consumer" => "Consumer", + "hypershift_toggle" => "Hypershift", + "scroll_mode_toggle" => "Scroll Mode", + "custom" => "Custom", + _ => category, + } + .to_string() +} + fn default_payload_for_category(category: &str) -> Value { match category { "disabled" => json!({}), @@ -190,4 +208,3 @@ fn calculate_sensor_params( Some((param_a, Vec::new())) } } - diff --git a/styles/panels.css b/styles/panels.css index 3bee979..a45f1b1 100644 --- a/styles/panels.css +++ b/styles/panels.css @@ -214,59 +214,120 @@ font-size: 0.78rem; } -.profile-slot-fixed { - visibility: hidden; -} - -.button-mapper-grid, -.category-grid, -.modifier-grid { - display: grid; - gap: 10px; -} - -.button-mapper-grid { - grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); - margin-bottom: 16px; -} - -.button-tile, -.category-grid button { - min-height: 40px; - border-radius: 6px; - cursor: pointer; -} - -.button-tile { - display: grid; - gap: 4px; - align-content: start; - padding: 12px; - border: 1px solid var(--color-border-subtle); - text-align: left; - background: var(--color-panel-subtle); -} - -.button-tile span { - color: var(--color-small-text); - font-size: 0.78rem; -} - -.button-tile strong, -.button-tile span, .profile-admin-list strong, .led-region-tabs button, .flash-summary span { overflow-wrap: anywhere; } -.button-tile.active { +.profile-slot-fixed { + visibility: hidden; +} + +.category-grid, +.modifier-grid { + display: grid; + gap: 10px; +} + +.mouse-assignment-layout { + display: grid; + grid-template-columns: minmax(260px, 420px); + gap: 12px; + margin-bottom: 18px; +} + +.mouse-button-picker { + display: grid; + gap: 12px; + align-content: start; +} + +.mouse-selection-summary { + display: grid; + gap: 2px; + border-bottom: 1px solid var(--color-border-subtle); + padding-bottom: 12px; +} + +.mouse-selection-summary span, +.mouse-button-row strong { + color: var(--color-small-text); + font-size: 0.75rem; + font-weight: 800; +} + +.mouse-selection-summary strong { + min-width: 0; + overflow-wrap: anywhere; + font-size: 1.25rem; + line-height: 1.2; +} + +.mouse-selection-summary em { + color: var(--color-metric); + font-style: normal; + font-weight: 800; +} + +.mouse-button-list { + display: grid; + gap: 6px; +} + +.mouse-button-row { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(76px, max-content); + gap: 10px; + align-items: center; + min-height: 34px; + border: 1px solid transparent; + border-radius: 6px; + padding: 6px 8px; + color: var(--color-secondary-text); + background: transparent; + cursor: pointer; + text-align: left; +} + +.mouse-button-row:hover, +.mouse-button-row:focus-visible { + border-color: var(--color-active); + background: var(--color-panel-subtle); +} + +.mouse-button-row.active { border-color: var(--color-active); background: var(--color-active-surface); } +.mouse-button-row span, +.mouse-button-row strong { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mouse-button-row span { + font-weight: 700; +} + +.mouse-button-row strong { + justify-self: end; + max-width: 132px; +} + .button-hypershift-toggle { - margin-bottom: 18px; + margin: 0; + border-bottom: 1px solid var(--color-border-subtle); + padding-bottom: 12px; +} + +.category-grid button { + min-height: 40px; + border-radius: 6px; + cursor: pointer; } .category-grid { @@ -497,6 +558,12 @@ max-width: 680px; } +@media (max-width: 980px) { + .mouse-assignment-layout { + grid-template-columns: 1fr; + } +} + @media (max-width: 760px) { .app-shell, .panel-grid, @@ -514,4 +581,8 @@ align-items: stretch; flex-direction: column; } + + .mouse-button-list { + grid-template-columns: 1fr; + } }