Merge pull request #38 from jasperng-nus/branch-help-command

Creating help menu

build.gradle

@@ -4,6 +4,13 @@ plugins {
     id 'com.github.johnrengelman.shadow' version '7.1.2'
     id 'application'
     id 'jacoco'
+    id 'org.openjfx.javafxplugin' version '0.1.0'
+}
+
+javafx {
+    version = '17.0.7'
+    modules = ['javafx.controls', 'javafx.fxml', 'javafx.web']
+
 }
 
 mainClassName = 'seedu.address.Main'
@@ -56,6 +63,10 @@ dependencies {
     implementation group: 'org.openjfx', name: 'javafx-graphics', version: javaFxVersion, classifier: 'win'
     implementation group: 'org.openjfx', name: 'javafx-graphics', version: javaFxVersion, classifier: 'mac'
     implementation group: 'org.openjfx', name: 'javafx-graphics', version: javaFxVersion, classifier: 'linux'
+    implementation group: 'org.openjfx', name: 'javafx-web', version: javaFxVersion, classifier: 'win'
+    implementation group: 'org.openjfx', name: 'javafx-web', version: javaFxVersion, classifier: 'mac'
+    implementation group: 'org.openjfx', name: 'javafx-web', version: javaFxVersion, classifier: 'linux'
+
 
     implementation group: 'com.fasterxml.jackson.core', name: 'jackson-databind', version: '2.7.0'
     implementation group: 'com.fasterxml.jackson.datatype', name: 'jackson-datatype-jsr310', version: '2.7.4'

src/main/java/seedu/address/ui/HelpWindow.java

@@ -3,10 +3,13 @@
 import java.util.logging.Logger;
 
 import javafx.fxml.FXML;
+import javafx.scene.Scene;
 import javafx.scene.control.Button;
 import javafx.scene.control.Label;
 import javafx.scene.input.Clipboard;
 import javafx.scene.input.ClipboardContent;
+import javafx.scene.web.WebEngine;
+import javafx.scene.web.WebView;
 import javafx.stage.Stage;
 import seedu.address.commons.core.LogsCenter;
 
@@ -15,11 +18,13 @@
  */
 public class HelpWindow extends UiPart<Stage> {
 
-    public static final String USERGUIDE_URL = "https://se-education.org/addressbook-level3/UserGuide.html";
-    public static final String HELP_MESSAGE = "Refer to the user guide: " + USERGUIDE_URL;
+    public static final String USERGUIDE_URL = "https://ay2324s2-cs2103t-t13-2.github.io/tp/UserGuide.html";
+    public static final String HELP_MESSAGE = "Need some help? Check out our friendly User Guide here: "
+                                                    + USERGUIDE_URL;
 
     private static final Logger logger = LogsCenter.getLogger(HelpWindow.class);
     private static final String FXML = "HelpWindow.fxml";
+    private WebView webView;
 
     @FXML
     private Button copyButton;
@@ -35,6 +40,11 @@ public class HelpWindow extends UiPart<Stage> {
     public HelpWindow(Stage root) {
         super(FXML, root);
         helpMessage.setText(HELP_MESSAGE);
+
+        webView = new WebView();
+        WebEngine webEngine = webView.getEngine();
+        String userGuidePath = getClass().getResource("/html/InternBook_UserGuide.html").toExternalForm();
+        webEngine.load(userGuidePath);
     }
 
     /**
@@ -99,4 +109,13 @@ private void copyUrl() {
         url.putString(USERGUIDE_URL);
         clipboard.setContent(url);
     }
+
+    /**
+     * Opens the user guide in web view.
+     */
+    @FXML
+    private void openUserGuide() {
+        getRoot().setScene(new Scene(webView, 800, 600));
+        getRoot().show();
+    }
 }

src/main/resources/html/InternBook_UserGuide_files/main.css

@@ -0,0 +1,170 @@
+mark {
+  background-color: #ff0;
+  border-radius: 5px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.indented {
+  padding-left: 20px;
+}
+
+.theme-card img {
+  width: 100%;
+}
+
+/* Scrollbar */
+
+.slim-scroll::-webkit-scrollbar {
+  width: 5px;
+}
+
+.slim-scroll::-webkit-scrollbar-thumb {
+  background: #808080;
+  border-radius: 20px;
+}
+
+.slim-scroll::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 20px;
+}
+
+.slim-scroll-blue::-webkit-scrollbar {
+  width: 5px;
+}
+
+.slim-scroll-blue::-webkit-scrollbar-thumb {
+  background: #00b0ef;
+  border-radius: 20px;
+}
+
+.slim-scroll-blue::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 20px;
+}
+
+/* Layout containers */
+
+#flex-body {
+  display: flex;
+  flex: 1;
+  align-items: start;
+}
+
+#content-wrapper {
+  flex: 1;
+  margin: 0 auto;
+  min-width: 0;
+  max-width: 1000px;
+  overflow-x: auto;
+  padding: 0.8rem 20px 0 20px;
+  transition: 0.4s;
+  -webkit-transition: 0.4s;
+}
+
+#site-nav,
+#page-nav {
+  display: flex;
+  flex-direction: column;
+  position: sticky;
+  top: var(--sticky-header-height);
+  flex: 0 0 auto;
+  max-width: 300px;
+  max-height: calc(100vh - var(--sticky-header-height));
+  width: 300px;
+}
+
+#site-nav {
+  border-right: 1px solid lightgrey;
+  padding-bottom: 20px;
+  z-index: 999;
+}
+
+.site-nav-top {
+  margin: 0.8rem 0;
+  padding: 0 12px 12px 12px;
+}
+
+.nav-component {
+  overflow-y: auto;
+}
+
+#page-nav {
+  border-left: 1px solid lightgrey;
+}
+
+@media screen and (max-width: 1299.98px) {
+  #page-nav {
+    display: none;
+  }
+}
+
+/* Bootstrap medium(md) responsive breakpoint */
+@media screen and (max-width: 991.98px) {
+  #site-nav {
+    display: none;
+  }
+}
+
+/* Bootstrap small(sm) responsive breakpoint */
+@media (max-width: 767.98px) {
+  .indented {
+    padding-left: 10px;
+  }
+
+  #content-wrapper {
+    padding: 0 10px;
+  }
+}
+
+/* Bootstrap extra small(xs) responsive breakpoint */
+@media screen and (max-width: 575.98px) {
+  #site-nav {
+    display: none;
+  }
+}
+
+/* Hide site navigation when printing */
+@media print {
+  #site-nav {
+    display: none;
+  }
+
+  #page-nav {
+    display: none;
+  }
+
+  /* Reduce font size when printing */
+  h1 {
+      font-size: 1.2rem !important;
+  }
+  h2 {
+      font-size: 1.0rem !important;
+  }
+  h3 {
+      font-size: 0.9rem !important;
+  }
+  h4 {
+      font-size: 0.8rem !important;
+  }
+  h5 {
+      font-size: 0.7rem !important;
+  }
+  body {
+      font-size: 0.65rem !important;
+  }
+  .btn {
+      font-size: 0.65rem !important;
+  }
+  img {
+      zoom: 0.8;  /* might not work on some browsers */
+  }
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #e46c0a;
+}

src/main/resources/html/InternBook_UserGuide_files/markbind-plugin-anchors.css

@@ -0,0 +1,23 @@
+.fa.fa-anchor {
+    color: #ccc;
+    display: inline;
+    font-size: 14px;
+    margin-left: 10px;
+    padding: 3px;
+    text-decoration: none;
+    visibility: hidden;
+}
+
+.fa.fa-anchor:hover {
+    color: #555;
+}
+
+h1:hover > .fa.fa-anchor,
+h2:hover > .fa.fa-anchor,
+h3:hover > .fa.fa-anchor,
+h4:hover > .fa.fa-anchor,
+h5:hover > .fa.fa-anchor,
+h6:hover > .fa.fa-anchor,
+.header-wrapper:hover > .fa.fa-anchor {
+    visibility: visible;
+}