ISSUE-30: Main Layout

- Updated public/index.html to add feather icons - Updated router to redirect to main view - Updated css files to add more colors and few adjustments - Updated logo.png - Added Main view - Added new components for the main layout within community directory - Added white and black sample logos Fixes CodingGarden#30 💚
carlan · Jul 4, 2020 · 0b9bb6e · 0b9bb6e
1 parent ef9ddc9
commit 0b9bb6e
Show file tree

Hide file tree

Showing 20 changed files with 1,182 additions and 13 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -7,6 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>entropychat.app</title>
     <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
   </head>
   <body>
     <noscript>

diff --git a/client/src/assets/logo-black.png b/client/src/assets/logo-black.png
diff --git a/client/src/assets/logo-white.png b/client/src/assets/logo-white.png
diff --git a/client/src/assets/logo.png b/client/src/assets/logo.png
diff --git a/client/src/components/community/ChannelButton.vue b/client/src/components/community/ChannelButton.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="channel-button" :class="selected && 'active'">
+    <div>
+      <i data-feather="hash" class="hashtag"></i>
+      <span>{{name}}</span>
+    </div>
+    <div class="actions" v-if="true">
+      <i data-feather="user-plus" class="add"></i>
+      <i data-feather="settings" class="settings"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+import { onMounted } from '@vue/composition-api';
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    onMounted(() => {
+      // eslint-disable-next-line no-undef
+      feather.replace();
+    });
+  },
+};
+</script>
+
+<style lang="scss">
+  .channel-button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 5px 3px;
+
+    border-radius: 5px;
+
+    background-color: transparent;
+    transition: background-color 0.3s;
+
+    cursor: pointer;
+
+    .actions {
+      visibility: hidden;
+    }
+
+    div {
+      display: flex;
+      align-items: center;
+    }
+
+    div span {
+      font-size: 13px;
+
+      margin-left: 5px;
+
+      color: $septenary;
+    }
+
+    &:hover {
+      background-color: $senary;
+      // padding: 3px 3px;
+
+      div span {
+        font-weight: bold;
+        color: $white;
+      }
+
+      div.actions {
+        visibility: visible;
+      }
+    }
+
+    .hashtag {
+      width: 18px;
+      height: 18px;
+
+      color: $symbol;
+    }
+
+    .add {
+      width: 16px;
+      height: 16px;
+
+      color: $symbol;
+
+      cursor: pointer;
+
+      transition: color 0.3s;
+
+      &:hover {
+        color: $white;
+      }
+    }
+
+    .settings {
+      width: 16px;
+      height: 16px;
+
+      margin-left: 4px;
+
+      color: $symbol;
+
+      cursor: pointer;
+
+      transition: color 0.3s;
+
+      &:hover {
+        color: $white;
+      }
+    }
+  }
+</style>
diff --git a/client/src/components/community/Communities.vue b/client/src/components/community/Communities.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="communities">
+    <CommunityButton :isHome="true" />
+
+    <div class="separator"></div>
+
+    <CommunityButton draggable="true" />
+    <CommunityButton :hasNotifications="true" :mentions="1" draggable="true" />
+    <CommunityButton draggable="true" />
+    <CommunityButton :mentions="1" draggable="true" />
+    <CommunityButton :hasNotifications="true" draggable="true" />
+    <CommunityButton draggable="true" />
+    <CommunityButton draggable="true" />
+    <CommunityButton draggable="true" />
+    <CommunityButton draggable="true" />
+    <CommunityButton draggable="true" />
+    <CommunityButton draggable="true" />
+  </div>
+</template>
+
+<script>
+import CommunityButton from '@/components/community/CommunityButton.vue';
+
+export default {
+  components: {
+    CommunityButton,
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '@/styles/abstracts/_variables.scss';
+
+  .communities {
+    grid-area: COM;
+
+    max-height: 100vh;
+    overflow-y: scroll;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+
+    background-color: $quaternary;
+    padding: 11px 0;
+
+    &::-webkit-scrollbar {
+      display: none;
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+    }
+
+    .separator {
+      width: 32px;
+
+      border-bottom: 2px solid $quinary;
+      margin-bottom: 8px;
+    }
+  }
+</style>
diff --git a/client/src/components/community/CommunityButton.vue b/client/src/components/community/CommunityButton.vue
@@ -0,0 +1,117 @@
+<template>
+  <button :class="[ 'community-button',
+                    isHome && 'home' || 'notHome',
+                    hasNotifications && 'notification',
+                    mentions > 0 && 'mention', ]">
+    <span v-if="isHome"><img src="@/assets/logo-white.png" /></span>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+    isHome: {
+      type: Boolean,
+      default: false,
+    },
+    hasNotifications: {
+      type: Boolean,
+      default: false,
+    },
+    mentions: Number,
+  },
+};
+</script>
+
+<style lang="scss">
+  .community-button {
+    width: 48px;
+    height: 48px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    margin-bottom: 8px;
+
+    background-color: $secondary;
+
+    cursor: pointer;
+
+    position: relative;
+
+    border-radius: 25px;
+
+    img {
+      width: 32px;
+      height: 32px;
+    }
+
+    transition: border-radius .3s, background-color .3s;
+
+    &.active, &:hover {
+      border-radius: 15px;
+    }
+
+    &.home {
+      background-color: $primary;
+
+      &.active, &:hover {
+        background-color: $green;
+      }
+    }
+
+    &.notHome {
+      &.active, &:hover {
+        background-color: $discord;
+      }
+    }
+
+    &.notification {
+      &::before {
+        content: '';
+
+        width: 9px;
+        height: 9px;
+
+        position: absolute;
+        left: -17px;
+        top: calc(50% - 4.5px);
+
+        background-color: $white;
+        border-radius: 25px;
+      }
+    }
+
+    &.mention {
+      &::after {
+        // TODO: Bind to computed property or something
+        content: '1';
+
+        width: auto;
+        height: 16px;
+
+        position: absolute;
+        bottom: -4px;
+        right: -4px;
+
+        background-color: $notification;
+        border-radius: 12px;
+        padding: 0 4px;
+
+        border: 4px solid $quinary;
+
+        text-align: right;
+        font-size: 13px;
+        font-weight: bold;
+
+        color: $white;
+      }
+    }
+  }
+</style>