diff --git a/src/main/java/org/to/telegramfinalproject/UI/SidebarMenuController.java b/src/main/java/org/to/telegramfinalproject/UI/SidebarMenuController.java index 9a6915d..ffc2942 100644 --- a/src/main/java/org/to/telegramfinalproject/UI/SidebarMenuController.java +++ b/src/main/java/org/to/telegramfinalproject/UI/SidebarMenuController.java @@ -1,11 +1,26 @@ package org.to.telegramfinalproject.UI; +import javafx.animation.TranslateTransition; +import javafx.application.Platform; import javafx.fxml.FXML; -import javafx.scene.control.*; +import javafx.scene.Scene; +import javafx.scene.control.Button; +import javafx.scene.control.Label; import javafx.scene.image.Image; import javafx.scene.image.ImageView; +import javafx.scene.layout.HBox; +import javafx.scene.layout.Region; +import javafx.scene.layout.VBox; +import javafx.util.Duration; -public class SidebarMenuController { +import java.net.URL; + +public class SidebarMenuController { + + private static final String CSS_PATH = "/org/to/telegramfinalproject/CSS/"; + private static final String ICON_PATH = "/org/to/telegramfinalproject/Icons/"; + + @FXML private VBox sidebarRoot; // fx:id must match FXML @FXML private ImageView profileImage; @FXML private Label usernameLabel; @@ -18,14 +33,143 @@ public class SidebarMenuController { @FXML private Button telegramFeaturesButton; @FXML private Button telegramQnAButton; - @FXML private ToggleButton nightModeToggle; + // Custom Telegram-style toggle + @FXML private HBox nightModeToggle; + @FXML private Region toggleThumb; + @FXML private ImageView nightModeIcon; + + private boolean nightModeOn = false; // start light by default @FXML public void initialize() { - Image image = new Image(getClass().getResource("/org/to/telegramfinalproject/Images/profile.png").toExternalForm()); - profileImage.setImage(image); + // Load default profile picture (if present) + Image profile = loadImage("/org/to/telegramfinalproject/Images/profile.png"); + if (profile != null) profileImage.setImage(profile); - // Called automatically after FXML is loaded - usernameLabel.setText("Asal"); + // Set up handlers and defer theme application until the scene is available + setupButtonActions(); + setupToggleAction(); + + // When the scene is set, apply the initial theme (light) and initialize icons/positions + sidebarRoot.sceneProperty().addListener((obs, oldScene, newScene) -> { + if (newScene != null) { + // Apply light theme at startup + updateTheme(false); + + // Position the thumb after layout pass (to use actual widths) + Platform.runLater(() -> { + double initialX = nightModeOn + ? nightModeToggle.getWidth() - toggleThumb.getWidth() - 4 + : 2; + toggleThumb.setTranslateX(initialX); + }); + } + }); } + + private void setupButtonActions() { + myProfileButton.setOnAction(e -> openMyProfile()); + newGroupButton.setOnAction(e -> createNewGroup()); + newChannelButton.setOnAction(e -> createNewChannel()); + contactsButton.setOnAction(e -> openContacts()); + savedMessagesButton.setOnAction(e -> openSavedMessages()); + settingsButton.setOnAction(e -> openSettings()); + telegramFeaturesButton.setOnAction(e -> openTelegramFeatures()); + telegramQnAButton.setOnAction(e -> openTelegramQnA()); + } + + private void setupToggleAction() { + nightModeToggle.setOnMouseClicked(e -> { + nightModeOn = !nightModeOn; + updateTheme(nightModeOn); + + // animate thumb + double targetX = nightModeOn + ? nightModeToggle.getWidth() - toggleThumb.getWidth() - 4 + : 2; + TranslateTransition tt = new TranslateTransition(Duration.millis(200), toggleThumb); + tt.setToX(targetX); + tt.play(); + }); + } + + /** + * Apply theme and swap icons. darkMode == true => apply dark theme (dark background), + * and use light (white) icons. darkMode == false => apply light theme and use dark icons. + */ + private void updateTheme(boolean darkMode) { + Scene scene = sidebarRoot.getScene(); + if (scene == null) return; // safety + + // clear & apply the correct stylesheet + scene.getStylesheets().clear(); + String cssFile = darkMode ? "dark_theme.css" : "light_theme.css"; + URL cssUrl = getClass().getResource(CSS_PATH + cssFile); + if (cssUrl != null) { + scene.getStylesheets().add(cssUrl.toExternalForm()); + } else { + System.err.println("CSS not found: " + CSS_PATH + cssFile); + } + + // Keep toggle's "on" class in sync + if (darkMode) { + if (!nightModeToggle.getStyleClass().contains("on")) + nightModeToggle.getStyleClass().add("on"); + } else { + nightModeToggle.getStyleClass().remove("on"); + } + + // Icon file suffix mapping: + // - For darkMode == true (dark background) we want white icons => use "_light.png" + // - For darkMode == false (light background) we want dark icons => use "_dark.png" + String iconSuffix = darkMode ? "_light.png" : "_dark.png"; + + setIcons(iconSuffix); + + // night mode icon itself (moon) + Image moon = loadImage(ICON_PATH + "night_mode" + iconSuffix); + if (moon != null) nightModeIcon.setImage(moon); + } + + private void setIcons(String suffix) { + myProfileButton.setGraphic(makeIcon(ICON_PATH + "my_profile" + suffix)); + newGroupButton.setGraphic(makeIcon(ICON_PATH + "new_group" + suffix)); + newChannelButton.setGraphic(makeIcon(ICON_PATH + "new_channel" + suffix)); + contactsButton.setGraphic(makeIcon(ICON_PATH + "contacts" + suffix)); + savedMessagesButton.setGraphic(makeIcon(ICON_PATH + "saved_messages" + suffix)); + settingsButton.setGraphic(makeIcon(ICON_PATH + "settings" + suffix)); + telegramFeaturesButton.setGraphic(makeIcon(ICON_PATH + "telegram_features" + suffix)); + telegramQnAButton.setGraphic(makeIcon(ICON_PATH + "telegram_qna" + suffix)); // prefer safe filename + } + + private Image loadImage(String path) { + URL res = getClass().getResource(path); + if (res == null) { + System.err.println("Resource not found: " + path); + return null; + } + return new Image(res.toExternalForm()); + } + + private ImageView makeIcon(String path) { + ImageView iv = new ImageView(); + Image img = loadImage(path); + if (img != null) { + iv.setImage(img); + iv.setFitWidth(22); + iv.setFitHeight(22); + iv.setPreserveRatio(true); + } + return iv; + } + + // Example button actions + private void openMyProfile() { System.out.println("Opening My Profile..."); } + private void createNewGroup() { System.out.println("Creating New Group..."); } + private void createNewChannel() { System.out.println("Creating New Channel..."); } + private void openContacts() { System.out.println("Opening Contacts..."); } + private void openSavedMessages() { System.out.println("Opening Saved Messages..."); } + private void openSettings() { System.out.println("Opening Settings..."); } + private void openTelegramFeatures() { System.out.println("Opening Telegram Features..."); } + private void openTelegramQnA() { System.out.println("Opening Telegram Q&A..."); } } diff --git a/src/main/java/org/to/telegramfinalproject/UI/TelegramApplication.java b/src/main/java/org/to/telegramfinalproject/UI/TelegramApplication.java index 596c359..1adeb51 100644 --- a/src/main/java/org/to/telegramfinalproject/UI/TelegramApplication.java +++ b/src/main/java/org/to/telegramfinalproject/UI/TelegramApplication.java @@ -5,7 +5,6 @@ import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Scene; import javafx.stage.Stage; -import org.to.telegramfinalproject.HelloApplication; import java.io.IOException; @@ -15,7 +14,7 @@ public class TelegramApplication extends Application { FXMLLoader fxmlLoader = new FXMLLoader(TelegramApplication.class.getResource("/org/to/telegramfinalproject/sidebar_menu.fxml")); Scene scene = new Scene(fxmlLoader.load(), 1480, 820); - scene.getStylesheets().add(getClass().getResource("/org/to/telegramfinalproject/CSS/sidebar_menu.css").toExternalForm()); + scene.getStylesheets().add(getClass().getResource("/org/to/telegramfinalproject/CSS/light_theme.css").toExternalForm()); stage.setTitle("Telegram"); stage.setScene(scene); diff --git a/src/main/resources/org/to/telegramfinalproject/CSS/dark_theme.css b/src/main/resources/org/to/telegramfinalproject/CSS/dark_theme.css new file mode 100644 index 0000000..0b92773 --- /dev/null +++ b/src/main/resources/org/to/telegramfinalproject/CSS/dark_theme.css @@ -0,0 +1,52 @@ +/* Sidebar buttons */ +.sidebar-btn { + -fx-background-color: transparent; + -fx-text-fill: white; + -fx-font-size: 14px; + -fx-pref-width: 230; + -fx-alignment: CENTER_LEFT; + -fx-padding: 8 0 8 16; +} +.sidebar-btn:hover { + -fx-background-color: #2f3e50; + -fx-cursor: hand; +} + +/* Telegram-style toggle switch */ +.telegram-toggle { + -fx-background-color: #555; + -fx-background-radius: 15; + -fx-padding: 2; + -fx-pref-width: 40; + -fx-pref-height: 20; + -fx-alignment: center-left; + -fx-cursor: hand; +} +.telegram-toggle.on { + -fx-background-color: #4fa8f0; +} +.toggle-thumb { + -fx-background-color: white; + -fx-background-radius: 50%; + -fx-pref-width: 16; + -fx-pref-height: 16; + -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 3, 0, 0, 1); +} + +/* Separator */ +.thin-separator { + -fx-background-color: transparent; + -fx-padding: 0; +} +.thin-separator .line { + -fx-border-color: #2e3948; /* Telegram's subtle dark line */ + -fx-border-width: 0.5px; +} + +/* Theme background & text */ +#sidebarRoot { + -fx-background-color: #1b2735; /* dark theme */ +} +.button, .label { + -fx-text-fill: white; +} diff --git a/src/main/resources/org/to/telegramfinalproject/CSS/light_theme.css b/src/main/resources/org/to/telegramfinalproject/CSS/light_theme.css new file mode 100644 index 0000000..7ef5c23 --- /dev/null +++ b/src/main/resources/org/to/telegramfinalproject/CSS/light_theme.css @@ -0,0 +1,52 @@ +/* Sidebar buttons */ +.sidebar-btn { + -fx-background-color: transparent; + -fx-text-fill: black; + -fx-font-size: 14px; + -fx-pref-width: 230; + -fx-alignment: CENTER_LEFT; + -fx-padding: 8 0 8 16; +} +.sidebar-btn:hover { + -fx-background-color: #e6e6e6; + -fx-cursor: hand; +} + +/* Telegram-style toggle switch */ +.telegram-toggle { + -fx-background-color: #aaa; + -fx-background-radius: 15; + -fx-padding: 2; + -fx-pref-width: 40; + -fx-pref-height: 20; + -fx-alignment: center-left; + -fx-cursor: hand; +} +.telegram-toggle.on { + -fx-background-color: #4fa8f0; +} +.toggle-thumb { + -fx-background-color: white; + -fx-background-radius: 50%; + -fx-pref-width: 16; + -fx-pref-height: 16; + -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 3, 0, 0, 1); +} + +/* Separator */ +.thin-separator { + -fx-background-color: transparent; + -fx-padding: 0; +} +.thin-separator .line { + -fx-border-color: #ccc; + -fx-border-width: 0.5px; +} + +/* Theme background & text */ +#sidebarRoot { + -fx-background-color: white; +} +.button, .label { + -fx-text-fill: black; +} diff --git a/src/main/resources/org/to/telegramfinalproject/Icons/contacts_dark.png b/src/main/resources/org/to/telegramfinalproject/Icons/contacts_dark.png new file mode 100644 index 0000000..2c81681 Binary files /dev/null and b/src/main/resources/org/to/telegramfinalproject/Icons/contacts_dark.png differ diff --git a/src/main/resources/org/to/telegramfinalproject/Icons/contacts_light.png b/src/main/resources/org/to/telegramfinalproject/Icons/contacts_light.png new file mode 100644 index 0000000..3a71414 Binary files /dev/null and b/src/main/resources/org/to/telegramfinalproject/Icons/contacts_light.png differ diff --git a/src/main/resources/org/to/telegramfinalproject/Icons/my_profile_dark.png b/src/main/resources/org/to/telegramfinalproject/Icons/my_profile_dark.png new file mode 100644 index 0000000..6d23203 Binary files /dev/null and b/src/main/resources/org/to/telegramfinalproject/Icons/my_profile_dark.png differ diff --git a/src/main/resources/org/to/telegramfinalproject/Icons/my_profile_light.png b/src/main/resources/org/to/telegramfinalproject/Icons/my_profile_light.png new file mode 100644 index 0000000..e865d56 Binary files /dev/null and b/src/main/resources/org/to/telegramfinalproject/Icons/my_profile_light.png differ diff --git a/src/main/resources/org/to/telegramfinalproject/Icons/new_channel_dark.png b/src/main/resources/org/to/telegramfinalproject/Icons/new_channel_dark.png new file mode 100644 index 0000000..156c170 Binary files /dev/null and b/src/main/resources/org/to/telegramfinalproject/Icons/new_channel_dark.png differ diff --git a/src/main/resources/org/to/telegramfinalproject/Icons/new_channel_light.png b/src/main/resources/org/to/telegramfinalproject/Icons/new_channel_light.png new file mode 100644 index 0000000..884f5b5 Binary files /dev/null and b/src/main/resources/org/to/telegramfinalproject/Icons/new_channel_light.png differ diff --git a/src/main/resources/org/to/telegramfinalproject/Icons/new_group_dark.png b/src/main/resources/org/to/telegramfinalproject/Icons/new_group_dark.png new file mode 100644 index 0000000..1280107 Binary files /dev/null and b/src/main/resources/org/to/telegramfinalproject/Icons/new_group_dark.png differ diff --git a/src/main/resources/org/to/telegramfinalproject/Icons/new_group_light.png b/src/main/resources/org/to/telegramfinalproject/Icons/new_group_light.png new file mode 100644 index 0000000..f2c4969 Binary files /dev/null and b/src/main/resources/org/to/telegramfinalproject/Icons/new_group_light.png differ diff --git a/src/main/resources/org/to/telegramfinalproject/Icons/night_mode_dark.png b/src/main/resources/org/to/telegramfinalproject/Icons/night_mode_dark.png new file mode 100644 index 0000000..1ebf9f6 Binary files /dev/null and b/src/main/resources/org/to/telegramfinalproject/Icons/night_mode_dark.png differ diff --git a/src/main/resources/org/to/telegramfinalproject/Icons/night_mode_light.png b/src/main/resources/org/to/telegramfinalproject/Icons/night_mode_light.png new file mode 100644 index 0000000..8f9515a Binary files /dev/null and b/src/main/resources/org/to/telegramfinalproject/Icons/night_mode_light.png differ diff --git a/src/main/resources/org/to/telegramfinalproject/Icons/saved_messages_dark.png b/src/main/resources/org/to/telegramfinalproject/Icons/saved_messages_dark.png new file mode 100644 index 0000000..eb3abef Binary files /dev/null and b/src/main/resources/org/to/telegramfinalproject/Icons/saved_messages_dark.png differ diff --git a/src/main/resources/org/to/telegramfinalproject/Icons/saved_messages_light.png b/src/main/resources/org/to/telegramfinalproject/Icons/saved_messages_light.png new file mode 100644 index 0000000..d5c2f67 Binary files /dev/null and b/src/main/resources/org/to/telegramfinalproject/Icons/saved_messages_light.png differ diff --git a/src/main/resources/org/to/telegramfinalproject/Icons/settings_dark.png b/src/main/resources/org/to/telegramfinalproject/Icons/settings_dark.png new file mode 100644 index 0000000..78719ff Binary files /dev/null and b/src/main/resources/org/to/telegramfinalproject/Icons/settings_dark.png differ diff --git a/src/main/resources/org/to/telegramfinalproject/Icons/settings_light.png b/src/main/resources/org/to/telegramfinalproject/Icons/settings_light.png new file mode 100644 index 0000000..5668acb Binary files /dev/null and b/src/main/resources/org/to/telegramfinalproject/Icons/settings_light.png differ diff --git a/src/main/resources/org/to/telegramfinalproject/Icons/telegram_features_dark.png b/src/main/resources/org/to/telegramfinalproject/Icons/telegram_features_dark.png new file mode 100644 index 0000000..dab579c Binary files /dev/null and b/src/main/resources/org/to/telegramfinalproject/Icons/telegram_features_dark.png differ diff --git a/src/main/resources/org/to/telegramfinalproject/Icons/telegram_features_light.png b/src/main/resources/org/to/telegramfinalproject/Icons/telegram_features_light.png new file mode 100644 index 0000000..2d15e68 Binary files /dev/null and b/src/main/resources/org/to/telegramfinalproject/Icons/telegram_features_light.png differ diff --git a/src/main/resources/org/to/telegramfinalproject/Icons/telegram_qna_dark.png b/src/main/resources/org/to/telegramfinalproject/Icons/telegram_qna_dark.png new file mode 100644 index 0000000..671d745 Binary files /dev/null and b/src/main/resources/org/to/telegramfinalproject/Icons/telegram_qna_dark.png differ diff --git a/src/main/resources/org/to/telegramfinalproject/Icons/telegram_qna_light.png b/src/main/resources/org/to/telegramfinalproject/Icons/telegram_qna_light.png new file mode 100644 index 0000000..ac99f53 Binary files /dev/null and b/src/main/resources/org/to/telegramfinalproject/Icons/telegram_qna_light.png differ diff --git a/src/main/resources/org/to/telegramfinalproject/sidebar_menu.fxml b/src/main/resources/org/to/telegramfinalproject/sidebar_menu.fxml index 2065f58..41153a8 100644 --- a/src/main/resources/org/to/telegramfinalproject/sidebar_menu.fxml +++ b/src/main/resources/org/to/telegramfinalproject/sidebar_menu.fxml @@ -6,9 +6,8 @@ - @@ -17,32 +16,46 @@ + - - - -