|
1 | 1 | importButtonfrom"@material-ui/core/Button" |
| 2 | +importFadefrom"@material-ui/core/Fade" |
| 3 | +importInputAdornmentfrom"@material-ui/core/InputAdornment" |
2 | 4 | importLinkfrom"@material-ui/core/Link" |
3 | 5 | importMenufrom"@material-ui/core/Menu" |
4 | 6 | importMenuItemfrom"@material-ui/core/MenuItem" |
5 | 7 | import{makeStyles}from"@material-ui/core/styles" |
6 | 8 | importTextFieldfrom"@material-ui/core/TextField" |
7 | 9 | importAddCircleOutlinefrom"@material-ui/icons/AddCircleOutline" |
| 10 | +importSearchIconfrom"@material-ui/icons/Search" |
8 | 11 | import{useMachine}from"@xstate/react" |
9 | 12 | import{FormikErrors,useFormik}from"formik" |
10 | 13 | import{FC,useState}from"react" |
@@ -70,45 +73,96 @@ const WorkspacesPage: FC = () => { |
70 | 73 | } |
71 | 74 |
|
72 | 75 | return( |
73 | | -<> |
74 | | -<Margins> |
75 | | -<divclassName={styles.actions}> |
76 | | -<Stackdirection="row"> |
77 | | -<Buttonaria-controls="filter-menu"aria-haspopup="true"onClick={handleClick}> |
| 76 | +<Margins> |
| 77 | +<Stackdirection="row"className={styles.workspacesHeaderContainer}> |
| 78 | +<Stackdirection="column"className={styles.filterColumn}> |
| 79 | +<Stackdirection="row"spacing={0}className={styles.filterContainer}> |
| 80 | +<Button |
| 81 | +aria-controls="filter-menu" |
| 82 | +aria-haspopup="true" |
| 83 | +onClick={handleClick} |
| 84 | +className={styles.buttonRoot} |
| 85 | +> |
78 | 86 | {Language.filterName}{anchorEl ?<CloseDropdown/> :<OpenDropdown/>} |
79 | 87 | </Button> |
80 | 88 |
|
81 | | -<Menuid="filter-menu"anchorEl={anchorEl}keepMountedopen={Boolean(anchorEl)}onClose={handleClose}> |
| 89 | +<formonSubmit={form.handleSubmit}className={styles.filterForm}> |
| 90 | +<TextField |
| 91 | +{...getFieldHelpers("query")} |
| 92 | +className={styles.textFieldRoot} |
| 93 | +onChange={onChangeTrimmed(form)} |
| 94 | +fullWidth |
| 95 | +variant="outlined" |
| 96 | +InputProps={{ |
| 97 | +startAdornment:( |
| 98 | +<InputAdornmentposition="start"> |
| 99 | +<SearchIconfontSize="small"/> |
| 100 | +</InputAdornment> |
| 101 | +), |
| 102 | +}} |
| 103 | +/> |
| 104 | +</form> |
| 105 | + |
| 106 | +<Menu |
| 107 | +id="filter-menu" |
| 108 | +anchorEl={anchorEl} |
| 109 | +keepMounted |
| 110 | +open={Boolean(anchorEl)} |
| 111 | +onClose={handleClose} |
| 112 | +TransitionComponent={Fade} |
| 113 | +anchorOrigin={{ |
| 114 | +vertical:"bottom", |
| 115 | +horizontal:"left", |
| 116 | +}} |
| 117 | +transformOrigin={{ |
| 118 | +vertical:"top", |
| 119 | +horizontal:"left", |
| 120 | +}} |
| 121 | +> |
82 | 122 | <MenuItemonClick={setYourWorkspaces}>{Language.yourWorkspacesButton}</MenuItem> |
83 | 123 | <MenuItemonClick={setAllWorkspaces}>{Language.allWorkspacesButton}</MenuItem> |
84 | 124 | </Menu> |
85 | | - |
86 | | -<formonSubmit={form.handleSubmit}> |
87 | | -<TextField{...getFieldHelpers("query")}onChange={onChangeTrimmed(form)}fullWidthvariant="outlined"/> |
88 | | -</form> |
89 | 125 | </Stack> |
90 | | - |
91 | | -<Linkunderline="none"component={RouterLink}to="/workspaces/new"> |
92 | | -<ButtonstartIcon={<AddCircleOutline/>}>{Language.createWorkspaceButton}</Button> |
93 | | -</Link> |
94 | | -</div> |
95 | | - |
96 | | -<WorkspacesPageView |
97 | | -loading={workspacesState.hasTag("loading")} |
98 | | -workspaces={workspacesState.context.workspaces} |
99 | | -/> |
100 | | -</Margins> |
101 | | -</> |
| 126 | +</Stack> |
| 127 | + |
| 128 | +<Linkunderline="none"component={RouterLink}to="/workspaces/new"> |
| 129 | +<ButtonstartIcon={<AddCircleOutline/>}style={{height:"44px"}}> |
| 130 | +{Language.createWorkspaceButton} |
| 131 | +</Button> |
| 132 | +</Link> |
| 133 | +</Stack> |
| 134 | +<WorkspacesPageViewloading={workspacesState.hasTag("loading")}workspaces={workspacesState.context.workspaces}/> |
| 135 | +</Margins> |
102 | 136 | ) |
103 | 137 | } |
104 | 138 |
|
105 | 139 | constuseStyles=makeStyles((theme)=>({ |
106 | | -actions:{ |
| 140 | +workspacesHeaderContainer:{ |
107 | 141 | marginTop:theme.spacing(3), |
108 | 142 | marginBottom:theme.spacing(3), |
109 | | -display:"flex", |
110 | 143 | justifyContent:"space-between", |
111 | | -height:theme.spacing(6), |
| 144 | +}, |
| 145 | +filterColumn:{ |
| 146 | +width:"60%", |
| 147 | +cursor:"text", |
| 148 | +}, |
| 149 | +filterContainer:{ |
| 150 | +border:`1px solid${theme.palette.divider}`, |
| 151 | +borderRadius:"6px", |
| 152 | +}, |
| 153 | +filterForm:{ |
| 154 | +width:"100%", |
| 155 | +}, |
| 156 | +buttonRoot:{ |
| 157 | +border:"none", |
| 158 | +borderRight:`1px solid${theme.palette.divider}`, |
| 159 | +borderRadius:"6px 0px 0px 6px", |
| 160 | +}, |
| 161 | +textFieldRoot:{ |
| 162 | +margin:"0px", |
| 163 | +"& fieldset":{ |
| 164 | +border:"none", |
| 165 | +}, |
112 | 166 | }, |
113 | 167 | })) |
114 | 168 |
|
|