Control Page Redesign and UI Enhancements #356
Conversation
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
Camera View Navbar: - Add dark navbar consistent with service/macros pages - Replace Settings dropdown with direct "Show Crosshair" toggle - Toggle shows checkbox icon (checked when active) - No login button (camera doesn't require authentication) Camera Offline State: - Show friendly message when camera unavailable - Icon: video camera with ban overlay - Message: "Camera Unavailable" with instructions - Dark background (#1a1a1a) instead of pure black Layout Improvements: - Flexbox layout for proper sizing - Video centered and contained within viewport - Navbar stays fixed at top - Content area fills remaining space Files Changed: - src/pug/templates/view-camera.pug - New navbar, offline message - src/stylus/view-camera.styl - Dark navbar, offline styling - src/pug/templates/video.pug - Unchanged (included for completeness) - src/stylus/video.styl - Unchanged (included for completeness)
Navigation Bar: - Dark navbar consistent with other views (buildbotics#333 background) - File menu dropdown: Upload File, New Folder - Selection menu dropdown: Edit, 3D View, Download, Delete - Dropdown items disabled when no file selected - Login button for authenticated operations Locations Sidebar: - Clean header with "Storage" label - Home icon for local storage - USB icon for removable drives - Eject button appears on hover - Active location highlighted in blue Breadcrumbs: - Improved path display with chevron separators - Clickable path segments for navigation - Current folder highlighted - Action buttons (Upload, New Folder) on right side File List: - Header row with uppercase labels - File type icons based on extension (code, image, archive, etc.) - Folder icon in gold/amber color - Selected row highlighted in yellow - Alternating row colors removed for cleaner look - Empty folder message with icon General: - Consistent spacing and typography - Smooth hover transitions - Better color contrast - Professional appearance matching service/macros views Files Changed: - src/pug/templates/view-files.pug - New navbar with dropdowns - src/pug/templates/files.pug - Improved breadcrumbs and file list - src/stylus/view-files.styl - Navbar and layout styles - src/stylus/files.styl - Complete restyling of file browser - src/js/files.js - Added file_icon() method for file type icons - src/js/view-files.js - Unchanged (included for completeness)
Camera View: - Dark navbar with "Show Crosshair" toggle (checkbox style) - Content area fills available viewport height - Camera menu always visible in sidebar (not hidden when no camera) - Header camera preview hidden when camera unavailable - Offline message: icon with "Camera Unavailable" text when no camera detected - Dark background (#1a1a1a) for video area Files View: - Dark navbar consistent with other views - File menu dropdown: Edit, 3D View, Download, Delete - Upload and New Folder buttons in navbar (right side) - Removed separate sidebar - location now in breadcrumbs - Location dropdown: Home icon + name with dropdown for USB drives - Breadcrumbs with chevron separators after location - Clean file list with type-specific icons - Empty folder message - No login button (not needed for this view) Technical: - Added show_locations data property to files.js - Added file_icon() method for file type detection - Camera availability check from backend state - Content area height calculated for proper fill Files Changed: - src/pug/index.pug - Camera menu always visible - src/pug/templates/view-camera.pug - New navbar, offline message - src/pug/templates/video.pug - Unchanged (included) - src/stylus/view-camera.styl - Full height, dark navbar - src/stylus/video.styl - Unchanged (included) - src/pug/templates/view-files.pug - Dark navbar, buttons - src/pug/templates/files.pug - Location dropdown, breadcrumbs - src/stylus/view-files.styl - Navbar styles - src/stylus/files.styl - Location dropdown, clean list - src/js/files.js - show_locations, file_icon() - src/js/view-files.js - Unchanged (included)
Global Navbar Update (navbar.styl): - Changed background from #444 to buildbotics#333 for consistency - Added min-height 40px - Improved nav-item styling with proper padding and hover states - Dropdown menus with box-shadow and border-radius - Added .filename styling for editor/viewer - Added .active class support Editor View: - Uses global navbar styles - Content area fills available height - CodeMirror editor uses flex layout 3D Viewer: - Uses global navbar styles - Content area properly sized - path-viewer fills available space Docs View: - Dark navbar with Help/GCode/License tabs - Active tab highlighting - Improved typography for documentation content - Styled headings (h1, h2, h3), paragraphs, links - Table styling for GCode reference - Code block styling - Max-width 900px for readability Camera View: - Dark navbar with crosshair toggle - Content fills viewport height - Camera menu always visible in sidebar - Offline message when no camera Files View: - Dark navbar with File dropdown menu - Upload and New Folder buttons in navbar - Location dropdown in breadcrumbs (no sidebar) - Type-specific file icons - Clean file list with selection highlighting Files Changed: - src/stylus/navbar.styl - Global dark navbar - src/pug/templates/view-editor.pug - Unchanged (uses global) - src/stylus/view-editor.styl - Flex layout - src/pug/templates/view-viewer.pug - Unchanged (uses global) - src/stylus/view-viewer.styl - Flex layout - src/pug/templates/view-docs.pug - Active state for tabs - src/stylus/view-docs.styl - Full documentation styling - src/pug/templates/view-camera.pug - Crosshair toggle - src/stylus/view-camera.styl - Full height layout - src/pug/templates/view-files.pug - Navbar buttons - src/pug/templates/files.pug - Location dropdown - src/stylus/view-files.styl - Navbar styles - src/stylus/files.styl - Breadcrumb styles - src/js/files.js - file_icon(), show_locations - src/pug/index.pug - Camera menu visibility
…ocs styling Global: - Dark navbar (buildbotics#333) consistent across all views - Improved nav-item styling with hover states and dropdowns Files View & Dialog: - Simplified breadcrumbs: Home icon + text / folder1 / folder2 - Removed dropdown button, just clickable path segments - "/" separators instead of chevrons Docs: - GCode cheat sheet: section headers with dark background - Spacer rows transparent, minimal padding - Unimplemented codes in muted gray - Help and License pages styled consistently Editor/Viewer: - Dark navbar with File/Edit menus - Filename display in navbar - Content fills available height Camera: - Dark navbar with crosshair toggle - Menu always visible in sidebar - Offline message when no camera detected
Fix files breadcrumbs and restore upload button in dialog Files View & Dialog: - Breadcrumbs now show actual folder names (Home / macros) - Skip '/' root entry from paths array - Home shows alone at root level - Upload and New Folder buttons in path bar - Works in both Files view and file browser dialog
Buttons now live in files partial (breadcrumb bar) which is shared by both Files view and file browser dialog. Removes redundant navbar buttons to avoid duplication on Files page.
Axis Table: - Wider axis column, narrower position column - Removed question icon from state (tooltip remains) - Changed set position icon from gear to bulls-eye (dot-circle-o) - Added button text (Set, Zero, Home) with responsive hiding - Better padding and header styling Macros Section: - Changed "Settings" tab to "Macros" with th-large icon - Increased macro button padding (0.4em 0.75em) Info Tables: - Increased gap between tables (column-gap 1em) - Better cell padding and header styling - Progress bar with border-radius Bottom Tabs: - Auto toolbar: background container with border-radius - MDI: styled container with gap, better input styling - History: subtle background, hover states on items - Jog settings: flex layout with gap Responsive: - Button text hidden on screens < 940px - Axis font sizes scale down progressively
MDI Tab: - Added text to Run/Pause and Stop buttons to match Auto tab styling - Buttons now show icon + text like Auto tab I/O Pins Tab: - Reorganized layout: pin tables at top (main focus) - Legend below pin tables - Breakout diagrams moved to bottom as "Connector Reference" - Cleaner table styling with dark headers Power Tab: - Added gap between tables (1.5em) - Consistent dark headers - Box shadow for depth - Better cell padding Note: Axis table button text (Set/Zero/Home) already implemented with responsive hiding on screens < 940px
Axis Table: - Added text prop to bbutton (Set, Zero, Home) - Buttons now show icon + text properly - Uses text prop instead of span children (bbutton doesn't support slots) Power Tab: - Power Faults table: value left of name (matches Measurements) - Consistent layout: td (value) then th (label) - Both pwr_fault and measurements tables use Courier font I/O Pins Tab: - Pin column: 2.5em width, centered, bold - State column: 2em width, centered - Function column: left-aligned, capitalized - More compact row layout
Axis Table: - Header buttons: icon + text (Zero All with circle-o, Home All with home) - Row buttons: icon + text (Set with dot-circle-o, Zero with circle-o, Home with home) - Actions column: width 1% to minimize wasted space - Button font-weight: normal (not bold) I/O Pins Tab: - table-layout: fixed for proper column distribution - Separator now centered at 50% - Pin column: 3em width - State column: 2.5em width - Function column: left-aligned Page Layout: - Added padding-bottom 3em to .content for browser UI clearance Camera in Header: - Hide when camera unavailable (all screen sizes, not just small) - Hide when on camera page (no redundant preview)
Axis Table: - Set button: dot-circle-o (bullseye - set to specific position) - Zero button: map-marker (pin current location) - Home button: home (unchanged) - Icons are now visually distinct I/O Pins Tab: - Restored original grid-based layout structure - Fixed separator centering with table-layout: fixed - Explicit column widths: pin 2.5em, state 2.5em - Separator width: 4px Camera: - Default to hidden until backend confirms camera available - Changed: camera_available === true (was !== false) - No camera UI in header when no camera connected
- Add table-layout: fixed for equal column distribution - Increase separator width to 4px for visibility - Applied to both Indicators and Power tabs
- Zero/Zero All: location-crosshairs (crosshair target) - Set Position: pen-to-square (edit/set value)
- Remove table-layout fixed that broke column widths - Increase separator width to 4px for visibility - Update icons to FA4: crosshairs (Zero), pencil-square-o (Set)
- Change Zero icon to map-marker (FA4) - Fix header buttons same size as row buttons - Wrap bbutton text in span for CSS control - Hide axis button text on small screens (icons only)
- Add icon-only logout button (sign-out) to service navbar - Add icon-only logout button (sign-out) to macros navbar - Button appears when authorized, alongside Saved indicator - Consistent with service/macros navbar pattern
Standardize navbar actions across all management pages: - Login button with icon when not authorized - Save button (green) with icon when authorized and modified - "Saved" indicator when authorized and not modified - Icon-only logout button when authorized Updated files: - view-settings.pug: New navbar pattern with spacer - view-settings.styl: Add spacer and save-status styles - view-service.pug: Add logout button - view-macros.pug: Add logout button
Standardize navbar actions across all management pages: - Login button with icon when not authorized - Save button (green) with icon when authorized and modified - "Saved" indicator when authorized and not modified - Icon-only logout button when authorized Settings navbar: - Add spacer for right-aligned actions - Add save-status styling - Match padding to service/macros navbars Files: - view-settings.pug: New navbar pattern - view-settings.styl: Add spacer, actions, save-status styles
Control page: - Add action dropdown for axis buttons on mobile (≤570px) - Desktop shows inline buttons, mobile shows ellipsis menu - Fix Clear button showing " Clear" Navbar: - Add action dropdown on mobile for Service, Macros, Settings - Collapses Login/Save/Logout into single menu button I/O Pins tab: - Split single table into two (Pins 1-13, 14-25) - Side-by-side on desktop, stacked on mobile - Hide breakout diagrams on mobile Macros page: - Hide grip handle and index column on mobile - Hide file path input (folder icon still works) - Constrain tab select and name input widths
Control page: - Add action dropdown for axis buttons on mobile (≤570px) - Desktop shows inline buttons, mobile shows ellipsis menu - Fix Clear button showing " Clear" - Constrain system alerts to page width Navbar: - Add action dropdown on mobile for Service, Macros, Settings - Collapses Login/Save/Logout into single menu button - Click-to-toggle and click-outside-to-close behavior I/O Pins tab: - Split single table into two (Pins 1-13, 14-25) - Side-by-side on desktop, stacked on mobile - Hide breakout diagrams on mobile Power tab: - Split Power Faults into two side-by-side tables - Split Measurements into two side-by-side tables - Transpose Motor Faults table (fault types as rows, motors as columns) - Fault descriptions now always visible instead of tooltip-only - All tables stack vertically on mobile Macros page: - Hide grip handle and index column on mobile - Hide file path input (folder icon still works) - Hide color hex input (color swatch still works) - Constrain tab select and name input widths All views: - Add bottom padding for mobile browser chrome (80px)
…eset Improvements to the Power tab for better consistency and usability: ### Power Faults Tables * Transposed tables: labels now on left (th), values on right (td) * This matches the info tables on the control view for consistency * Second table header changed from empty to "Power Faults (cont.)" ### Measurements Tables * Transposed tables: labels now on left (th), values on right (td) * Second table header changed to "Measurements (cont.)" ### Motor Faults Table * Removed separate Reset column (was wasting horizontal space) * Added "Reset All" button (fa-eraser icon) in the Reset Motor row header * Clicking "Reset All" resets all motor flags at once * Individual motor reset buttons remain in the Reset Motor row * Table now has 5 columns instead of 6, saving horizontal space Files Modified: * src/pug/templates/power.pug: Transposed tables, restructured motor reset * src/stylus/indicators.styl: Updated styling for new layout
…d docs Comprehensive update for better mobile experience and consistent styling across remaining views: **Settings Pages - Form Responsiveness:** * Labels stack above inputs on mobile (≤600px) * Inputs expand to full width on mobile (max 300px) * Proper spacing between form elements * Units and computed values (RPM, g-force) align properly **Settings Navbar:** * Horizontal scrolling on mobile for nav items * Smaller padding on mobile to fit more items * Save/Login actions collapse to dropdown menu on mobile **Settings Visual Hierarchy:** * Consistent h1/h2 heading styles with border-bottom on h1 * Reduced top margin on first h2 after h1 * Fieldsets have consistent spacing * Help text styled with smaller font and max-width for readability * `tt` code elements have subtle background **Button Groups:** * New `.button-group` container for related buttons * Buttons wrap on tablet, stack vertically on mobile * Consistent gap spacing between buttons * Links within button groups styled properly **Console (Control → Messages Tab):** * Horizontal scroll for log table on mobile * Reduced max-height on mobile (300px vs 400px) * Smaller font size on mobile for better fit * Min-width ensures table structure is preserved **WiFi Connect Dialog:** * Dialog body scrolls horizontally for wide table * Hides Channel and Rate columns on mobile (less essential) * Smaller font size on mobile * Table min-width ensures structure is preserved **Docs Page (Help, GCode, License):** * Reduced padding on mobile * GCode cheat sheet table scrolls horizontally * Smaller font size on mobile for tables * Bottom padding for browser chrome **Page-Specific Settings Improvements:** * Admin: Button groups for Configuration, Firmware, Debugging sections * Admin: Added icons to Check and Upload buttons for consistency * I/O: Mode select column sized appropriately * Network: WiFi action buttons stack vertically on mobile * Tool: VFD notes sections have distinctive left border styling * Macros redirect: Info box with icon styled as blue notice Files Modified: * src/stylus/view-settings.styl: Comprehensive responsive styling * src/stylus/console.styl: Log table responsive handling * src/stylus/view-docs.styl: Docs page mobile handling * src/pug/templates/settings-admin.pug: Button groups, added icons
Console Messages Redesign: - Replace table layout with full-width vertical card stack - Each message self-contained with level-based color accent - Message text wraps naturally, no horizontal scrolling - Add copy button to share/troubleshoot errors - Mobile optimized with responsive breakpoints Settings Page: - I/O table: move State column after Pin, fix dropdown sizing - Save status green matches macros/service (#5cb85c) - Add padding to match docs page offset (1.5em 2em) Editor Page: - Increase editor height calc(100vh - 120px) Program.js: - Initialize time property for Vue 1.x reactivity - Fix "X:XX:XX of" showing empty total duration
view-editor.styl: - Fix CSS selector: was ".view-editor-page .content" but HTML uses ".content.view-editor" (classes on same element, not nested) - CodeMirror now properly fills available viewport height console.styl: - Remove overflow:hidden from message-card (was clipping content) - Replace fixed max-height with flex layout (fills tab section) - Fix mobile layout using proper flex instead of negative margin hack
Reduce viewport offset from 120px to 100px and add height:auto !important to ensure CodeMirror fills available space.
* Editor page: Increased CodeMirror height to 700px (was flex-based, too short) * Control page: Maintained 460px height for gcode preview * Removed complex flex/calc layout in favor of simple fixed heights
…ditor height Issue buildbotics#1: USB drive access broken - Restore .files-locations bar in files.pug - Users can now switch between Home and USB drives Issue buildbotics#2: Control page tabs pushed off screen on 15.6" touch display - Reduce vertical margins throughout control page (0.5em -> 0.25em) - Reduce axis table cell padding (6px 10px -> 4px 8px) - Reduce info table cell padding and row height - Reduce macro tab padding (0.4em 1em -> 0.3em 0.75em) - Reduce tabs section min-height (500px -> 400px) Issue buildbotics#3: Editor cuts off after ~20 lines - Revert CodeMirror height from flex layout to calc(100vh - 180px) - Matches OEM behavior which worked correctly Issue buildbotics#4: Dropdown menu text bold, ellipsis pushed left - Add font-weight: normal to dropdown menu items (was inheriting bold from th) - Add margin-left: auto to dropdown container for right alignment - Add text-align: right in mobile breakpoint
- Remove CSS hover triggers from dropdown menus (navbar.styl, view-control.styl) - Dropdowns now click-only, prevents multiple menus open simultaneously - Restore OEM calc-based height for CodeMirror editor (view-editor.styl)
- Restore OEM calc-based CodeMirror height (was showing only 20 lines) - Add flex-wrap to settings navbar for mobile (prevents overflow) - Replace files sidebar with compact location dropdown in breadcrumbs - Preserves clean file list layout while enabling USB access
- Restore OEM calc-based CodeMirror height (was showing only ~20 lines) - Prevent horizontal scroll/swipe on settings page mobile - Fix dropdown menu opening to left and getting cut off
- Adjust CodeMirror height offset to 200px for alert space - Force vertical dots menu to top-right corner on mobile - Prevent horizontal scroll on settings page
- Force vertical dots menu to top-right corner on mobile - Prevent horizontal scroll/swipe on settings page
- Add User Panel (right side) with Program/MDI/Jog tabs - Program tab: filename, metrics, Start/Stop/Edit/View/Open - MDI tab: common commands dropdown, input, history - Jog tab: moved from bottom tabs - Add column selector (gear icon) to toggle Offset/Absolute columns - Persisted via cookies (col-offset, col-absolute) - Add Fullscreen button to sidebar nav - Mobile dialog scroll fix for small screens - Responsive layout for tablet/mobile Resolves real estate issues on 1366x768 displays.
- Axis table: Convert action buttons to icon-only (home/zero/set) - Axis table: Add Home All / Zero All icons in header, centered - Axis table: Move gear icon to axis name column, left-aligned - Column selector: Left-align dropdown menu for checkbox alignment - Program tab: 2-column button layout, fix file size display - Jog: Convert tab to modal for focused jogging experience - Add tooltips to all icon buttons and tabs - Responsive: Jog controls stack vertically on mobile
- Fullscreen: fa-arrows-alt/fa-times icons, "Expand"/"Exit" text - Axis row actions: reorder to zero → set → home - Header actions: reorder to zero → home - Column selector: left-align checkbox labels - Jog modal: side-by-side on desktop, stacked on mobile (≤940px) - User panel: min-height 450px to match axis+info tables
- Header icons: reset to 1rem (match axis row icons) - User panel: reduce min-height to 320px (axis + one info table) - Jog modal: increase min-width to 650px for side-by-side controls
- MDI: increase input font size to 1rem, fix history scroll overflow - User panel: remove fixed min-height, stretch to match axis table - Fix browser refresh clearing selected program - Rename fullscreen button "Expand" to "Full" - Add State column to column selector dropdown - Move Messages clear button to X icon in tab label
- menu.styl: cursor: pointer on sidebar links - view-control.styl: overflow: hidden on user-panel, flex-shrink: 0 on fixed elements, .tab-action styling for Clear button - view-control.pug: Clear link in tab bar (visible when Messages active) - console.js/pug: showToolbar prop to hide toolbar in control page
- view-control.styl: Fix MDI history growing user panel - Add height: 0 to flex chain (user-panel-content, panel-mdi, mdi-history) - Forces elements to start at 0 and grow only to available space - History now scrolls instead of expanding panel - view-control.styl: Style Clear button as connected tab - float: right, white background, matching borders - border-bottom: #fff + margin-bottom: -1px to connect to content - Only visible when Messages tab active
- Fix MDI history growing user panel: - user-panel-content: position relative - panel-mdi: position absolute to fill container - mdi-history: height calc(100% - 11em) with overflow-y auto - Style Clear button as connected tab (white bg, borders connect to content) - Style Macros button to match Clear button (white bg, connected borders) - Remove macro-tabs margin-bottom so tabs sit on container border
Fix Settings page sticky header/alerts - Removed overflow-x:hidden that created separate scroll context - Tables already have .table-responsive wrappers Fix Control page mobile layout - Added padding to prevent edge-to-edge content - Axis header actions now use dropdown menu on mobile (matches row pattern) - Hide column selector on mobile (defaults are sensible) - User panel maintains min-height 280px for MDI history - Jog modal SVGs scale down to prevent cutoff Fix Macros button border - Match Clear button style (no visible bottom border)
- view-control.styl: Fix control page horizontal scroll (CodeMirror textarea has inline 1000px width), constrain with max-width 100% - view-control.styl: Fix jog modal SVG clipping - remove overflow:hidden from dialog-container/body/content, widen modal to 95vw, scale SVGs 85% - view-settings.styl: Fix settings page horizontal scroll - GCode textareas overflow viewport, constrain with max-width calc(100vw - 2em) - files.js: Fix TypeError in _closeLocationMenu - guard against unmounted component when document click handler fires
7 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Source Branch:
feature/ui-tweaksBase Version: 2.0.7
Summary
Complete control page redesign with professional two-column layout, enhanced user panel, jog modal, and comprehensive mobile responsiveness.
Control Page Redesign
Two-Column Layout
Desktop (≥1100px): Axis table and user panel side-by-side
Tablet/Mobile (<1100px): Stacked vertically
This layout keeps critical position information visible while providing quick access to program controls, MDI input, and jog functions.
Column Visibility Selector
Gear icon in axis table header opens dropdown to show/hide:
Settings persist via cookies across sessions.
Icon-Only Action Buttons
Axis row actions streamlined to icon-only buttons:
Header row includes Zero All and Home All icons for bulk operations. Tooltips provide context on hover.
User Panel
Tabbed interface replacing scattered controls:
Program Tab
MDI Tab
Jog Tab
Opens dedicated jog modal dialog.
Jog Modal
Dedicated modal dialog for machine positioning:
Rationale: When jogging, operators watch the machine, not the screen. A modal provides focused controls without cluttering the main interface.
Info Display
Real-time machine state information:
Additional Features
Fullscreen Mode
Messages Tab Clear Button
Clear button moved from console interior to X icon in tab label. Styled as connected tab element with matching border treatment.
Macros Tab Settings Button
Settings link to
#macrosconfiguration page, styled consistently with Clear button.Console Card Layout
Messages display as cards instead of table rows:
File Type Icons
Context-appropriate icons based on file extension:
.ngc,.nc,.gcode→ code icon.txt,.md→ text iconResponsive Breakpoints
Additional responsive considerations:
Files Added
src/js/axis-row.jssrc/pug/templates/axis-row.pugFiles Modified
src/js/view-control.jssrc/js/app.jssrc/js/console.jssrc/js/axis-row.jssrc/pug/templates/view-control.pugsrc/pug/templates/console.pugsrc/pug/index.pugsrc/stylus/view-control.stylsrc/stylus/dialog.stylsrc/stylus/style.styl