From 4c4fe78258888ebdf0ee376aaa9e076825061c02 Mon Sep 17 00:00:00 2001 From: Sander Vocke Date: Mon, 21 Sep 2020 13:26:17 +0200 Subject: [PATCH] Better tab labels. Tab icons. --- client/src/components/MainWindow.tsx | 18 +++++------------- client/src/components/appbar/AddTabMenu.tsx | 11 +++-------- client/src/components/tables/ResultsTable.tsx | 6 +++++- client/src/components/windows/ArtistWindow.tsx | 3 ++- client/src/components/windows/QueryWindow.tsx | 3 ++- client/src/components/windows/Windows.tsx | 9 ++++++++- 6 files changed, 25 insertions(+), 25 deletions(-) diff --git a/client/src/components/MainWindow.tsx b/client/src/components/MainWindow.tsx index 8983e3f..034c1cf 100644 --- a/client/src/components/MainWindow.tsx +++ b/client/src/components/MainWindow.tsx @@ -18,7 +18,6 @@ const darkTheme = createMuiTheme({ }); export interface MainWindowState { - tabLabels: string[], tabStates: any[], tabReducers: Reducer[], tabTypes: WindowType[], @@ -41,7 +40,6 @@ export function MainWindowReducer(state: MainWindowState, action: any) { return { ...state, tabStates: state.tabStates.filter((i: any, idx: number) => idx != action.idx), - tabLabels: state.tabLabels.filter((i: any, idx: number) => idx != action.idx), tabReducers: state.tabReducers.filter((i: any, idx: number) => idx != action.idx), tabTypes: state.tabTypes.filter((i: any, idx: number) => idx != action.idx), activeTab: state.activeTab >= (newSize - 1) ? (newSize - 1) : state.activeTab, @@ -51,7 +49,6 @@ export function MainWindowReducer(state: MainWindowState, action: any) { return { ...state, tabStates: [...state.tabStates, action.tabState], - tabLabels: [...state.tabLabels, action.tabLabel], tabReducers: [...state.tabReducers, action.tabReducer], tabTypes: [...state.tabTypes, action.tabType], } @@ -71,15 +68,10 @@ export function MainWindowReducer(state: MainWindowState, action: any) { export default function MainWindow(props: any) { const [state, dispatch] = useReducer(MainWindowReducer, { - tabLabels: ["Query"], tabStates: [ - { - editingQuery: false, - query: null, - resultsForQuery: null, - }, + newWindowState[WindowType.Query]() ], - tabReducers: [QueryWindowReducer], + tabReducers: [newWindowReducer[WindowType.Query]], tabTypes: [WindowType.Query], activeTab: 0 }) @@ -92,7 +84,6 @@ export default function MainWindow(props: any) { idx: i }); } - console.log("state", state); switch (state.tabTypes[i]) { case WindowType.Query: @@ -112,10 +103,12 @@ export default function MainWindow(props: any) { } }); + console.log("State:", state) + return s.tabLabel)} selectedTab={state.activeTab} setSelectedTab={(t: number) => dispatch({ type: MainWindowStateActions.SetActiveTab, value: t })} onCloseTab={(t: number) => dispatch({ type: MainWindowStateActions.CloseTab, idx: t })} @@ -123,7 +116,6 @@ export default function MainWindow(props: any) { dispatch({ type: MainWindowStateActions.AddTab, tabState: newWindowState[w.windowType](), - tabLabel: w.title, tabReducer: newWindowReducer[w.windowType], tabType: w.windowType, }) diff --git a/client/src/components/appbar/AddTabMenu.tsx b/client/src/components/appbar/AddTabMenu.tsx index f2ce996..b001fe1 100644 --- a/client/src/components/appbar/AddTabMenu.tsx +++ b/client/src/components/appbar/AddTabMenu.tsx @@ -3,7 +3,6 @@ import { WindowType } from '../windows/Windows'; import { Menu, MenuItem } from '@material-ui/core'; export interface NewTabProps { - title: string, windowType: WindowType, } @@ -21,17 +20,13 @@ export default function AddTabMenu(props: IProps) { onClose={props.onClose} > New Tab - {([ - WindowType.Query, - WindowType.Artist - ]).map((v: WindowType) => { props.onClose(); props.onCreateTab({ - title: v, - windowType: v, + windowType: WindowType.Query, }) }} - >{v})} + >{WindowType.Query} } \ No newline at end of file diff --git a/client/src/components/tables/ResultsTable.tsx b/client/src/components/tables/ResultsTable.tsx index 81d8ea6..a5f4c19 100644 --- a/client/src/components/tables/ResultsTable.tsx +++ b/client/src/components/tables/ResultsTable.tsx @@ -3,6 +3,7 @@ import { TableContainer, Table, TableHead, TableRow, TableCell, Paper, makeStyle import stringifyList from '../../lib/stringifyList'; import { MainWindowStateActions } from '../MainWindow'; import { newWindowReducer, WindowType } from '../windows/Windows'; +import PersonIcon from '@material-ui/icons/Person'; export interface SongGetters { getTitle: (song: any) => string, @@ -41,8 +42,10 @@ export function SongTable(props: IProps) { {props.songs.map((song: any) => { const title = props.songGetters.getTitle(song); // TODO / FIXME: display artists and albums separately! - const artist = stringifyList(props.songGetters.getArtistNames(song)); + const artistNames = props.songGetters.getArtistNames(song); + const artist = stringifyList(artistNames); const mainArtistId = props.songGetters.getArtistIds(song)[0]; + const mainArtistName = artistNames[0]; const album = stringifyList(props.songGetters.getAlbumNames(song)); const tags = props.songGetters.getTagNames(song).map((tag: string[]) => { return @@ -57,6 +60,7 @@ export function SongTable(props: IProps) { props.mainDispatch({ type: MainWindowStateActions.AddTab, tabState: { + tabLabel: <>{mainArtistName}, artistId: mainArtistId, metadata: null, }, diff --git a/client/src/components/windows/ArtistWindow.tsx b/client/src/components/windows/ArtistWindow.tsx index 589530f..7f7de88 100644 --- a/client/src/components/windows/ArtistWindow.tsx +++ b/client/src/components/windows/ArtistWindow.tsx @@ -2,12 +2,13 @@ import React, { useEffect } from 'react'; import { Box, Typography } from '@material-ui/core'; import PersonIcon from '@material-ui/icons/Person'; import * as serverApi from '../../api'; +import { WindowState } from './Windows'; export interface ArtistMetadata { name: string, } -export interface ArtistWindowState { +export interface ArtistWindowState extends WindowState { artistId: number, metadata: ArtistMetadata | null, } diff --git a/client/src/components/windows/QueryWindow.tsx b/client/src/components/windows/QueryWindow.tsx index b47ab2c..489415d 100644 --- a/client/src/components/windows/QueryWindow.tsx +++ b/client/src/components/windows/QueryWindow.tsx @@ -7,6 +7,7 @@ import { SongTable } from '../tables/ResultsTable'; import stringifyList from '../../lib/stringifyList'; import { getArtists, getSongTitles, getAlbums, getTags } from '../../lib/query/Getters'; import { grey } from '@material-ui/core/colors'; +import { WindowState } from './Windows'; var _ = require('lodash'); const darkTheme = createMuiTheme({ @@ -23,7 +24,7 @@ export interface ResultsForQuery { results: any[], }; -export interface QueryWindowState { +export interface QueryWindowState extends WindowState { editingQuery: boolean, query: QueryElem | null, resultsForQuery: ResultsForQuery | null, diff --git a/client/src/components/windows/Windows.tsx b/client/src/components/windows/Windows.tsx index a9a48c1..17edca6 100644 --- a/client/src/components/windows/Windows.tsx +++ b/client/src/components/windows/Windows.tsx @@ -1,12 +1,17 @@ +import React from 'react'; import { QueryWindowReducer, QueryWindowState } from "./QueryWindow"; import { ArtistWindowReducer, ArtistWindowState } from "./ArtistWindow"; +import SearchIcon from '@material-ui/icons/Search'; +import PersonIcon from '@material-ui/icons/Person'; export enum WindowType { Query = "Query", Artist = "Artist", } -export type WindowState = QueryWindowState | ArtistWindowState; +export interface WindowState { + tabLabel: string, +} export const newWindowReducer = { [WindowType.Query]: QueryWindowReducer, @@ -16,6 +21,7 @@ export const newWindowReducer = { export const newWindowState = { [WindowType.Query]: () => { return { + tabLabel: <>Query, editingQuery: false, query: null, resultsForQuery: null, @@ -23,6 +29,7 @@ export const newWindowState = { }, [WindowType.Artist]: () => { return { + tabLabel: <>Artist, artistId: 1, metadata: null, }