Reorganize sidebar: move schedules under respective sections, minimal styling with bullets/arrows, cyan active color, larger fonts

This commit is contained in:
Omnicscient
2025-12-17 20:47:35 +03:00
parent cc8b79c226
commit 7735491092
3 changed files with 152 additions and 72 deletions

View File

@@ -38,18 +38,32 @@ public class MainController {
@FXML @FXML
private Button scheduleBtn; private Button scheduleBtn;
// Sub-menus
@FXML @FXML
private VBox scheduleSubMenu; private VBox studentsSubMenu;
@FXML @FXML
private Button calendarBtn; private VBox coursesSubMenu;
@FXML
private VBox classroomsSubMenu;
// Sub-menu buttons
@FXML
private Button studentListBtn;
@FXML @FXML
private Button studentScheduleBtn; private Button studentScheduleBtn;
@FXML
private Button courseListBtn;
@FXML @FXML
private Button courseScheduleBtn; private Button courseScheduleBtn;
@FXML
private Button classroomListBtn;
@FXML @FXML
private Button classroomScheduleBtn; private Button classroomScheduleBtn;
@@ -61,7 +75,11 @@ public class MainController {
private DataManager dataManager; private DataManager dataManager;
private boolean isDarkMode = false; private boolean isDarkMode = false;
private boolean scheduleMenuOpen = false;
// Track which sub-menus are open
private boolean studentsMenuOpen = false;
private boolean coursesMenuOpen = false;
private boolean classroomsMenuOpen = false;
// Cached views // Cached views
private Node importView; private Node importView;
@@ -174,43 +192,81 @@ public class MainController {
showView(importView, importBtn); showView(importView, importBtn);
} }
@FXML
private void onShowStudents() {
showView(studentsView, studentsBtn);
}
@FXML
private void onShowCourses() {
showView(coursesView, coursesBtn);
}
@FXML
private void onShowClassrooms() {
showView(classroomsView, classroomsBtn);
}
/** /**
* Toggle schedule submenu visibility and show Calendar View by default * Toggle students submenu visibility
*/ */
@FXML @FXML
private void onToggleScheduleMenu() { private void onToggleStudentsMenu() {
if (!scheduleMenuOpen) { if (!studentsMenuOpen) {
// First time opening - show Calendar View and expand submenu studentsMenuOpen = true;
scheduleMenuOpen = true; studentsSubMenu.setVisible(true);
scheduleSubMenu.setVisible(true); studentsSubMenu.setManaged(true);
scheduleSubMenu.setManaged(true); // Show student list by default when opening
showView(calendarView, calendarBtn); showView(studentsView, studentListBtn);
} else { } else {
// Toggle submenu visibility studentsMenuOpen = false;
scheduleMenuOpen = false; studentsSubMenu.setVisible(false);
scheduleSubMenu.setVisible(false); studentsSubMenu.setManaged(false);
scheduleSubMenu.setManaged(false);
} }
} }
@FXML
private void onShowStudents() {
showView(studentsView, studentListBtn);
}
/**
* Toggle courses submenu visibility
*/
@FXML
private void onToggleCoursesMenu() {
if (!coursesMenuOpen) {
coursesMenuOpen = true;
coursesSubMenu.setVisible(true);
coursesSubMenu.setManaged(true);
// Show course list by default when opening
showView(coursesView, courseListBtn);
} else {
coursesMenuOpen = false;
coursesSubMenu.setVisible(false);
coursesSubMenu.setManaged(false);
}
}
@FXML
private void onShowCourses() {
showView(coursesView, courseListBtn);
}
/**
* Toggle classrooms submenu visibility
*/
@FXML
private void onToggleClassroomsMenu() {
if (!classroomsMenuOpen) {
classroomsMenuOpen = true;
classroomsSubMenu.setVisible(true);
classroomsSubMenu.setManaged(true);
// Show classroom list by default when opening
showView(classroomsView, classroomListBtn);
} else {
classroomsMenuOpen = false;
classroomsSubMenu.setVisible(false);
classroomsSubMenu.setManaged(false);
}
}
@FXML
private void onShowClassrooms() {
showView(classroomsView, classroomListBtn);
}
/**
* Show Calendar View directly when Schedule is clicked
*/
@FXML @FXML
private void onShowCalendar() { private void onShowCalendar() {
showView(calendarView, calendarBtn); showView(calendarView, scheduleBtn);
} }
@FXML @FXML

View File

@@ -622,18 +622,20 @@
/* ===== Sidebar Navigation ===== */ /* ===== Sidebar Navigation ===== */
.sidebar-button { .sidebar-button {
-fx-background-color: transparent; -fx-background-color: transparent;
-fx-text-fill: rgba(255, 255, 255, 0.8); -fx-border-color: transparent;
-fx-font-size: 13px; -fx-border-width: 0;
-fx-font-weight: 600; -fx-text-fill: rgba(255, 255, 255, 0.75);
-fx-padding: 12 16; -fx-font-size: 15px;
-fx-background-radius: 8; -fx-font-weight: 500;
-fx-border-radius: 8; -fx-padding: 10 4;
-fx-background-radius: 0;
-fx-border-radius: 0;
-fx-alignment: CENTER_LEFT; -fx-alignment: CENTER_LEFT;
-fx-cursor: hand; -fx-cursor: hand;
} }
.sidebar-button:hover { .sidebar-button:hover {
-fx-background-color: rgba(255, 255, 255, 0.1); -fx-background-color: transparent;
-fx-text-fill: white; -fx-text-fill: white;
} }
@@ -643,33 +645,37 @@
} }
.sidebar-button-active { .sidebar-button-active {
-fx-background-color: rgba(255, 255, 255, 0.15); -fx-background-color: transparent;
-fx-text-fill: white; -fx-text-fill: #5eead4;
-fx-border-color: rgba(255, 255, 255, 0.3); -fx-font-weight: 600;
-fx-border-width: 0 0 0 3; -fx-border-color: transparent;
-fx-border-width: 0;
} }
/* Sidebar Sub-buttons (indented) */ /* Sidebar Sub-buttons (indented) */
.sidebar-button-sub { .sidebar-button-sub {
-fx-background-color: transparent; -fx-background-color: transparent;
-fx-text-fill: rgba(255, 255, 255, 0.7); -fx-border-color: transparent;
-fx-font-size: 12px; -fx-border-width: 0;
-fx-font-weight: 500; -fx-text-fill: rgba(255, 255, 255, 0.6);
-fx-padding: 8 12; -fx-font-size: 13px;
-fx-background-radius: 6; -fx-font-weight: 400;
-fx-border-radius: 6; -fx-padding: 6 4;
-fx-background-radius: 0;
-fx-border-radius: 0;
-fx-alignment: CENTER_LEFT; -fx-alignment: CENTER_LEFT;
-fx-cursor: hand; -fx-cursor: hand;
} }
.sidebar-button-sub:hover { .sidebar-button-sub:hover {
-fx-background-color: rgba(255, 255, 255, 0.08); -fx-background-color: transparent;
-fx-text-fill: white; -fx-text-fill: white;
} }
.sidebar-button-sub.sidebar-button-active { .sidebar-button-sub.sidebar-button-active {
-fx-background-color: rgba(79, 70, 229, 0.3); -fx-background-color: transparent;
-fx-text-fill: white; -fx-text-fill: #5eead4;
-fx-border-color: #6366F1; -fx-font-weight: 500;
-fx-border-width: 0 0 0 2; -fx-border-color: transparent;
-fx-border-width: 0;
} }

