Repository navigation
Feature: Re-design user interface - #3702
Open
BornToBeRoot wants to merge 180 commits into
Open
BornToBeRoot wants to merge 180 commits into
BornToBeRoot wants to merge 180 commits into
Conversation
MahApps draws DisabledVisualElement over a disabled ComboBox, TextBox, PasswordBox and NumericUpDown, filled with MahApps.Brushes.Control.Disabled (#A5FFFFFF in every theme) - a light gray veil, worst in the dark theme (e.g. inputs disabled while a scan runs). The default styles hide the overlay (brush transparent in Style.Resources, also for custom themes) and set Opacity 0.55 instead, like DisabledTextBlock and the MahApps DropDownButton. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
DefaultButton (and HighlightedButton, ImageButton, ... based on it) set the background to Gray8 when disabled, a highlighted button lost its accent and MahApps Flat set the text to Gray2. Keep background and foreground and dim the button (Opacity 0.55), like the inputs (D1.1). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…oBox (D1.3) The title bar ComboBox overrode MahApps.Brushes.Control.Disabled with Gray8 to soften the overlay. DefaultComboBox now hides the overlay and dims the control (D1.1), the override would bring the gray veil back. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
AppearanceManager sets Brushes.Control.MouseOver / Brushes.Control.Pressed on every theme change (also custom themes): the theme foreground with 8 % / 12 % opacity. DefaultButton uses them instead of Gray10 / Gray9 (Gray9 = #5EC9C9C9, a light gray when a button is clicked in the dark theme). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Not editable: mouse over uses Brushes.Control.MouseOver instead of Gray9 (style trigger, wins over the template trigger). The drop-down toggle (copy of MahApps.Styles.ToggleButton.ComboBoxDropDown 2.4.11 in the Style.Resources of DefaultComboBox) uses the subtle brushes instead of Gray5 (arrow mouse over), Gray3 / Gray7 (pressed). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…g (D1.8)
About 25 inputs set IsReadOnly="{Binding IsRunning}" (IP Scanner, Port
Scanner, Ping Monitor, Traceroute, DNS Lookup, SNMP, Whois, ...).
IsReadOnly only blocks typing: the history could still be selected via
the drop-down, Up/Down, Page Up/Down, F4 or Alt+Up/Down, and on a
non-editable ComboBox (SNMP version / mode) it had no effect at all.
New ComboBoxReadOnlyBehavior (enabled in DefaultComboBox) blocks these
keys and typing to select (not editable) while read-only and closes the
drop-down if it is opened anyway. The drop-down toggle is not hit-test
visible while read-only (arrow dimmed), the mouse over background is
not shown. The ComboBox keeps the focus, the text can be selected and
copied; Tab, Enter and Esc (cancel) still work.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…boBox (D1.8) An editable ComboBox selects the next / previous entry in its own OnPreviewKeyDown, which runs before handlers added to the instance. Block the keys in a class handler of ComboBox (runs before it), only for ComboBoxes with PreventSelectionWhenReadOnly. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
AppearanceManager sets Brushes.Status.Success / Warning / Error on every theme change (also custom themes, by their base color scheme). Dark keeps the colors of the application (#badc58, #f1b856, #b95353), light uses a darker green (#558b16) and orange (#b06d00) - the old ones had a contrast of 1.6:1 / 1.8:1 on white. Error stays #b95353 (4.75:1 / 3.2:1). Replaces the hard-coded colors in the styles (status / help rectangles, error text), the validation template, the views (IP Scanner, Port Scanner, Ping Monitor, WiFi, Firewall, profile import, language, run command), the close button / menu item of the main window and the notification window. Chart / map colors are unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ack (D2.2) New Resources/Styles/Theme.xaml (theme-independent design resources, merged before the styles) with Fonts.Family.Mono = "Cascadia Mono, Consolas": Cascadia Mono ships with Windows 11, Windows 10 falls back to Consolas. Used instead of the hard-coded Consolas (ConsoleTextBlock, ConsoleTextBox, run command, Network Interface). The fonts of PowerShell and PuTTY (console settings) are unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ds (D2.3) IP / MAC addresses, hostnames, ports, BSSID, OIDs, servers, subnets, DNS records and RDAP ranges / digests use Fonts.Family.Mono (Cascadia Mono, Consolas) in the grids of IP Scanner, Port Scanner, Traceroute, DNS Lookup, SNTP Lookup, WiFi, Connections, Listeners, Neighbor Table, Firewall, Hosts File Editor, Subnet Calculator, Lookup, SNMP, RDAP, profiles, profile import result and the settings (DNS / SNTP servers, port profiles, OID profiles). Names, descriptions, vendors, states and times stay in the UI font. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Inputs for hosts, IP / MAC addresses, subnets, gateways, DNS servers, ports, servers, OIDs, URLs and DNS suffixes use Fonts.Family.Mono - every input whose watermark is such an example (StaticStrings.Example*) in the tools, connect dialogs, profile / group dialogs and settings, plus the RDAP query, the SNMP OID and the Whois domain. Usernames, domains of credentials, paths, names, SSIDs and baud rates stay in the UI font. Raw output of Whois and RDAP (JSON) uses it too. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Network Interface (MAC, IPv4 / IPv6 addresses, gateways, DHCP and DNS servers, CIDR), Dashboard network connection (IPv4 / IPv6 / DNS of computer, router, internet), Subnet Calculator results (calculator and wide subnet), Discovery Protocol (port, IP address, management), IP Geolocation (queried IP) and WiFi BSSID (details, channel tooltip) use Fonts.Family.Mono. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Inputs without a technical watermark that were missed: Web Console URL, DNS server of DNS Lookup (tool, profile, group), SNMP OID (profile, group, OID profile), LDAP server of the AD import, DNS suffix of Network Interface, server / port of the server profile dialog, the IP addresses of the Dashboard widgets (IP geolocation, DNS resolver). Credential domains (Windows, Remote Desktop, WiFi, RD gateway) and the interface name of Discovery Protocol stay in the UI font. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Theme.xaml: CornerRadius.Control (4), CornerRadius.Control.Inner (3, element inside a 1 px border) and CornerRadius.Overlay (8, menus). DefaultButton (and all buttons based on it), DropDownButton (+ inner button), ComboBox, TextBox, BrowseFolderTextBox, PasswordBox and NumericUpDown use mah:ControlsHelper.CornerRadius = 4. The search box (underline only) stays square. The mouse over background of the ComboBox arrow (Border instead of Grid) and the validation error triangle follow the rounded top / right corner. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…s (D3.3) TextBox (default, search, browse folder), ComboBox, PasswordBox and NumericUpDown: the border is the accent color while the input has the focus (was Gray8 = no change, or the theme foreground in MahApps) and Brushes.Control.Border.MouseOver (theme foreground with 35 % opacity, set by AppearanceManager) when the mouse is over it (was white / black for ComboBox, TextBox). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
FocusVisual.Ring (Theme.xaml): 2 px accent ring with a 1 px gap around the control, rounded like the controls. Used by DefaultButton (instead of the dotted rectangle of MahApps Flat), the DropDownButton and as system default focus visual (SystemParameters.FocusVisualStyleKey) for the controls that use it (e.g. RadioButton, list items, clean buttons of the main window). Only shown for keyboard focus (Tab). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
DefaultToolTip uses the MahApps template (2.4.11) with CornerRadius.Control (4), WrapToolTip (help / warning / error) too. DefaultContextMenu (all context menus and the menus of the drop-down buttons) uses the MahApps template with CornerRadius.Overlay (8) for the border and the shadow, and a padding of 4 above / below the items. Submenus and the drop-down list of the ComboBox keep the square popup of MahApps (would need a copy of the MenuItem / ComboBox template). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…tooltip (D3.5) Hard-coded radii (2: tables in help tooltips, 3: navigation tooltip and run command chips, 5: tags in the profile dialog) use CornerRadius.Control (4) like the controls. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…g (D3) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Primary (HighlightedButton): accent fill, unchanged. - Secondary (DefaultButton, ImageWithTextButton): subtle fill instead of a 1 px Gray8 border (Brushes.Button.Background / MouseOver / Pressed, theme foreground with 6 / 10 / 14 % opacity, set by AppearanceManager). MinWidth 150 -> 100 (padding 10 of MahApps Flat). - Icon-only (ImageButton, DropDownButton): transparent without border, Brushes.Control.MouseOver / Pressed on mouse over / click. The inner button of the drop-down button uses the full corner radius (no outer border anymore). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
FocusVisual.Ring uses Gray5 - the accent color was too prominent. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The padding of 4 above / below the items looked like empty space. Without padding the square highlight of the first / last item would stick out of a radius of 8, the menu uses CornerRadius.Control (4) like the tooltips. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Chart tooltips (bandwidth, ping time, speed test, WiFi channel) and the validation error popup: CornerRadius.Control (4), the popup of the validation error allows transparency (no black corners). - Profile filter (tags) popup in the tools and in the profiles settings: AllowsTransparency + CornerRadius.Overlay (8). - Title bar "Run command..." box and the key hints of the run command dialog: CornerRadius.Control. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
TextBox (default, search, browse folder), ComboBox, PasswordBox and NumericUpDown use Gray5 while they have the focus, like the keyboard focus ring (D3.4). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The scrollbar went from 25 % to 100 % opacity on mouse over and the MahApps thumb (Gray5) got a white overlay of 60 % (mouse over) / 80 % (drag) - almost white in the dark theme. Mouse over now 60 % opacity, own thumb style (MahApps.Styles.Thumb.ScrollBar in the Style.Resources, used by the MahApps template via DynamicResource): rounded (CornerRadius.Control), 80 % opacity, 100 % on mouse over / drag, no overlay. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…icrosoft Store User: the PowerShell profile isn't updated with the path ...\AppData\Local\Microsoft\WindowsApps\Microsoft.PowerShell_8wekyb3d8bbwe\pwsh.exe. The console (conhost) reads its settings from HKCU\Console\<title>, the title is the path of the started executable. This path is an App Execution Alias of the Store app, which starts the real executable in C:\Program Files\WindowsApps\Microsoft.PowerShell_7.x.x.0_x64__8wekyb3d8bbwe\pwsh.exe - the key written for the alias is not used. The workaround of #3223 only handles the general alias ...\WindowsApps\pwsh.exe. PowerShell.WriteDefaultProfileToRegistry now also writes the profile for the real path of an alias (any path in %LocalAppData%\Microsoft\WindowsApps): resolved once per start of the application by starting the alias with "(Get-Process -Id $PID).Path" (the real path contains the version and changes with updates, so it is not saved), cached. The host view model writes the profile in the background (the alias start takes a moment). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ft Store Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The library was removed in acf231c (own progress styles), but its license file was still copied to the output and shipped. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The icons of the application come from five MahApps icon packs (Material, Modern, FontAwesome, MaterialLight, Octicons) with different styles. They will be replaced by Lucide (https://lucide.dev), modern line icons with one stroke weight. The Lucide pack of MahApps is older and has the strokes converted to fixed filled shapes, so the original SVG files are imported instead: - Scripts/Create-LucideIcons.ps1 downloads lucide-static (npm, version as parameter), converts the used icons (path, circle, rect, line, polyline, polygon, ellipse) to one WPF path geometry each and creates LucideIcons.cs (enum LucideIconKind + data). Custom icons: Wi-Fi signal levels with lock from the parts of wifi-lock, GitHub / X logos from Simple Icons (CC0, Lucide has no brand icons). It also copies the license. - LucideIcon (NETworkManager.Controls) draws the lines with a pen (round caps / joins, default 1.75 instead of 2 units, calmer at 16 px) in the foreground, scaled from 24 x 24. The whole box is part of the drawing, so every icon has the same size and position in a VisualBrush (opacity mask of a rectangle, used everywhere). {icons:Lucide Kind=...} creates it in XAML like {iconPacks:Material Kind=...}. - License: ISC (incl. MIT for the icons derived from Feather), shipped as Licenses/Lucide.txt, listed on the About page and in the README. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The 166 icons of five MahApps icon packs (Material, Modern, FontAwesome, MaterialLight,
Octicons) are replaced by 129 Lucide icons in one style (lines, stroke 1.75): tools in
the navigation, run command, settings, profiles, toolbars, context menus, messages and
status icons. Mapping reviewed by the maintainer, e.g. Port Scanner scan-line (Network
Interface keeps ethernet-port), Ping Monitor radar, Traceroute route, Firewall
brick-wall-fire; Windows (no brand icons in Lucide) app-window. Wi-Fi signal: Lucide has
four levels, 0 and 1 bar both show wifi-zero.
XAML uses {icons:Lucide Kind=...} (xmlns:icons = NETworkManager.Controls) instead of
{iconPacks:... Kind=...}, C# LucideIcon / LucideIconKind. NETworkManager.Models references
NETworkManager.Controls for the icons of the tools (ApplicationManager). The packages
MahApps.Metro.IconPacks.* are removed.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The icon packs are no longer used (all icons from Lucide): library entry, license file, description string and README entry removed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The icons come from Lucide only: how to use them in XAML / C#, how to add an icon (Create-LucideIcons.ps1) and the icon names of the context menu actions. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The design refresh introduced themes / accents, theme-dependent brushes, fonts, corner radii, the box layout, button / input / progress styles, Lucide icons and motion rules. AGENTS.md now describes them (replaces the short "UI Theming" section), so new UI uses the existing tokens and styles instead of local values. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The open port status (IP Scanner port details, Port Scanner) used the same old icon as the Port Scanner tool and became scan-line, the tool icon. A port is ethernet-port (closed stays unplug); the "Open in Port Scanner" menu items keep the tool icon. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…state (D10.1) Status values in lists were plain or colored text. A small dot in the status color with the text in the normal color is easy to scan and stays calm in long lists (user decision: dot + text instead of tinted chips): - Firewall Action: allow green, block red (was the colored text). - Connections State: established green, connecting (SYN sent / received) yellow, others gray. - Neighbor Table State: reachable green, stale / delay / probe yellow, incomplete / unreachable red, permanent gray. Style StatusDot (Ellipse, level as Tag) + StatusLevel and one converter per state type. Template columns keep the text for copying (ClipboardContentBinding). The Port Scanner already has a status icon column, so its status stays text. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Empty areas only showed a centered gray text. They now show a gray icon (40) above the existing message (user decision: icon + message, no new texts / translations): no firewall rules (brick-wall-fire), no Wi-Fi networks / adapters (wifi-off, new icon), no enabled network adapters (ethernet-port), Discovery Protocol before / without packets (arrow-left-right), path of PuTTY / PowerShell / TigerVNC not configured (settings), WebView2 / Windows SDK not available and profile file errors (circle-alert), Wi-Fi access not available (shield-off). The "restart as administrator" notices below the lists get a smaller shield (24). EmptyStateMessage (NETworkManager.Controls: Text, Icon, IconSize) with the implicit style DefaultEmptyStateMessage (TextBlockStyles.xaml, text like MessageTextBlock). Status lines, loading texts and the "add a tab" / "unlock" buttons are unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Up and down used cable and unplug (no matching pair), pending the same cable as up (only the color differed). Hosts now use one set (user decision): monitor-check (up), monitor-x (down), monitor-dot (pending) - IP Scanner status column, Ping Monitor hosts and the notification. Mixed up / down notifications keep network. cable is no longer used and removed from the imported icons. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The error color #b95353 was the same in both themes. With the thin Lucide lines, error icons on dark backgrounds (e.g. the validation of the run command) were hard to read, while the green and yellow are bright. Dark themes now use #e5605a (about as bright as the other status colors there), light themes keep #b95353. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The MahApps icons were stretched to their outline, so a plus filled its 16 px rectangle. Lucide keeps the 24 box: the plus (14 units), X and chevrons (12 units) looked clearly smaller than before and than the other icons (about 20 units), e.g. the "+" to add a profile (user). LucideIcon draws these icons in a box of 19.2 units, so they look like 20 px in a 16 px rectangle (user decision: larger, not thicker). No layout changes, the Wi-Fi levels keep their positions. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The "restart as administrator" notices below the lists (Firewall, Hosts File Editor, Neighbor Table, Network Interface, Discovery Protocol) and the group boxes (Network Interface configuration, profile dialog, Remote Desktop settings) still had square corners and the old Gray8 border. They use the card radius (8) like the boxes, the group boxes the surface border. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The vertical "Profiles" label was still 18 (old header size). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…her messages (D7) They used the header style in gray (16 SemiBold), the other messages in empty areas use MessageTextBlock (16 regular gray). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Separators, tab / grid header / splitter lines, popups, tooltips, dialog and chart borders still used MahApps Gray8 (112 places), the boxes and cards Brushes.Surface.Border (foreground 10 %). They now all use Brushes.Surface.Border, also the submenus (set by AppearanceManager) and the chart separators (user decision: unify). Borders of inputs, check boxes and radio buttons keep Gray8 (more contrast for controls), as do the window glow, the tag background and the command line window. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
They still had their own style: a full gray overlay (Gray8) and a square dialog. They use DefaultChildWindow now (rounded with shadow, the usual dark overlay, zoom animation), 650 wide without title bar as before (user decision). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Contributor
|
Tick the box to add this pull request to the merge queue (same as
|
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Complete re-design of the userinterface.
See commits.
Related issue
#3609
Close #3055
Type of change