From 330a70021454eace26d5c99c69dd79d6a8dae963 Mon Sep 17 00:00:00 2001 From: Matthias Roggo Date: Sun, 23 Jun 2024 12:47:27 +0200 Subject: [PATCH] pull in react icons --- app/.meteor/packages | 2 ++ app/.meteor/versions | 12 +++++++----- app/client/fret.less | 4 ++-- app/client/icons.less | 5 +++++ app/imports/ui/List.tsx | 29 ++++++++++++++--------------- app/imports/ui/MobileMenu.tsx | 4 ++-- app/package-lock.json | 15 ++++++++++++--- app/package.json | 2 +- app/tsconfig.json | 2 +- 9 files changed, 46 insertions(+), 29 deletions(-) diff --git a/app/.meteor/packages b/app/.meteor/packages index 75bbab9..bf68930 100644 --- a/app/.meteor/packages +++ b/app/.meteor/packages @@ -15,10 +15,12 @@ standard-minifier-js@2.8.1 # JS minifier run for production mode es5-shim@4.8.0 # ECMAScript 5 compatibility for older browsers ecmascript@0.16.8 # Enable ECMAScript2015+ syntax in app code shell-server@0.5.0 # Server-side component of the `meteor shell` command +hot-module-replacement@0.5.3 # Update client in development without reloading the page insecure@1.0.7 # Allow all DB writes from clients (for prototyping) react-meteor-data@2.0.1 less@2.8.0 + static-html@1.3.2 underscore@1.6.0 accounts-password@2.4.0 diff --git a/app/.meteor/versions b/app/.meteor/versions index 5b921e0..731014f 100644 --- a/app/.meteor/versions +++ b/app/.meteor/versions @@ -6,7 +6,7 @@ babel-compiler@7.10.5 babel-runtime@1.5.1 base64@1.0.12 binary-heap@1.0.11 -blaze-tools@1.1.2 +blaze-tools@1.1.3 boilerplate-generator@1.7.2 caching-compiler@1.2.2 caching-html-compiler@1.2.1 @@ -29,8 +29,9 @@ es5-shim@4.8.0 fetch@0.1.4 geojson-utils@1.0.11 hot-code-push@1.0.4 -html-tools@1.1.2 -htmljs@1.1.0 +hot-module-replacement@0.5.3 +html-tools@1.1.3 +htmljs@1.1.1 id-map@1.1.1 insecure@1.0.7 inter-process-messaging@0.1.1 @@ -48,6 +49,7 @@ mobile-status-bar@1.1.0 modern-browsers@0.1.10 modules@0.20.0 modules-runtime@0.13.1 +modules-runtime-hot@0.14.2 mongo@1.16.8 mongo-decimal@0.1.3 mongo-dev-server@1.1.0 @@ -69,10 +71,10 @@ service-configuration@1.3.3 sha@1.0.9 shell-server@0.5.0 socket-stream-client@0.5.2 -spacebars-compiler@1.3.0 +spacebars-compiler@1.3.1 standard-minifier-js@2.8.1 static-html@1.3.2 -templating-tools@1.2.1 +templating-tools@1.2.2 tracker@1.3.3 typescript@4.9.5 underscore@1.6.0 diff --git a/app/client/fret.less b/app/client/fret.less index eba9aed..a4e3b6a 100644 --- a/app/client/fret.less +++ b/app/client/fret.less @@ -32,7 +32,7 @@ svg.chord-diag { text { fill: var(--text-inverted); - font-weight: 500; + font-weight: 700; } } @@ -43,7 +43,7 @@ svg.chord-diag { text { fill: var(--text-inverted); - font-weight: 500; + font-weight: 700; } &.open circle, &.muted line { diff --git a/app/client/icons.less b/app/client/icons.less index 2d138b3..bb677e7 100644 --- a/app/client/icons.less +++ b/app/client/icons.less @@ -53,3 +53,8 @@ svg { fill: var(--gray-light); } } + +svg path[fill="none"] { + // protect Angular Material Icon's bounding boxes from switching color + stroke: transparent; +} diff --git a/app/imports/ui/List.tsx b/app/imports/ui/List.tsx index 0cdabdf..fb6146c 100644 --- a/app/imports/ui/List.tsx +++ b/app/imports/ui/List.tsx @@ -8,6 +8,7 @@ import Drawer from './Drawer'; import {navigateTo, routePath, userMayWrite, View} from '../api/helpers'; import classNames from 'classnames'; +import {MdFace, MdFavorite, MdFavoriteBorder, MdSell, MdStyle} from 'react-icons/md'; interface ListItemProps { song: Song; @@ -49,9 +50,12 @@ class ListItem extends React.Component { const darlings = u?.profile?.darlings ?? []; - const is_darling = darlings.includes(this.props.song._id) ? 'is_darling' : ''; + const is_darling = darlings.includes(this.props.song._id); - const darling_or_not = u ? {darling_icon} : undefined; + const toggler = is_darling ? + : + + const darling_or_not = u ? toggler : undefined; return (
  • { } } -const darling_icon = ( - - - -); - interface ListGroupProps { songs: Array; user: Meteor.User; @@ -252,13 +250,13 @@ class List extends React.Component { }; onTagClick = (event : React.MouseEvent) => { - const tag = '#' + event.currentTarget.childNodes[0].textContent.toLowerCase(); + const tag = ' #' + event.currentTarget.childNodes[0].textContent.toLowerCase(); let newFilter; if (this.state.filter.includes(tag)) { newFilter = this.state.filter.replace(tag, ''); } else { - newFilter = this.state.filter + tag + ' '; + newFilter = this.state.filter + tag; } this.setFilter(newFilter.replace(' ', ' ').trim()); @@ -348,9 +346,8 @@ class List extends React.Component { { this.setFilter(''); }}>× - Tags + - { songs={this.props.songs} />
      +

      aabb

      {Array.from(groups, ([group, songs]) => { - return ; - } + return ; + } )} {addSong}
    {userLink} + ); } diff --git a/app/imports/ui/MobileMenu.tsx b/app/imports/ui/MobileMenu.tsx index f00f1f6..02f4005 100644 --- a/app/imports/ui/MobileMenu.tsx +++ b/app/imports/ui/MobileMenu.tsx @@ -3,7 +3,7 @@ import {ReactElementLike} from 'prop-types'; import * as React from 'react'; import {FC, MouseEventHandler, useRef} from 'react'; import {useScrollHideEffectRef} from '../api/helpers'; -import {Menu} from './Icons.jsx'; +import { MdManageSearch } from 'react-icons/md'; import './mobileMenuStyle.less'; @@ -29,7 +29,7 @@ export const MobileMenu: FC = (p) => { useScrollHideEffectRef(ref, 64); return
    - +
    ; }; diff --git a/app/package-lock.json b/app/package-lock.json index 4e378c3..611288f 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -30,6 +30,7 @@ "react-document-title": "^2.0.3", "react-dom": "18.2.0", "react-error-boundary": "^3.1.3", + "react-icons": "^5.2.1", "react-redux": "^8.0.5", "react-responsive": "^9.0.2", "react-router-dom": "^5.1.1", @@ -2357,9 +2358,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001525", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001525.tgz", - "integrity": "sha512-/3z+wB4icFt3r0USMwxujAqRvaD/B7rvGTsKhbhSQErVrJvkZCLhgNLJxU8MevahQVH6hCU9FsHdNUFbiwmE7Q==", + "version": "1.0.30001636", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz", + "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==", "dev": true, "funding": [ { @@ -8150,6 +8151,14 @@ "react": ">=16.13.1" } }, + "node_modules/react-icons": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz", + "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/app/package.json b/app/package.json index a932e6f..f552418 100644 --- a/app/package.json +++ b/app/package.json @@ -2,7 +2,6 @@ "name": "rechords", "private": true, "scripts": { - "//": "0:xx enables to access the the dev server from another computer", "start": "meteor --settings settings.json --exclude-archs web.browser.legacy --port 0:3000", "startAdvanced": "meteor --settings settings.advanced.json --exclude-archs web.browser.legacy --port 0:3000", "debug": "meteor run --inspect", @@ -34,6 +33,7 @@ "react-document-title": "^2.0.3", "react-dom": "18.2.0", "react-error-boundary": "^3.1.3", + "react-icons": "^5.2.1", "react-redux": "^8.0.5", "react-responsive": "^9.0.2", "react-router-dom": "^5.1.1", diff --git a/app/tsconfig.json b/app/tsconfig.json index 2dfe3a9..a36ba6e 100644 --- a/app/tsconfig.json +++ b/app/tsconfig.json @@ -26,6 +26,6 @@ "core-js", "mocha" ], - "jsx": "react" + "jsx": "react", } }