JS-3618: checkbox labels

src/scss/block/dataview/cell.scss

@@ -51,9 +51,12 @@
 	}
 }
 
+.cellContent.c-checkbox { display: flex; flex-direction: row; align-items: center; gap: 0px 2px; }
 .cellContent.c-checkbox {
 	.icon { width: 20px; height: 20px; background-image: url('~img/icon/dataview/checkbox0.svg'); }
 	.icon.active { background-image: url('~img/icon/dataview/checkbox2.svg'); }
+
+	.label { line-height: 20px; }
 }
 .cellContent.c-checkbox.canEdit {
 	.icon:not(.active):hover { background-image: url('~img/icon/dataview/checkbox1.svg'); }

src/scss/block/dataview/view/list.scss

@@ -74,8 +74,9 @@
 				.name { text-decoration: underline; }
 			}
 
+			.cellContent.c-checkbox { display: inline-flex; }
 			.cellContent.c-checkbox {
-				.icon.checkbox { width: 20px; height: 20px; vertical-align: top; margin-top: 2px; }
+				.icon.checkbox { width: 20px; height: 20px; }
 			}
 			.cellContent.c-checkbox.canEdit { cursor: default !important; }
 

src/scss/block/featured.scss

@@ -40,6 +40,7 @@
 			.flex { display: inline; }
 
 			.more { vertical-align: middle; background: none; }
+			.label { display: inline; vertical-align: middle; }
 		}
 
 		.cellContent.c-select {

src/ts/component/block/dataview/cell/checkbox.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Icon } from 'Component';
+import { Icon, Label } from 'Component';
 import { I, UtilCommon, translate } from 'Lib';
 import { observer } from 'mobx-react';
 
@@ -37,7 +37,7 @@ const CellCheckbox = observer(class CellCheckbox extends React.Component<I.Cell>
 		return (
 			<React.Fragment>
 				<Icon className={cn.join(' ')} />
-				{label ? <span className="label">{label}</span> : ''}
+				{label ? <Label text={label} /> : ''}
 			</React.Fragment>
 		);
 	};

src/ts/component/block/dataview/cell/index.tsx

@@ -18,7 +18,6 @@ interface Props extends I.Cell {
 	tooltipX?: I.MenuDirection.Left | I.MenuDirection.Center | I.MenuDirection.Right;
 	tooltipY?: I.MenuDirection.Top | I.MenuDirection.Bottom;
 	maxWidth?: number;
-	withName?: boolean;
 };
 
 const Cell = observer(class Cell extends React.Component<Props> {

src/ts/component/block/dataview/view/board/card.tsx

@@ -43,6 +43,7 @@ const Card = observer(class Card extends React.Component<Props> {
 						tooltipX={I.MenuDirection.Left}
 						onClick={e => this.onCellClick(e, relation)}
 						iconSize={relation.relationKey == 'name' ? 20 : 18}
+						withName={true}
 					/>
 				))}
 			</div>

src/ts/component/block/dataview/view/board/column.tsx

@@ -85,7 +85,7 @@ const Column = observer(class Column extends React.Component<Props> {
 								recordId=""
 								readonly={true} 
 								arrayLimit={4}
-								withLabel={true}
+								withName={true}
 								placeholder={translate('commonUncategorized')}
 							/>
 						</div>

src/ts/component/block/dataview/view/gallery/card.tsx

@@ -65,6 +65,7 @@ const Card = observer(class Card extends React.Component<Props> {
 								tooltipX={I.MenuDirection.Left}
 								iconSize={relation.relationKey == 'name' ? 20 : 18}
 								shortUrl={true}
+								withName={true}
 							/>
 						);
 					})}

src/ts/component/block/dataview/view/list/row.tsx

@@ -51,6 +51,7 @@ const Row = observer(class Row extends React.Component<Props> {
 							showTooltip={true}
 							arrayLimit={2}
 							iconSize={relation.relationKey == 'name' ? 24 : 18}
+							withName={true}
 						/>
 					);
 				})}

src/ts/component/block/featured.tsx

@@ -209,7 +209,6 @@ const BlockFeatured = observer(class BlockFeatured extends React.Component<Props
 								textLimit={150}
 								onMouseLeave={this.onMouseLeave}
 								withLabel={true}
-								withName={true}
 							/>
 						</span>
 					);

src/ts/component/menu/dataview/group/list.tsx

@@ -77,7 +77,7 @@ const MenuGroupList = observer(class MenuGroupList extends React.Component<I.Men
 							recordId=""
 							readonly={true} 
 							arrayLimit={4}
-							withLabel={true}
+							withName={true}
 							placeholder={translate('commonUncategorized')}
 						/>
 					</span>