21224: set project card to only display 3 buttons Arvados-DCO-1.1-Signed-off-by:...
authorLisa Knox <lisaknox83@gmail.com>
Tue, 2 Apr 2024 15:40:37 +0000 (11:40 -0400)
committerLisa Knox <lisaknox83@gmail.com>
Tue, 2 Apr 2024 15:40:37 +0000 (11:40 -0400)
services/workbench2/src/components/data-explorer/data-explorer.tsx
services/workbench2/src/views-components/project-details-card/project-details-card.tsx

index f64ad4df7d8cf1e61e11d95c0f59ce458f2ea06e..979fe35c08de20e6b97c018458f06dffdb340f9e 100644 (file)
@@ -248,7 +248,6 @@ export const DataExplorer = withStyles(styles)(
                                 </Grid>
                             )}
                             {!!progressBar && progressBar}
-                            {console.log('this.multiSelectToolbarInTitle', this.multiSelectToolbarInTitle, !this.state.msToolbarInDetailsCard)}
                             {this.multiSelectToolbarInTitle && !this.state.msToolbarInDetailsCard && <MultiselectToolbar injectedStyles={classes.msToolbarStyles} />}
                             {(!hideColumnSelector || !hideSearchInput || !!actions) && (
                                 <Grid
index 1b4601233b8d3e183941f4e5ff5068b28924144a..49884e45dee7eec241bd78ba170c6038d2351acc 100644 (file)
@@ -27,6 +27,7 @@ type CssRules =
     | 'root'
     | 'cardHeaderContainer'
     | 'cardHeader'
+    | 'projectToolbar'
     | 'descriptionToggle'
     | 'showMore'
     | 'noDescription'
@@ -73,6 +74,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         minWidth: '30rem',
         padding: '0.2rem 0.4rem 0.2rem 1rem',
     },
+    projectToolbar: {
+        //shows only the first 3 buttons
+        width: '12rem !important',
+    },
     descriptionToggle: {
         display: 'flex',
         flexDirection: 'row',
@@ -306,7 +311,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
                         </section>
                     }
                 />
-                {isSelected && <MultiselectToolbar />}
+                {isSelected && <MultiselectToolbar injectedStyles={classes.projectToolbar} />}
             </Grid>
             <section onClick={(ev) => ev.stopPropagation()}>
                 {description ? (