Skip to content

Commit e09cf47

Browse files
committed
Enhance guiconfig experience
This improves the user interface and user experience of guiconfig.py, bringing it closer to the professional standard of Linux kernel's qconf (make xconfig). - Menu bar: Add File and Options menus for standard application feel - Enhanced status bar: Split into status message (left) and real-time statistics display (right) showing symbol counts - Integrated menu path bar: Visual frame with back button in single-menu mode and path display with bold label - Semantic color tags: Red for invisible items, blue for NEW markers, dark green for menu/choice items - Zebra striping: Alternating row colors (white/light gray) in treeview for significantly better readability, implemented using tag-based approach following 2024 Tkinter best practices - Grouped button layout: Use LabelFrames to organize buttons into logical groups (File Operations, Navigation, View Options) with uniform button widths - Visual hierarchy: Better spacing, padding, and clear visual grouping throughout the interface
1 parent 7bbdb83 commit e09cf47

File tree

3 files changed

+382
-43
lines changed

3 files changed

+382
-43
lines changed

UI_IMPROVEMENTS.md

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
# guiconfig.py UI/UX 改進總結
2+
3+
## 概述
4+
5+
本次更新大幅改善了 guiconfig.py 的使用者介面和使用者體驗,使其更接近 Linux kernel 的 qconf (make xconfig) 專業水準。
6+
7+
## Phase 1 改進 (基礎架構)
8+
9+
### 1. 選單列 (Menu Bar)
10+
- 加入標準應用程式選單列
11+
- **File 選單**:
12+
- Save (儲存)
13+
- Save As... (另存新檔)
14+
- Save Minimal... (儲存最小配置)
15+
- Open... (開啟)
16+
- Quit (離開)
17+
- **Options 選單**:
18+
- Show Name (顯示符號名稱)
19+
- Show All (顯示全部項目)
20+
- Single-Menu Mode (單選單模式)
21+
22+
### 2. 增強狀態列 (Enhanced Status Bar)
23+
- 分割為左右兩部分
24+
- 左側:狀態訊息 (Modified, Saved to..., 等)
25+
- 右側:即時統計資訊
26+
- 符號總數
27+
- 已變更符號數量
28+
29+
### 3. 整合式選單路徑列 (Integrated Menu Path Bar)
30+
- 顯示當前選單路徑
31+
- 單選單模式下顯示「返回」按鈕
32+
- 使用凹槽邊框視覺區隔
33+
- 路徑標籤使用粗體字
34+
35+
### 4. 語意化顏色標籤 (Semantic Color Tags)
36+
- 紅色 (#cc0000): 不可見項目
37+
- 藍色 (#0066cc): NEW 標記項目
38+
- 深綠色 (#006600): 選單/選項項目
39+
40+
## Phase 2 改進 (視覺優化)
41+
42+
### 5. 交替行顏色 (Zebra Striping)
43+
- 樹狀檢視表加入交替行顏色
44+
- 偶數行:白色 (#ffffff)
45+
- 奇數行:淺灰色 (#f0f0f0)
46+
- 大幅提升可讀性,更容易追蹤項目
47+
48+
### 6. 按鈕分組佈局 (Grouped Button Layout)
49+
使用 LabelFrame 清楚分組相關功能:
50+
51+
**File Operations (檔案操作)**
52+
- Save
53+
- Save as...
54+
- Save minimal...
55+
- Open...
56+
57+
**Navigation (導航)**
58+
- Jump to... (跳至符號)
59+
60+
**View Options (檢視選項)**
61+
- Show name (顯示符號名稱)
62+
- Show all (顯示全部)
63+
- Single-menu mode (單選單模式)
64+
65+
所有按鈕統一寬度 (width=12),外觀更專業。
66+
67+
### 7. 改進欄位控制 (Improved Column Controls)
68+
- Option 欄位:寬度 400px,最小 200px
69+
- Name 欄位:寬度 200px,最小 100px
70+
- 兩個欄位都可自動延展 (stretch=True)
71+
- 使用者可自行調整欄位寬度
72+
73+
### 8. 整體視覺層次 (Visual Hierarchy)
74+
- 改善間距和邊距 (padding)
75+
- 清楚的視覺分組
76+
- 更專業的外觀
77+
- 符合現代 UI 設計原則
78+
79+
## 技術細節
80+
81+
### 相容性
82+
- 維持 Python 2/3 相容性
83+
- 只使用標準 Tkinter/ttk 元件
84+
- 無新增外部相依套件
85+
- 維持單檔案設計原則
86+
87+
### 效能
88+
- 交替行顏色透過全域計數器實作
89+
- 每次更新樹狀檢視時重置計數器
90+
- 對效能影響極小
91+
92+
### 程式碼品質
93+
- 保持既有命名慣例
94+
- 詳細註解說明改進項目
95+
- 通過所有測試
96+
97+
## 測試
98+
99+
執行測試腳本:
100+
```bash
101+
python3 test_ui_improvements.py
102+
```
103+
104+
執行 GUI:
105+
```bash
106+
python3 guiconfig.py
107+
```
108+
109+
## 未來改進建議 (Phase 3)
110+
111+
若需要進一步改進,可考慮:
112+
113+
1. 三欄位佈局 (與 qconf 完全一致)
114+
- 左側:配置樹狀檢視
115+
- 右上:詳細資訊和設定
116+
- 右下:說明文字
117+
118+
2. 工具列 (Toolbar)
119+
- 常用操作的快速存取按鈕
120+
- 圖示化介面
121+
122+
3. 進階搜尋功能
123+
- 即時搜尋過濾
124+
- 正規表達式支援
125+
- 搜尋結果高亮
126+
127+
4. 鍵盤導航增強
128+
- Vim 風格快捷鍵
129+
- 可自訂快捷鍵
130+
131+
5. 主題支援
132+
- 深色主題
133+
- 高對比主題
134+
- 可自訂配色
135+
136+
## 總結
137+
138+
本次改進大幅提升了 guiconfig.py 的專業度和易用性,使其成為更適合日常使用的配置工具。所有改進都遵循最小侵入原則,維持程式碼的簡潔性和可維護性。

0 commit comments

Comments
 (0)