Add list panels and first UI prototype

src/main/java/seedu/address/model/phone/Capacity.java

@@ -13,14 +13,14 @@ public enum Capacity {
     SIZE_512GB("512GB"),
     SIZE_1024GB("1024GB");
 
-    private final String label;
+    public final String value;
 
-    private Capacity(String label) {
-        this.label = label;
+    private Capacity(String value) {
+        this.value = value;
     }
 
     @Override
     public String toString() {
-        return this.label;
+        return this.value;
     }
 }

src/main/java/seedu/address/ui/CustomerCard.java → src/main/java/seedu/address/ui/cards/CustomerCard.java

@@ -1,4 +1,4 @@
-package seedu.address.ui;
+package seedu.address.ui.cards;
 
 import java.util.Comparator;
 
@@ -8,6 +8,7 @@
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.Region;
 import seedu.address.model.customer.Customer;
+import seedu.address.ui.UiPart;
 
 /**
  * An UI component that displays information of a {@code Customer}.

src/main/java/seedu/address/ui/cards/PhoneCard.java

@@ -0,0 +1,83 @@
+package seedu.address.ui.cards;
+
+import java.util.Comparator;
+
+import javafx.fxml.FXML;
+import javafx.scene.control.Label;
+import javafx.scene.layout.FlowPane;
+import javafx.scene.layout.HBox;
+import javafx.scene.layout.Region;
+import seedu.address.model.phone.Phone;
+import seedu.address.ui.UiPart;
+
+
+/**
+ * An UI component that displays information of a {@code Phone}
+ */
+public class PhoneCard extends UiPart<Region> {
+
+    private static final String FXML = "PhoneListCard.fxml";
+
+    /**
+     * Note: Certain keywords such as "location" and "resources" are reserved keywords in JavaFX.
+     * As a consequence, UI elements' variable names cannot be set to such keywords
+     * or an exception will be thrown by JavaFX during runtime.
+     *
+     * @see <a href="https://github.com/se-edu/addressbook-level4/issues/336">The issue on AddressBook level 4</a>
+     */
+
+    public final Phone phone;
+
+    // No price displayed here for phone
+    @FXML
+    private HBox cardPane;
+    @FXML
+    private Label name;
+    @FXML
+    private Label colour;
+    @FXML
+    private Label cost;
+    @FXML
+    private Label capacity;
+    @FXML
+    private Label brand;
+    @FXML
+    private Label id;
+    @FXML
+    private FlowPane tags;
+
+    public PhoneCard(Phone phone, int displayedIndex) {
+        super(FXML);
+        this.phone = phone;
+        id.setText(displayedIndex + ". ");
+        brand.setText(phone.getBrand().value);
+        capacity.setText(phone.getCapacity().value);
+        colour.setText(phone.getColour().value);
+        cost.setText(phone.getCost().value);
+        name.setText(phone.getName().fullName);
+        phone.getTags().stream()
+                .sorted(Comparator.comparing(tag -> tag.tagName))
+                .forEach(tag -> tags.getChildren().add(new Label(tag.tagName)));
+
+    }
+
+
+    @Override
+    public boolean equals(Object other) {
+        // short circuit if same object
+        if (other == this) {
+            return true;
+        }
+
+        // instanceof handles nulls
+        if (!(other instanceof PhoneCard)) {
+            return false;
+        }
+
+        // state check
+        PhoneCard card = (PhoneCard) other;
+        return id.getText().equals(card.id.getText())
+                && phone.equals(card.phone);
+    }
+
+}

src/main/java/seedu/address/ui/CustomerListPanel.java → src/main/java/seedu/address/ui/panels/CustomerListPanel.java

@@ -1,4 +1,4 @@
-package seedu.address.ui;
+package seedu.address.ui.panels;
 
 import java.util.logging.Logger;
 
@@ -9,9 +9,11 @@
 import javafx.scene.layout.Region;
 import seedu.address.commons.core.LogsCenter;
 import seedu.address.model.customer.Customer;
+import seedu.address.ui.UiPart;
+import seedu.address.ui.cards.CustomerCard;
 
 /**
- * Panel containing the list of persons.
+ * Panel containing the list of customers.
  */
 public class CustomerListPanel extends UiPart<Region> {
     private static final String FXML = "PersonListPanel.fxml";
@@ -27,7 +29,7 @@ public CustomerListPanel(ObservableList<Customer> customerList) {
     }
 
     /**
-     * Custom {@code ListCell} that displays the graphics of a {@code Person} using a {@code PersonCard}.
+     * Custom {@code ListCell} that displays the graphics of a {@code Customer} using a {@code CustomerCard}.
      */
     class CustomerListViewCell extends ListCell<Customer> {
         @Override

src/main/java/seedu/address/ui/panels/PhoneListPanel.java

@@ -0,0 +1,48 @@
+package seedu.address.ui.panels;
+
+import java.util.logging.Logger;
+
+import javafx.collections.ObservableList;
+import javafx.fxml.FXML;
+import javafx.scene.control.ListCell;
+import javafx.scene.control.ListView;
+import javafx.scene.layout.Region;
+import seedu.address.commons.core.LogsCenter;
+import seedu.address.model.phone.Phone;
+import seedu.address.ui.UiPart;
+import seedu.address.ui.cards.PhoneCard;
+
+/**
+ * Panel containing the list of phones.
+ */
+public class PhoneListPanel extends UiPart<Region> {
+    private static final String FXML = "PersonListPanel.fxml";
+    private final Logger logger = LogsCenter.getLogger(CustomerListPanel.class);
+
+    @FXML
+    private ListView<Phone> phoneListView;
+
+    public PhoneListPanel(ObservableList<Phone> phoneList) {
+        super(FXML);
+        phoneListView.setItems(phoneList);
+        phoneListView.setCellFactory(listView -> new PhoneListViewCell());
+    }
+
+    /**
+     * Custom {@code ListCell} that displays the graphics of a {@code Phone} using a {@code PhoneCard}.
+     */
+    class PhoneListViewCell extends ListCell<Phone> {
+        @Override
+        protected void updateItem(Phone phone, boolean empty) {
+            super.updateItem(phone, empty);
+
+            if (empty || phone == null) {
+                setGraphic(null);
+                setText(null);
+            } else {
+                setGraphic(new PhoneCard(phone, getIndex() + 1).getRoot());
+            }
+        }
+    }
+
+}

src/main/resources/view/CustomerListCard.fxml

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.layout.ColumnConstraints?>
+<?import javafx.scene.layout.FlowPane?>
+<?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.Region?>
+<?import javafx.scene.layout.VBox?>
+
+<HBox id="cardPane" fx:id="cardPane" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
+    <GridPane HBox.hgrow="ALWAYS">
+        <columnConstraints>
+            <ColumnConstraints hgrow="SOMETIMES" minWidth="10" prefWidth="150" />
+        </columnConstraints>
+        <VBox alignment="CENTER_LEFT" minHeight="105" GridPane.columnIndex="0">
+            <padding>
+                <Insets top="5" right="5" bottom="5" left="15" />
+            </padding>
+            <HBox spacing="5" alignment="CENTER_LEFT">
+                <Label fx:id="id" styleClass="cell_big_label">
+                    <minWidth>
+                        <!-- Ensures that the label text is never truncated -->
+                        <Region fx:constant="USE_PREF_SIZE" />
+                    </minWidth>
+                </Label>
+                <Label fx:id="name" text="\$first" styleClass="cell_big_label" />
+            </HBox>
+            <FlowPane fx:id="tags" />
+            <Label fx:id="contactNumber" styleClass="cell_small_label" text="\$contactNumber" />
+            <Label fx:id="email" styleClass="cell_small_label" text="\$email" />
+        </VBox>
+    </GridPane>
+</HBox>

src/main/resources/view/CustomerListPanel.fxml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.scene.control.ListView?>
+<?import javafx.scene.layout.VBox?>
+
+<VBox xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
+    <ListView fx:id="customerListView" VBox.vgrow="ALWAYS" styleClass="pane-with-border"/>
+</VBox>

src/main/resources/view/DarkTheme.css

@@ -1,6 +1,6 @@
 .background {
-    -fx-background-color: derive(#1d1d1d, 20%);
-    background-color: #383838; /* Used in the default.html file */
+    -fx-background-color: derive(#484B95, 20%);
+    background-color: #484B95; /* Used in the default.html file */
 }
 
 .label {
@@ -77,30 +77,32 @@
 }
 
 .split-pane:horizontal .split-pane-divider {
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(#484B95, 20%);
     -fx-border-color: transparent transparent transparent #4d4d4d;
 }
 
 .split-pane {
     -fx-border-radius: 1;
     -fx-border-width: 1;
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(#484B95, 20%);
 }
 
 .list-view {
     -fx-background-insets: 0;
     -fx-padding: 0;
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(#484B95, 20%);
+    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 10, 0.5, 0.0, 0.0);
 }
 
 .list-cell {
     -fx-label-padding: 0 0 0 0;
     -fx-graphic-text-gap : 0;
     -fx-padding: 0 0 0 0;
+    -fx-background-color: #484B95;
 }
 
 .list-cell:filled:even {
-    -fx-background-color: #3c3e3f;
+    -fx-background-color: #484B99;
 }
 
 .list-cell:filled:odd {
@@ -133,28 +135,32 @@
 }
 
 .stack-pane {
-     -fx-background-color: derive(#1d1d1d, 20%);
+     -fx-background-color: derive(#484B95, 20%);
+
+
 }
 
 .pane-with-border {
-     -fx-background-color: derive(#1d1d1d, 20%);
-     -fx-border-color: derive(#1d1d1d, 10%);
+     -fx-background-color: derive(white, 20%);
+     -fx-border-color: derive(white, 10%);
      -fx-border-top-width: 1px;
+    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 10, 0.5, 0.0, 0.0);
 }
 
 .status-bar {
-    -fx-background-color: derive(#1d1d1d, 30%);
+    -fx-background-color: derive(#484B95, 30%);
 }
 
 .result-display {
-    -fx-background-color: transparent;
+    -fx-background-color: #484B95;
     -fx-font-family: "Segoe UI Light";
     -fx-font-size: 13pt;
     -fx-text-fill: white;
+    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 10, 0.5, 0.0, 0.0);
 }
 
 .result-display .label {
-    -fx-text-fill: black !important;
+    -fx-text-fill: white !important;
 }
 
 .status-bar .label {
@@ -193,13 +199,13 @@
 }
 
 .menu-bar {
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(white, 20%);
 }
 
 .menu-bar .label {
     -fx-font-size: 14pt;
     -fx-font-family: "Segoe UI Light";
-    -fx-text-fill: white;
+    -fx-text-fill: black;
     -fx-opacity: 0.9;
 }
 
@@ -330,10 +336,11 @@
 
 #filterField, #personListPanel, #personWebpage {
     -fx-effect: innershadow(gaussian, black, 10, 0, 0, 0);
+
 }
 
 #resultDisplay .content {
-    -fx-background-color: transparent, #383838, transparent, #383838;
+    -fx-background-color: #484B95, #484B95, #484B95, #484B95;
     -fx-background-radius: 0;
 }
 

src/main/resources/view/MainWindow.fxml

@@ -35,20 +35,20 @@
 
         <StackPane VBox.vgrow="NEVER" fx:id="commandBoxPlaceholder" styleClass="pane-with-border">
           <padding>
-            <Insets top="5" right="10" bottom="5" left="10" />
+            <Insets top="10" right="20" bottom="10" left="20" />
           </padding>
         </StackPane>
 
         <StackPane VBox.vgrow="NEVER" fx:id="resultDisplayPlaceholder" styleClass="pane-with-border"
                    minHeight="100" prefHeight="100" maxHeight="100">
           <padding>
-            <Insets top="5" right="10" bottom="5" left="10" />
+            <Insets top="10" right="20" bottom="10" left="20" />
           </padding>
         </StackPane>
 
         <VBox fx:id="personList" styleClass="pane-with-border" minWidth="340" prefWidth="340" VBox.vgrow="ALWAYS">
           <padding>
-            <Insets top="10" right="10" bottom="10" left="10" />
+            <Insets top="100" right="20" bottom="5" left="20" />
           </padding>
           <StackPane fx:id="personListPanelPlaceholder" VBox.vgrow="ALWAYS"/>
         </VBox>

src/main/resources/view/PersonListPanel.fxml

@@ -4,5 +4,5 @@
 <?import javafx.scene.layout.VBox?>
 
 <VBox xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
-  <ListView fx:id="personListView" VBox.vgrow="ALWAYS" />
+  <ListView fx:id="personListView" VBox.vgrow="ALWAYS" styleClass="pane-with-border"/>
 </VBox>