Skip to content

Commit cfa4c42

Browse files
hotzenklotzhotzenklotz
authored
Fix CSS spacing for actions in Dashboard > Tasks (#8452)
* fix task spacing in dashboard * changelog * fixed several more icon spacings
1 parent ab41dee commit cfa4c42

File tree

7 files changed

+25
-48
lines changed

7 files changed

+25
-48
lines changed

‎CHANGELOG.unreleased.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
2828
- Fixed a bug where newly added remote datasets would always appear in root folder, regardless of actual selected folder. [#8425](https://github.com/scalableminds/webknossos/pull/8425)
2929
- Fixed a bug where the python libs functionality `wk.RemoteDataset.explore_and_add_remote` would error. [#8425](https://github.com/scalableminds/webknossos/pull/8425)
3030
- Fixed a bug where various UI dialogs would be dark mode even the user preferred a light theme. [#8445](https://github.com/scalableminds/webknossos/pull/8445)
31+
- Fixed an issue with icon spacing on the task dashboard page. [#8452](https://github.com/scalableminds/webknossos/pull/8452)
3132

3233
### Removed
3334

‎frontend/javascripts/admin/statistic/time_tracking_overview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,8 +199,8 @@ function TimeTrackingOverview() {
199199
selectedProjectIds,
200200
);
201201
}}
202+
icon={<DownloadOutlined />}
202203
>
203-
<DownloadOutlined className="icon-margin-right" />
204204
Download time spans
205205
</LinkButton>
206206
);

‎frontend/javascripts/admin/task/task_list_view.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -375,8 +375,7 @@ function TaskListView({ initialFieldValues }: Props) {
375375
</div>
376376
{task.status.pending > 0 ? (
377377
<div>
378-
<LinkButton onClick={_.partial(assignTaskToUser, task)}>
379-
<UserAddOutlined className="icon-margin-right" />
378+
<LinkButton onClick={_.partial(assignTaskToUser, task)} icon={<UserAddOutlined />}>
380379
Manually Assign to User
381380
</LinkButton>
382381
</div>
@@ -397,8 +396,7 @@ function TaskListView({ initialFieldValues }: Props) {
397396
</div>
398397
) : null}
399398
<div>
400-
<LinkButton onClick={_.partial(deleteTask, task)}>
401-
<DeleteOutlined className="icon-margin-right" />
399+
<LinkButton onClick={_.partial(deleteTask, task)} icon={<DeleteOutlined />}>
402400
Delete
403401
</LinkButton>
404402
</div>

‎frontend/javascripts/admin/tasktype/task_type_list_view.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -270,8 +270,7 @@ function TaskTypeListView({ initialSearchValue }: Props) {
270270
Download
271271
</AsyncLink>
272272
<br />
273-
<LinkButton onClick={_.partial(deleteTaskType, taskType)}>
274-
<DeleteOutlined className="icon-margin-right" />
273+
<LinkButton onClick={_.partial(deleteTaskType, taskType)} icon={<DeleteOutlined />}>
275274
Delete
276275
</LinkButton>
277276
</span>

‎frontend/javascripts/admin/team/team_list_view.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ function TeamListView() {
176176
<div className="container">
177177
<div className="pull-right">
178178
<Button
179-
icon={<PlusOutlined className="icon-margin-right" />}
179+
icon={<PlusOutlined />}
180180
style={marginRight}
181181
type="primary"
182182
onClick={() => setIsTeamCreationModalVisible(true)}
@@ -233,14 +233,13 @@ function TeamListView() {
233233
setSelectedTeam(team);
234234
setIsTeamEditModalVisible(true);
235235
}}
236+
icon={<UserOutlined />}
236237
>
237-
<UserOutlined className="icon-margin-right" />
238238
Add / Remove Users
239239
</LinkButton>
240240
</div>
241241
<div>
242-
<LinkButton onClick={_.partial(deleteTeam, team)}>
243-
<DeleteOutlined className="icon-margin-right" />
242+
<LinkButton onClick={_.partial(deleteTeam, team)} icon={<DeleteOutlined />}>
244243
Delete
245244
</LinkButton>
246245
</div>

‎frontend/javascripts/admin/user/user_list_view.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -194,8 +194,7 @@ function UserListView({ activeUser, activeOrganization }: Props) {
194194
<Row key={user.id} gutter={16}>
195195
<Col span={6}>{`${user.lastName}, ${user.firstName} (${user.email}) `}</Col>
196196
<Col span={4}>
197-
<LinkButton onClick={() => activateUser(user)}>
198-
<UserAddOutlined className="icon-margin-right" />
197+
<LinkButton onClick={() => activateUser(user)} icon={<UserAddOutlined />}>
199198
Activate User
200199
</LinkButton>
201200
</Col>
@@ -594,8 +593,7 @@ function UserListView({ activeUser, activeOrganization }: Props) {
594593
render={(__, user: APIUser) => (
595594
<span>
596595
<Link to={`/users/${user.id}/details`}>
597-
<UserOutlined className="icon-margin-right" />
598-
Show Annotations
596+
<LinkButton icon={<UserOutlined />}>Show Annotations</LinkButton>
599597
</Link>
600598
<br />
601599
{user.isActive ? (
@@ -605,8 +603,8 @@ function UserListView({ activeUser, activeOrganization }: Props) {
605603
event.stopPropagation();
606604
deactivateUser(user);
607605
}}
606+
icon={<UserDeleteOutlined />}
608607
>
609-
<UserDeleteOutlined className="icon-margin-right" />
610608
Deactivate User
611609
</LinkButton>
612610
) : null
@@ -616,8 +614,8 @@ function UserListView({ activeUser, activeOrganization }: Props) {
616614
event.stopPropagation();
617615
activateUser(user);
618616
}}
617+
icon={<UserAddOutlined />}
619618
>
620-
<UserAddOutlined className="icon-margin-right" />
621619
Activate User
622620
</LinkButton>
623621
)}

‎frontend/javascripts/dashboard/dashboard_task_list_view.tsx‎

Lines changed: 13 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
UserAddOutlined,
1010
} from "@ant-design/icons";
1111
import { PropTypes } from "@scalableminds/prop-types";
12-
import { Button, Card, Col, List, Modal, Row, Tag, Tooltip } from "antd";
12+
import { Button, Card, Col, List, Modal, Row, Space, Tag, Tooltip } from "antd";
1313
import Markdown from "libs/markdown_adapter";
1414
import * as React from "react";
1515
import { connect } from "react-redux";
@@ -226,37 +226,25 @@ class DashboardTaskListView extends React.PureComponent<Props, State> {
226226
.map((team) => team.name)
227227
.includes(task.team);
228228
const label = this.props.isAdminView ? (
229-
<span>
230-
<EyeOutlined className="icon-margin-right" />
231-
View
232-
</span>
229+
<LinkButton icon={<EyeOutlined />}>View</LinkButton>
233230
) : (
234-
<span>
235-
<PlayCircleOutlined className="icon-margin-right" />
236-
Open
237-
</span>
231+
<LinkButton icon={<PlayCircleOutlined />}>Open</LinkButton>
238232
);
239233
return task.annotation.state === "Finished" ? (
240234
<div>
241235
<CheckCircleOutlined className="icon-margin-right" />
242236
Finished
243-
<br />
244237
</div>
245238
) : (
246-
<div>
239+
<Space direction="vertical" size={1}>
247240
<Link to={`/annotations/${annotation.id}`}>{label}</Link>
248-
<br />
249241
{isAdmin || this.props.isAdminView ? (
250-
<div>
251-
<LinkButton onClick={() => this.openTransferModal(annotation.id)}>
252-
<TeamOutlined className="icon-margin-right" />
253-
Transfer
254-
</LinkButton>
255-
<br />
256-
</div>
242+
<LinkButton onClick={() => this.openTransferModal(annotation.id)} icon={<TeamOutlined />}>
243+
Transfer
244+
</LinkButton>
257245
) : null}
258246
{isAdmin ? (
259-
<div>
247+
<>
260248
<AsyncLink
261249
href="#"
262250
onClick={() => {
@@ -267,30 +255,24 @@ class DashboardTaskListView extends React.PureComponent<Props, State> {
267255
>
268256
Download
269257
</AsyncLink>
270-
<br />
271-
<LinkButton onClick={() => this.resetTask(annotation)}>
258+
<LinkButton onClick={() => this.resetTask(annotation)} icon={<RollbackOutlined />}>
272259
<Tooltip title={messages["task.tooltip_explain_reset"]} placement="left">
273-
<RollbackOutlined className="icon-margin-right" />
274260
Reset
275261
</Tooltip>
276262
</LinkButton>
277-
<br />
278-
<LinkButton onClick={() => this.cancelAnnotation(annotation)}>
263+
<LinkButton onClick={() => this.cancelAnnotation(annotation)} icon={<DeleteOutlined />}>
279264
<Tooltip title={messages["task.tooltip_explain_reset_cancel"]} placement="left">
280-
<DeleteOutlined className="icon-margin-right" />
281265
Reset and Cancel
282266
</Tooltip>
283267
</LinkButton>
284-
<br />
285-
</div>
268+
</>
286269
) : null}
287270
{this.props.isAdminView ? null : (
288-
<LinkButton onClick={() => this.confirmFinish(task)}>
289-
<CheckCircleOutlined className="icon-margin-right" />
271+
<LinkButton onClick={() => this.confirmFinish(task)} icon={<CheckCircleOutlined />}>
290272
Finish
291273
</LinkButton>
292274
)}
293-
</div>
275+
</Space>
294276
);
295277
};
296278

0 commit comments

Comments
 (0)