From 4872eee4ed5a6c6c183cf418d9ab0e957fadf966 Mon Sep 17 00:00:00 2001 From: Hamcha Date: Fri, 31 Jan 2020 12:52:52 +0100 Subject: [PATCH] Add a lot of styling --- frontend/index.html | 2 + frontend/src/ChannelList.tsx | 19 +++++++ frontend/src/Chatroom.tsx | 72 ++++++++++++++++++++++---- frontend/src/gql-types.ts | 2 +- frontend/style/layout.scss | 97 +++++++++++++++++++++++++++++++++++- frontend/style/sidebar.scss | 25 ---------- 6 files changed, 180 insertions(+), 37 deletions(-) delete mode 100644 frontend/style/sidebar.scss diff --git a/frontend/index.html b/frontend/index.html index 4ce4daf..ad7e8a9 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,6 +3,8 @@ Ripcord log viewer + + diff --git a/frontend/src/ChannelList.tsx b/frontend/src/ChannelList.tsx index 6b591ad..c6b29a7 100644 --- a/frontend/src/ChannelList.tsx +++ b/frontend/src/ChannelList.tsx @@ -11,6 +11,13 @@ function channelsFirst(a: GQLChannel, b: GQLChannel): number { return a.name > b.name ? 1 : -1; } +function isActive(currentChatData, ws, ch): boolean { + return ( + currentChatData?.currentChat?.workspace == ws && + currentChatData?.currentChat?.channel == ch + ); +} + export default function ChannelList() { const { loading, error, data } = useQuery(gql` { @@ -31,6 +38,15 @@ export default function ChannelList() { } `); + const { loading: currentChatLoading, data: currentChatData } = useQuery(gql` + { + currentChat { + workspace + channel + } + } + `); + if (loading) { return
Loading
; } @@ -51,6 +67,9 @@ export default function ChannelList() { {ws.channels.sort(channelsFirst).map(ch => (
  • gotoChat({ variables: { workspace: ws.name, channel: ch.name } diff --git a/frontend/src/Chatroom.tsx b/frontend/src/Chatroom.tsx index efe4d09..06108f9 100644 --- a/frontend/src/Chatroom.tsx +++ b/frontend/src/Chatroom.tsx @@ -1,8 +1,40 @@ -import React from "react"; +import React, { useEffect, useRef } from "react"; import { useQuery } from "@apollo/react-hooks"; import { gql } from "apollo-boost"; import { GQLMessage } from "./gql-types"; +function perDay(messages: GQLMessage[]) { + const days = messages.reduce((acc, msg) => { + const [day] = msg.time.split("T"); + if (!(day in acc)) { + acc[day] = []; + } + acc[day].push(msg); + return acc; + }, {}); + return Object.entries(days).sort(([a], [b]) => { + if (a > b) { + return 1; + } + return -1; + }); +} + +function formatTime(time: string): string { + const t = new Date(time); + return [t.getHours(), t.getMinutes(), t.getSeconds()] + .map(x => `0${x}`.slice(-2)) + .join(":"); +} + +function colorname(name: string): string { + const n = name + .split("") + .map(x => x.charCodeAt(0)) + .reduce((a, b) => a + b, 0); + return `hsl(${n % 360}, 60%, 50%)`; +} + export default function Chatroom() { const { loading: localLoading, @@ -47,6 +79,11 @@ export default function Chatroom() { } ); + const lastMessage = useRef(null); + useEffect(() => { + lastMessage.current?.scrollIntoView(); + }); + if (localLoading || remoteLoading) { return
    Loading
    ; } @@ -64,17 +101,34 @@ export default function Chatroom() { return (
      - {remoteData.messages.messages.map((msg: GQLMessage) => ( -
    • -
      -
      - {msg.userRealname} ({msg.username}) ({msg.messageId}) -
      -

      {msg.content}

      -
      + {perDay(remoteData.messages.messages).map(([day, messages]) => ( +
    • +
      {day}
      +
        + {messages.map((msg: GQLMessage) => ( +
      • +
        +
        +
        + {formatTime(msg.time)} +
        +
        + {msg.userRealname} +
        +
        {msg.username}
        +
        +

        {msg.content}

        +
        +
        • + ))} +
      • ))}
    +
    ); } diff --git a/frontend/src/gql-types.ts b/frontend/src/gql-types.ts index c0a3516..b15f038 100644 --- a/frontend/src/gql-types.ts +++ b/frontend/src/gql-types.ts @@ -4,7 +4,7 @@ export interface GQLMessageList { } export interface GQLMessage { - time: Date; + time: string; content: string; username: string; userRealname: string; diff --git a/frontend/style/layout.scss b/frontend/style/layout.scss index 8b3c4e6..7418f19 100644 --- a/frontend/style/layout.scss +++ b/frontend/style/layout.scss @@ -3,10 +3,103 @@ flex: 1; } + body, .main { @include full; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + margin: 0; + padding: 0; + height: 100vh; + width: 100vw; + overflow: hidden; + font-family: "Inter var", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } -@import "./sidebar.scss"; \ No newline at end of file +.chatroom { + flex: 1; + overflow-y: scroll; + + .day { + text-align: center; + padding: 10pt; + top: 0; + position: sticky; + } + + .message { + header { + display: flex; + + div { + padding: 0 5pt; + } + + .time { + font-family: "Roboto Condensed"; + color: grey; + } + + .realname { + font-weight: bold; + } + + .username { + color: grey; + } + } + + p { + padding: 0 15pt; + margin: 5pt 0 15pt 0; + font-size: 11pt; + } + } + + ul { + list-style-type: none; + margin: 0; + padding: 0; + } +} + +.channelList { + flex: 0 200px; + overflow-y: scroll; + + .workspace { + + .title { + display: flex; + align-items: center; + padding: 10pt; + + img { + max-height: 2em; + margin-right: 1em; + } + } + + .chats { + ul { + list-style-type: none; + margin: 0; + padding: 0; + } + + li { + padding: 4pt 5pt; + font-size: 10pt; + cursor: pointer; + + &:hover { + background-color: grey; + } + + &.active { + background-color: blue; + color: white; + } + } + } + } +} \ No newline at end of file diff --git a/frontend/style/sidebar.scss b/frontend/style/sidebar.scss deleted file mode 100644 index 1ff74ea..0000000 --- a/frontend/style/sidebar.scss +++ /dev/null @@ -1,25 +0,0 @@ -.channelList { - .workspace { - .title { - display: flex; - align-items: center; - - img { - max-height: 2em; - margin-right: 1em; - } - } - - .chats { - ul { - list-style-type: none; - margin: 0; - padding: 0; - } - - li { - padding: 2pt 0; - } - } - } -} \ No newline at end of file