Merge branch 'main' into rifeljm/#200-move-receive-address-component-…

…into-top-header
Chia-Network · Jan 17, 2023 · e77ccd6 · e77ccd6
2 parents 4d56769 + 28f90c3
commit e77ccd6
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 93 deletions.
diff --git a/.github/workflows/code-check.yml b/.github/workflows/code-check.yml
@@ -0,0 +1,26 @@
+name: code-check
+on:
+  # We never push directly to 'main', so do not run on it
+  push:
+    branches-ignore:
+      - 'main'
+  pull_request:
+    branches-ignore:
+      - 'main'
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          # Use node version from '.nvmrc' instead of hardcoding here
+          node-version-file: '.nvmrc'
+      - name: install
+        run: npm ci
+      - name: Prettier
+        run: npm run check:prettier
+      - name: ESLint
+        run: npm run check:lint
diff --git a/.github/workflows/super-linter.yml b/.github/workflows/super-linter.yml
diff --git a/packages/core/src/components/Dropdown/DropdownActions.tsx b/packages/core/src/components/Dropdown/DropdownActions.tsx
@@ -46,6 +46,7 @@ export type DropdownActionsProps = ButtonProps & {
   label?: ReactNode;
   toggle?: ReactNode;
   children: ReactNode;
+  menuSx: any;
 };
 
 function DropdownActions(props: DropdownActionsProps, ref: any) {
@@ -86,8 +87,7 @@ function DropdownActions(props: DropdownActionsProps, ref: any) {
           {label}
         </Button>
       )}
-
-      <StyledMenu anchorEl={anchorEl} open={open} onClose={handleClose} onClick={handlePreventDefault}>
+      <StyledMenu anchorEl={anchorEl} open={open} onClose={handleClose} onClick={handlePreventDefault} sx={rest.menuSx}>
         {children}
       </StyledMenu>
     </div>

