Learning/mRemoteNG
1
0
Fork 0
mirror of https://github.com/mRemoteNG/mRemoteNG.git synced 2026-02-17 14:07:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add visual examples for ConnectionFrameColor feature

Browse Source 
Co-authored-by: Kvarkas <3611964+Kvarkas@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2025-10-18 21:35:35 +00:00
parent b7df1e80c8
commit 664a63211e
1 changed files with 122 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
VISUAL_EXAMPLES.md Normal file
View File

@@ -0,0 +1,122 @@
# Connection Frame Color - Visual Examples
## Before and After
### Without Frame Color (Default)
```
┌──────────────────────────────────────────────┐
│ Connection Tab │
├──────────────────────────────────────────────┤
│ │
│ │
│ [Normal connection content area] │
│ │
│ │
│ │
└──────────────────────────────────────────────┘
```
### With Red Frame Color (Production)
```
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ Connection Tab (Production) ┃
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
┃ ╔════════════════════════════════════════╗ ┃
┃ ║ ║ ┃
┃ ║ [Connection content area] ║ ┃
┃ ║ With 4-pixel RED border all around ║ ┃
┃ ║ ║ ┃
┃ ╚════════════════════════════════════════╝ ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
```
### With Green Frame Color (Test)
```
┌──────────────────────────────────────────────┐
│ Connection Tab (Test) │
├──────────────────────────────────────────────┤
│ ╔════════════════════════════════════════╗ │
│ ║ ║ │
│ ║ [Connection content area] ║ │
│ ║ With 4-pixel GREEN border all around ║ │
│ ║ ║ │
│ ╚════════════════════════════════════════╝ │
└──────────────────────────────────────────────┘
```
## Side-by-Side Comparison
```
Test Connection Production Connection
┌─────────────────────┐ ┏━━━━━━━━━━━━━━━━━━━━━┓
│ [test server] │ ┃ [production server] ┃
│ │ ┃ ╔═══════════════╗ ┃
│ ┌───────────────┐ │ ┃ ║ ║ ┃
│ │ │ │ ┃ ║ !WARNING! ║ ┃
│ │ SSH Session │ │ ┃ ║ Production ║ ┃
│ │ (Green) │ │ ┃ ║ Environment ║ ┃
│ └───────────────┘ │ ┃ ║ (Red) ║ ┃
│ │ ┃ ╚═══════════════╝ ┃
└─────────────────────┘ ┗━━━━━━━━━━━━━━━━━━━━━┛
Safe to experiment Requires extra caution!
```
## Property Grid Display
When you select a connection in mRemoteNG, the Config panel will show:
```
┌─ Display ──────────────────────────────────┐
│ │
│ Name: My Server │
│ Description: Production DB │
│ Icon: SSH │
│ Panel: General │
│ Color: [empty] │
│ Tab Color: [empty] │
│ Connection Frame Color: ▼ Red (Production)│
│ ├─ None │
│ ├─ Red (Prod...)│
│ ├─ Yellow (St...)│
│ ├─ Green (Test) │
│ ├─ Blue (Dev) │
│ └─ Purple (C...)│
└────────────────────────────────────────────┘
```
## Folder Inheritance Example
```
📁 Production Servers (ConnectionFrameColor: Red)
├─ 📄 Web Server 1 (inherits Red)
├─ 📄 Web Server 2 (inherits Red)
└─ 📄 Database Server (inherits Red)
📁 Development Servers (ConnectionFrameColor: Blue)
├─ 📄 Dev Server 1 (inherits Blue)
└─ 📄 Dev Server 2 (inherits Blue)
📁 Test Servers (ConnectionFrameColor: Green)
├─ 📄 Test Server 1 (inherits Green)
└─ 📄 QA Server (inherits Green)
```
All connections in the "Production Servers" folder will automatically
get a red border when you connect to them (assuming inheritance is enabled).
## Color Palette
The implementation uses these specific colors:
- **Red (Production)**: RGB(220, 53, 69) - High visibility warning color
- **Yellow (Staging/UAT)**: RGB(255, 193, 7) - Caution/warning color
- **Green (Test)**: RGB(40, 167, 69) - Safe/go color
- **Blue (Development)**: RGB(0, 123, 255) - Calm, neutral color
- **Purple (Custom)**: RGB(111, 66, 193) - Distinct custom color
- **None (Default)**: Transparent - No border
These colors are chosen for:
1. High contrast and visibility
2. Universal recognition (red = danger, green = safe)
3. Accessibility considerations
4. Consistency with modern UI design patterns