From 8d20d2cf39de487974f7dd3a9f76544e64897939 Mon Sep 17 00:00:00 2001 From: Fabricio Silva Date: Sun, 2 Jul 2023 13:21:01 +0100 Subject: [PATCH] feat(web): improve irc view (#989) * inherit font-size * inherit cursor-pointer and bubble click event * improve react keys using ids instead of array position * fix scrollbar corner not being transparent * change irc view height calculation --------- Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com> --- web/src/index.css | 3 + web/src/screens/settings/Irc.tsx | 101 +++++++++++++++++-------------- 2 files changed, 60 insertions(+), 44 deletions(-) diff --git a/web/src/index.css b/web/src/index.css index b8873ba..3f413c2 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -125,6 +125,9 @@ code { /* Style scrollbars for webkit enabled browsers i.e. Chrome, Edge, and Safari */ @layer base { + *::-webkit-scrollbar-corner { + background-color: transparent; + } *::-webkit-scrollbar { height: 8px; width: 8px; diff --git a/web/src/screens/settings/Irc.tsx b/web/src/screens/settings/Irc.tsx index 7d4fbf8..5cf9721 100644 --- a/web/src/screens/settings/Irc.tsx +++ b/web/src/screens/settings/Irc.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: GPL-2.0-or-later */ -import { Fragment, useRef, useState, useMemo, useEffect } from "react"; +import { Fragment, useRef, useState, useMemo, useEffect, MouseEvent } from "react"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { LockClosedIcon, LockOpenIcon } from "@heroicons/react/24/solid"; import { Menu, Switch, Transition } from "@headlessui/react"; @@ -53,7 +53,7 @@ function useSort(items: ListItemProps["network"][], config?: SortConfig) { sortableItems.sort((a, b) => { const aValue = sortConfig.key === "enabled" ? (a[sortConfig.key] ?? false) as number | boolean | string : a[sortConfig.key] as number | boolean | string; const bValue = sortConfig.key === "enabled" ? (b[sortConfig.key] ?? false) as number | boolean | string : b[sortConfig.key] as number | boolean | string; - + if (aValue < bValue) { return sortConfig.direction === "ascending" ? -1 : 1; } @@ -61,7 +61,7 @@ function useSort(items: ListItemProps["network"][], config?: SortConfig) { return sortConfig.direction === "ascending" ? 1 : -1; } return 0; - }); + }); return sortableItems; }, [items, sortConfig]); @@ -77,13 +77,13 @@ function useSort(items: ListItemProps["network"][], config?: SortConfig) { } setSortConfig({ key, direction }); }; - + const getSortIndicator = (key: keyof ListItemProps["network"]) => { if (!sortConfig || sortConfig.key !== key) { return ""; } - + return sortConfig.direction === "ascending" ? "↑" : "↓"; }; @@ -104,7 +104,7 @@ const IrcSettings = () => { const sortedNetworks = useSort(data || []); return ( -
+
@@ -113,7 +113,7 @@ const IrcSettings = () => {

IRC

-

+

IRC networks and channels. Click on a network to view channel status.

@@ -122,7 +122,7 @@ const IrcSettings = () => { @@ -139,7 +139,7 @@ const IrcSettings = () => { - Network healthy + Network healthy
  • @@ -147,7 +147,7 @@ const IrcSettings = () => { className="mr-2 flex h-4 w-4 rounded-full opacity-75 bg-yellow-400 over:text-yellow-600" title="Network unhealthy" /> - Network unhealthy + Network unhealthy
  • @@ -156,11 +156,15 @@ const IrcSettings = () => { title="Network disabled" > - Network disabled + Network disabled
    • -
    {data && - sortedNetworks.items.map((network, idx) => ( - + sortedNetworks.items.map((network) => ( + ))} @@ -209,12 +213,11 @@ const IrcSettings = () => { }; interface ListItemProps { - idx: number; network: IrcNetworkWithHealth; expanded: boolean; } -const ListItem = ({ idx, network, expanded }: ListItemProps) => { +const ListItem = ({ network, expanded }: ListItemProps) => { const [updateIsOpen, toggleUpdate] = useToggle(false); const [edit, toggleEdit] = useToggle(false); @@ -236,20 +239,27 @@ const ListItem = ({ idx, network, expanded }: ListItemProps) => { }; return ( -
  • -
    +
  • +
    -
    +
    e.stopPropagation()} checked={network.enabled} onChange={onToggleMutation} className={classNames( network.enabled ? "bg-blue-500" : "bg-gray-200 dark:bg-gray-600", - "items-center relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" + "items-center relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" )} > Enable @@ -262,10 +272,7 @@ const ListItem = ({ idx, network, expanded }: ListItemProps) => { />
    -
    +
    {network.enabled ? ( @@ -294,10 +301,7 @@ const ListItem = ({ idx, network, expanded }: ListItemProps) => {
    -
    +
    {

    -
    +
    {network.nick}
    -
    +
    @@ -351,7 +352,7 @@ const ListItem = ({ idx, network, expanded }: ListItemProps) => {
    • {network.channels.map((c) => ( - + ))} ) : ( @@ -375,9 +376,17 @@ const ChannelItem = ({ network, channel }: ChannelItemProps) => { const [viewChannel, toggleView] = useToggle(false); return ( -
  • -
    -
    +
  • +
    +
    {network.enabled ? ( channel.monitoring ? ( @@ -385,8 +394,7 @@ const ChannelItem = ({ network, channel }: ChannelItemProps) => { className="mr-3 flex h-3 w-3 relative" title="monitoring" > - + ) : ( @@ -398,18 +406,20 @@ const ChannelItem = ({ network, channel }: ChannelItemProps) => { {channel.name}
    -
    +
    {IsEmptyDate(channel.monitoring_since)}
    -
    +
    {IsEmptyDate(channel.last_announce)}
    - +
    {viewChannel && ( @@ -459,7 +469,10 @@ const ListItemDropdown = ({ const restart = (id: number) => restartMutation.mutate(id); return ( - + e.stopPropagation()} + > {
    -
    +
    {logs.map((entry, idx) => (