mastodon-inspired UI

components/sidebar.js

@@ -24,7 +24,7 @@ let Filter = create({
 
   render: function() {
     return <div className="filter">
-        <input ref={this.inputRef}/>
+        <input ref={this.inputRef} placeholder="Filter roomlist"/>
       </div>
   }
 })
@@ -32,10 +32,27 @@ let Filter = create({
 let List = create({
   displayName: "List",
 
+  getInitialState: function() {
+    return {
+      roomId: 0
+    }
+  },
+
+  select: function(id) {
+    this.setState({roomId: id})
+  },
+
   render: function() {
-    let rooms = ["Test", "aaaa", "Neo", "zzz", "Iris"]
+    let rooms = ["Neo", "version 4", "Codename", "Iris", "Let's All Love Lain"]
     let roomList = rooms.map((room, i) => {
-      return <RoomListItem name={room} filter={this.props.filter} key={i}/>
+      return <RoomListItem
+        active={this.state.roomId == i}
+        name={room}
+        filter={this.props.filter}
+        key={i}
+        roomId={i}
+        select={this.select}
+      />
     })
     return <div className="list">
       {roomList}
@@ -52,12 +69,25 @@ let RoomListItem = create({
     }
   },
 
+  setRef: function(ref) {
+    if (ref == null) {
+      return
+    }
+    this.setState({ref: ref})
+    ref.addEventListener("click", () => {this.props.select(this.props.roomId)})
+  },
+
   render: function() {
     if (this.state.filterName.indexOf(this.props.filter) == -1) {
       return null
     }
-    return <div className="roomListItem">
-      {this.props.name}
+    let className = "roomListItem"
+    if (this.props.active) {
+      className += " active";
+    }
+    return <div className={className} ref={this.setRef}>
+      <img id="avatar" src="https://placekitten.com/100/100"/>
+      <span id="name">{this.props.name}</span>
     </div>
   }
 })

public/scss/style.scss

@@ -1,9 +1,17 @@
-$bg: #1c1c1c;
+$bg: #1b1b1b;
+$bg0: #2c2c2c;
+$bg1: #353535;
+$bg2: #4b4b4b;
+$bg3: #888888;
+$bg4: #ebebeb;
+$bg5: #ffffff;
+
+$spacing: 0.7rem;
 
 html, body {
   margin: 0;
   padding: 0;
-  background: #1c1c1c;
+  background: $bg;
   color: white;
 }
 
@@ -20,6 +28,7 @@ body {
 
 .sidebar {
   flex: 0 0 15vw;
+  font-size: 1.4rem;
 }
 
 .main {
@@ -27,6 +36,7 @@ body {
 }
 
 .sidebar, .main {
+  margin: $spacing;
   display: flex;
   flex-direction: column;
 
@@ -36,18 +46,66 @@ body {
   }
 }
 
-.filter {
-  background: red;
+.sidebar {
+  margin-right: 0;
+
+  .filter {
+    margin-bottom: $spacing;
+
+    input {
+      width: 100%;
+      box-sizing: border-box;
+      padding: $spacing;
+      background: $bg2;
+      border: none;
+      color: white;
+      font-size: 1rem;
+    }
+  }
 }
 
 .list {
-  background: purple
+  background: $bg0;
+
+  div {
+    cursor: pointer;
+    border-bottom: 1px solid lighten($bg1, 3);
+    padding: $spacing;
+  }
+
+  div.active {
+    background: lighten($bg1, 5);
+  }
+}
+
+.roomListItem {
+  #avatar {
+    line-height: 2rem;
+    height: 2rem;
+    width: 2rem;
+    vertical-align: middle;
+    object-fit: cover;
+  }
+
+  #name {
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.2rem;
+    vertical-align: top;
+    padding-left: $spacing;
+  }
 }
 
 .info {
-  background: lime;
+  background: $bg1;
+  padding: $spacing;
 }
 
 .chat {
-  background: blue;
+  padding: $spacing;
+  background: $bg0;
+}
+
+.input {
+  background: $bg1;
 }