diff --git a/packages/gui/src/components/nfts/NFTContextualActions.tsx b/packages/gui/src/components/nfts/NFTContextualActions.tsx
@@ -435,7 +435,7 @@ function NFTDownloadContextualAction(props: NFTDownloadContextualActionProps) {
 type NFTHideContextualActionProps = NFTContextualActionProps & {
   selection?: NFTSelection;
   isMultiSelect?: boolean;
-  showOrHide?: boolean;
+  showOrHide?: number;
 };
 
 function NFTHideContextualAction(props: NFTHideContextualActionProps) {
@@ -446,7 +446,7 @@ function NFTHideContextualAction(props: NFTHideContextualActionProps) {
   const [isNFTHidden, setIsNFTHidden, , setHiddenMultiple] = useHiddenNFTs();
   const [, setSelectedNFTIds] = useLocalStorage('gallery-selected-nfts', []);
 
-  const isHidden = isMultiSelect && showOrHide ? true : isNFTHidden(selectedNft);
+  const isHidden = isMultiSelect && showOrHide === 1 ? true : isNFTHidden(selectedNft);
 
   function handleToggle() {
     if (!selectedNft) {
@@ -596,7 +596,7 @@ type NFTContextualActionsProps = {
   availableActions?: NFTContextualActionTypes;
   toggle?: ReactNode;
   isMultiSelect?: boolean;
-  showOrHide?: boolean;
+  showOrHide?: number;
 };
 
 export default function NFTContextualActions(props: NFTContextualActionsProps) {
@@ -685,10 +685,15 @@ export default function NFTContextualActions(props: NFTContextualActionsProps) {
   }, [availableActions, isMultiSelect, showOrHide]);
 
   return (
-    <DropdownActions label={label} variant="outlined" items={selection?.items} {...rest}>
-      {actions.map(({ action: Action, props: actionProps }, index) => (
-        // eslint-disable-next-line react/no-array-index-key -- Nothing better to use
-        <Action key={index} selection={selection} {...actionProps} />
+    <DropdownActions
+      label={label}
+      variant="outlined"
+      items={selection?.items}
+      menuSx={{ top: '-78px', left: '38px' }} /* menu shouldn't appear over ACTIONS button, but above! */
+      {...rest}
+    >
+      {actions.map(({ action: Action, props: actionProps }) => (
+        <Action key={`${Action.name}`} selection={selection} {...actionProps} />
       ))}
     </DropdownActions>
   );

diff --git a/packages/gui/src/components/nfts/gallery/FilterPill.tsx b/packages/gui/src/components/nfts/gallery/FilterPill.tsx
@@ -22,6 +22,12 @@ const Pill = styled.div`
   }
 `;
 
+const Children = styled.div`
+  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  opacity: 1;
+  display: flex;
+`;
+
 const ArrowDown = styled(ArrowDownIcon)`
   margin-left: 10px;
 `;
@@ -47,7 +53,7 @@ export default function FilterPill(props: FilterPillProps) {
     <Pill onClick={() => toggleFilterShow()} isDarkMode={isDarkMode}>
       <Trans>{title}</Trans>
       <ArrowDown />
-      <div style={{ display: filtersShown.indexOf(which) > -1 ? 'flex' : 'none' }}>{children}</div>
+      <Children style={{ opacity: filtersShown.indexOf(which) > -1 ? 1 : 0 }}>{children}</Children>
     </Pill>
   );
 }
diff --git a/packages/gui/src/components/nfts/gallery/NFTGallery.tsx b/packages/gui/src/components/nfts/gallery/NFTGallery.tsx
@@ -1,8 +1,8 @@
 import type { NFTInfo } from '@chia-network/api';
 import { useLocalStorage } from '@chia-network/api-react';
 import { Flex, LayoutDashboardSub, Loading, /* useTrans, */ useDarkMode } from '@chia-network/core';
-import { t } from '@lingui/macro';
-import { FormControlLabel, RadioGroup, FormControl, Checkbox, Grid } from '@mui/material';
+import { t, Trans } from '@lingui/macro';
+import { FormControlLabel, RadioGroup, FormControl, Checkbox, Grid, Button } from '@mui/material';
 import React, { useEffect, useState, useCallback, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
@@ -64,11 +64,13 @@ const StyledGrid = styled(Grid)`
 `;
 
 const SelectedActionsContainer = styled.div`
-  position: absolute;
+  position: fixed;
   text-align: center;
   width: 100%;
-  background: green;
-  display: none;
+  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  opacity: 1;
+  bottom: 25px;
+  z-index: 7;
   &.active {
     display: block;
   }
@@ -146,6 +148,21 @@ const LoadingWrapper = styled.div`
   padding: 25px;
 `;
 
+const TotalItemsStyled = styled.div`
+  display: flex;
+  > span {
+    margin-right: 15px;
+    position: relative;
+    top: 6px;
+  }
+`;
+
+const SelectAllButtonStyled = styled(Button)`
+  color: ${(props) => props.theme.palette.primary.main};
+  margin: 0 10px;
+  user-select: none;
+`;
+
 let visibleIndex = 0;
 const allowNFTsFilteredObject: any = {};
 let allowNFTsFilteredNftIds: string[] = [];
@@ -442,6 +459,30 @@ export default function NFTGallery() {
     return Object.keys(nftTypeKeys).filter((key) => typeFilterArray.indexOf(key) > -1).length;
   }
 
+  function renderSelectDeselectButtons() {
+    if (!inMultipleSelectionMode) return null;
+    return (
+      <>
+        <SelectAllButtonStyled
+          variant="text"
+          onClick={() => {
+            setSelectedNFTIds(filteredShownNFTs().map((nft: NFTInfo) => nft.$nftId));
+          }}
+        >
+          <Trans>Select all</Trans>
+        </SelectAllButtonStyled>
+        <SelectAllButtonStyled
+          variant="text"
+          onClick={() => {
+            setSelectedNFTIds([]);
+          }}
+        >
+          <Trans>Deselect all</Trans>
+        </SelectAllButtonStyled>
+      </>
+    );
+  }
+
   return (
     <LayoutDashboardSub
       // sidebar={<NFTGallerySidebar onWalletChange={setWalletId} />}
@@ -487,8 +528,10 @@ export default function NFTGallery() {
           </Flex>
 
           <Flex gap={2} alignItems="center" flexWrap="wrap" justifyContent="space-between" sx={{ padding: '10px 0' }}>
-            {t`Showing ${filteredShownNFTs().length} of ${allowNFTsFiltered.length} items`}
-
+            <TotalItemsStyled>
+              <span>{t`Showing ${filteredShownNFTs().length} of ${allowNFTsFiltered.length} items`}</span>
+              {renderSelectDeselectButtons()}
+            </TotalItemsStyled>
             <Filters>
               <div ref={typesFilterRef} style={{ display: allTypes.length > 0 ? 'flex' : 'none' }}>
                 <FilterPill
@@ -555,7 +598,7 @@ export default function NFTGallery() {
       ) : (
         <>
           <SelectedActionsContainer
-            style={{ display: inMultipleSelectionMode ? 'block' : 'none' }}
+            style={{ opacity: inMultipleSelectionMode ? 1 : 0 }}
             className={inMultipleSelectionMode ? 'active' : ''}
           >
             <SelectedActionsDialog

diff --git a/packages/gui/src/components/nfts/gallery/SelectedActionsDialog.tsx b/packages/gui/src/components/nfts/gallery/SelectedActionsDialog.tsx
@@ -13,12 +13,7 @@ const SelectedItemsContainer = styled.div`
     0px 9px 44px 8px rgba(0, 0, 0, 0.12);
   border-radius: 16px;
   padding: 12px 32px;
-  position: fixed;
-  bottom: 50px;
-  z-index: 7;
   display: inline-block;
-  margin-left: auto;
-  margin-right: auto;
 `;
 
 const SelectedCountText = styled.div`

diff --git a/packages/gui/src/components/settings/SettingsNFT.tsx b/packages/gui/src/components/settings/SettingsNFT.tsx
@@ -49,6 +49,12 @@ export default function SettingsGeneral() {
         onConfirm={() => {
           ipcRenderer.invoke('clearNFTCache').then(() => {
             setCacheSize(0);
+            Object.keys(localStorage).forEach((key) => {
+              if (key.indexOf('content-cache-') > -1) localStorage.removeItem(key);
+              if (key.indexOf('thumb-cache-') > -1) localStorage.removeItem(key);
+              if (key.indexOf('metadata-cache-') > -1) localStorage.removeItem(key);
+              if (key.indexOf('force-reload-') > -1) localStorage.removeItem(key);
+            });
           });
         }}
       >