fix multiline logs, add txt link again

This commit is contained in:
gempir 2020-11-09 19:05:28 +01:00
parent 6138493d2a
commit e8193c00c8
5 changed files with 64 additions and 31 deletions

File diff suppressed because one or more lines are too long

View file

@ -1,6 +1,7 @@
import React, { useContext } from "react";
import styled from "styled-components";
import { useAvailableLogs } from "../hooks/useAvailableLogs";
import { Txt } from "../icons/Txt";
import { store } from "../store";
import { Log } from "./Log";
@ -9,6 +10,18 @@ const LogContainerDiv = styled.div`
padding: 2rem;
padding-top: 0;
width: 100%;
position: relative;
.txt {
position: absolute;
top: 5px;
right: 20px;
opacity: 0.5;
&:hover {
opacity: 1;
}
}
`;
export function LogContainer() {
@ -17,6 +30,9 @@ export function LogContainer() {
const availableLogs = useAvailableLogs(state.currentChannel, state.currentUsername);
return <LogContainerDiv>
{availableLogs.map((log, index) => <Log key={`${log.year}:${log.month}`} year={log.year} month={log.month} initialLoad={index === 0} />)}
{availableLogs.map((log, index) => <React.Fragment key={`${log.year}:${log.month}`}>
<a className="txt" target="__blank" href={`${state.apiBaseUrl}/channel/${state.currentChannel}/user/${state.currentUsername}/${log.year}/${log.month}`} rel="noopener noreferrer"><Txt /></a>
<Log year={log.year} month={log.month} initialLoad={index === 0} />
</React.Fragment>)}
</LogContainerDiv>
}

View file

@ -15,22 +15,27 @@ dayjs.tz.guess()
const LogLineContainer = styled.li`
display: flex;
align-items: center;
align-items: flex-start;
margin-bottom: 1px;
.timestamp {
color: var(--text-dark);
user-select: none;
font-family: monospace;
white-space: nowrap;
line-height: 1.1rem;
}
.user {
margin-left: 5px;
user-select: none;
font-weight: bold;
line-height: 1.1rem;
}
.message {
margin-left: 5px;
line-height: 1.1rem;
}
`;

View file

@ -8,8 +8,6 @@ import { ThirdPartyEmote } from "../types/ThirdPartyEmote";
const MessageContainer = styled.div`
display: inline-flex;
align-items: center;
font-size: 1rem;
line-height: 1rem;
a {
margin: 0 2px;
@ -17,8 +15,8 @@ const MessageContainer = styled.div`
`;
const Emote = styled.img`
/* transform: scale(0.5); */
max-height: 14px;
margin: 0 2px;
width: auto;
`;

14
web/src/icons/Txt.tsx Normal file
View file

@ -0,0 +1,14 @@
import React from "react";
export function Txt() {
return (
<svg className={"txt"} height={32} viewBox="0 0 32 32" width={32}>
<title />
<path
d="M21 26v2.003A1.995 1.995 0 0119.003 30H3.997A2 2 0 012 27.993V5.007C2 3.898 2.9 3 4.009 3H14v6.002c0 1.111.898 1.998 2.006 1.998H21v2h-8.993A3.003 3.003 0 009 15.999V23A2.996 2.996 0 0012.007 26H21zM15 3v5.997c0 .554.451 1.003.99 1.003H21l-6-7zm-3.005 11C10.893 14 10 14.9 10 15.992v7.016A2 2 0 0011.995 25h17.01C30.107 25 31 24.1 31 23.008v-7.016A2 2 0 0029.005 14h-17.01zM14 17v6h1v-6h2v-1h-5v1h2zm6 2.5L18 16h1l1.5 2.625L22 16h1l-2 3.5 2 3.5h-1l-1.5-2.625L19 23h-1l2-3.5zm6-2.5v6h1v-6h2v-1h-5v1h2z"
fill="#929292"
fillRule="evenodd"
/>
</svg>
);
}