View File

@@ -32,36 +32,54 @@
<Insets top="10" right="10" bottom="10" left="10"/> <Insets top="10" right="10" bottom="10" left="10"/>
</padding> </padding>
<Button fx:id="importBtn" text="📁 Import Data" onAction="#onShowImport" <Button fx:id="importBtn" text=" Import Data" onAction="#onShowImport"
maxWidth="Infinity" styleClass="sidebar-button"/> maxWidth="Infinity" styleClass="sidebar-button"/>
<Button fx:id="studentsBtn" text="👤 Students" onAction="#onShowStudents" <Button fx:id="studentsBtn" text=" Students" onAction="#onToggleStudentsMenu"
maxWidth="Infinity" styleClass="sidebar-button" disable="true"/> maxWidth="Infinity" styleClass="sidebar-button" disable="true"/>
<Button fx:id="coursesBtn" text="📚 Courses" onAction="#onShowCourses" <!-- Students Sub-menu (initially hidden) -->
maxWidth="Infinity" styleClass="sidebar-button" disable="true"/> <VBox fx:id="studentsSubMenu" spacing="2" managed="false" visible="false">
<Button fx:id="classroomsBtn" text="🏛️ Classrooms" onAction="#onShowClassrooms"
maxWidth="Infinity" styleClass="sidebar-button" disable="true"/>
<Button fx:id="scheduleBtn" text="📅 Schedule" onAction="#onToggleScheduleMenu"
maxWidth="Infinity" styleClass="sidebar-button" disable="true"/>
<!-- Schedule Sub-menu (initially hidden) -->
<VBox fx:id="scheduleSubMenu" spacing="2" managed="false" visible="false">
<padding> <padding>
<Insets left="15"/> <Insets left="15"/>
</padding> </padding>
<Button fx:id="calendarBtn" text="📆 Calendar View" onAction="#onShowCalendar" <Button fx:id="studentListBtn" text="→ Student List" onAction="#onShowStudents"
maxWidth="Infinity" styleClass="sidebar-button-sub"/> maxWidth="Infinity" styleClass="sidebar-button-sub"/>
<Button fx:id="studentScheduleBtn" text="👤 Student Schedule" onAction="#onShowStudentSchedule" <Button fx:id="studentScheduleBtn" text=" Student Schedule" onAction="#onShowStudentSchedule"
maxWidth="Infinity" styleClass="sidebar-button-sub"/>
<Button fx:id="courseScheduleBtn" text="📚 Course Schedule" onAction="#onShowCourseSchedule"
maxWidth="Infinity" styleClass="sidebar-button-sub"/>
<Button fx:id="classroomScheduleBtn" text="🏛️ Classroom Schedule" onAction="#onShowClassroomSchedule"
maxWidth="Infinity" styleClass="sidebar-button-sub"/> maxWidth="Infinity" styleClass="sidebar-button-sub"/>
</VBox> </VBox>
<Button fx:id="coursesBtn" text="• Courses" onAction="#onToggleCoursesMenu"
maxWidth="Infinity" styleClass="sidebar-button" disable="true"/>
<!-- Courses Sub-menu (initially hidden) -->
<VBox fx:id="coursesSubMenu" spacing="2" managed="false" visible="false">
<padding>
<Insets left="15"/>
</padding>
<Button fx:id="courseListBtn" text="→ Course List" onAction="#onShowCourses"
maxWidth="Infinity" styleClass="sidebar-button-sub"/>
<Button fx:id="courseScheduleBtn" text="→ Course Schedule" onAction="#onShowCourseSchedule"
maxWidth="Infinity" styleClass="sidebar-button-sub"/>
</VBox>
<Button fx:id="classroomsBtn" text="• Classrooms" onAction="#onToggleClassroomsMenu"
maxWidth="Infinity" styleClass="sidebar-button" disable="true"/>
<!-- Classrooms Sub-menu (initially hidden) -->
<VBox fx:id="classroomsSubMenu" spacing="2" managed="false" visible="false">
<padding>
<Insets left="15"/>
</padding>
<Button fx:id="classroomListBtn" text="→ Classroom List" onAction="#onShowClassrooms"
maxWidth="Infinity" styleClass="sidebar-button-sub"/>
<Button fx:id="classroomScheduleBtn" text="→ Classroom Schedule" onAction="#onShowClassroomSchedule"
maxWidth="Infinity" styleClass="sidebar-button-sub"/>
</VBox>
<Button fx:id="scheduleBtn" text="• Schedule" onAction="#onShowCalendar"
maxWidth="Infinity" styleClass="sidebar-button" disable="true"/>
<Region VBox.vgrow="ALWAYS"/> <Region VBox.vgrow="ALWAYS"/>
<Label text="Navigation" style="-fx-text-fill: rgba(255,255,255,0.5); -fx-font-size: 10px;"/> <Label text="Navigation" style="-fx-text-fill: rgba(255,255,255,0.5); -fx-font-size: 10px;"/>