JS-6325: gallery name setting

anyproto · Jan 28, 2025 · f81d345 · f81d345
1 parent ba319fc
commit f81d345
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 8 deletions.
diff --git a/src/scss/widget/view/gallery.scss b/src/scss/widget/view/gallery.scss
@@ -12,7 +12,7 @@
 			.inner { display: flex; flex-direction: column; height: 100%; align-items: stretch; }
 
 			.cover { 
-				position: relative; height: 80px; background-position: top center; display: flex; align-items: center; flex-shrink: 0px;
+				position: relative; height: 80px; background-position: top center; display: flex; align-items: center; flex-shrink: 0;
 				background-color: var(--color-shape-highlight-medium); width: 100%; justify-content: center; border-radius: 8px 8px 0px 0px; overflow: hidden;
 			}
 
@@ -50,6 +50,10 @@
 			}
 		}
 
+		.item.withoutName {
+			.cover { border-radius: 8px; }
+		}
+
 		.item:hover, .item.active { background: var(--color-shape-highlight-light); }
 	}
 }
diff --git a/src/ts/component/menu/dataview/relation/list.tsx b/src/ts/component/menu/dataview/relation/list.tsx
@@ -30,9 +30,12 @@ const MenuRelationList = observer(class MenuRelationList extends React.Component
 	};
 
 	render () {
-		const { getId, setHover } = this.props;
+		const { getId, setHover, param } = this.props;
+		const { data } = param;
+		const { getView } = data;
 		const isReadonly = this.isReadonly();
 		const items = this.getItems();
+		const view = getView();
 
 		items.map((it: any) => {
 			const { format, name } = it.relation;
@@ -43,7 +46,8 @@ const MenuRelationList = observer(class MenuRelationList extends React.Component
 		));
 
 		const Item = SortableElement((item: any) => {
-			const canHide = !isReadonly && (item.relationKey != 'name');
+			const isName = item.relationKey == 'name';
+			const canHide = !isReadonly && (!isName || (view.type == I.ViewType.Gallery));
 			const cn = [ 'item' ];
 
 			if (item.relation.isHidden) {

diff --git a/src/ts/component/widget/view/gallery/item.tsx b/src/ts/component/widget/view/gallery/item.tsx
@@ -30,11 +30,17 @@ const WidgetGalleryItem = observer(forwardRef<{}, Props>(({
 	const canDrop = !isEditing && S.Block.isAllowed(restrictions, [ I.RestrictionObject.Block ]);
 	const cn = [ 'item' ];
 	const cover = view ? Dataview.getCoverObject(subId, object, view.coverRelationKey) : null;
+	const nameRelation = view.getRelation('name');
+	const withName = !cover || (cover && nameRelation.isVisible);
 
 	if (cover) {
 		cn.push('withCover');
 	};
 
+	if (!withName) {
+		cn.push('withoutName');
+	};
+
 	const onClick = (e: React.MouseEvent) => {
 		if (e.button) {
 			return;
@@ -97,10 +103,12 @@ const WidgetGalleryItem = observer(forwardRef<{}, Props>(({
 		<div className="inner" onMouseDown={onClick}>
 			<ObjectCover object={cover} />
 
-			<div className="info">
-				{icon}
-				<ObjectName object={object} />
-			</div>
+			{withName ? (
+				<div className="info">
+					{icon}
+					<ObjectName object={object} />
+				</div>
+			) : ''}
 		</div>
 	);
 

diff --git a/src/ts/lib/dataview.ts b/src/ts/lib/dataview.ts
@@ -41,7 +41,7 @@ class Dataview {
 		const ret = relations.filter(it => it).map(relation => {
 			const vr = (view.relations || []).filter(it => it).find(it => it.relationKey == relation.relationKey) || {};
 
-			if (relation.relationKey == 'name') {
+			if ((view.type != I.ViewType.Gallery) && (relation.relationKey == 'name')) {
 				vr.isVisible = true;
 			};