anyproto/anytype-ts
1
0
Fork 0
mirror of https://github.com/anyproto/anytype-ts.git synced 2025-06-07 21:47:02 +09:00
Code Activity

Merge pull request #1244 from anyproto/feature/JS-6387-settings-design-review

Browse source 
Feature/JS-6387: Settings design review
This commit is contained in:
Razor 2025-02-26 16:18:13 +01:00 • committed by GitHub
commit 0c2826e81e
Signed by: github
GPG key ID: B5690EEEBB952194
10 changed files with 120 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/img/theme/dark/icon/settings/data/drive.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 5.5H16.5C17.8807 5.5 19 6.61929 19 8C19 9.38071 17.8807 10.5 16.5 10.5H7.5C6.11929 10.5 5 9.38071 5 8C5 6.61929 6.11929 5.5 7.5 5.5ZM4 8C4 6.067 5.567 4.5 7.5 4.5H16.5C18.433 4.5 20 6.067 20 8C20 9.933 18.433 11.5 16.5 11.5H7.5C5.567 11.5 4 9.933 4 8ZM8.25 6.75C7.55964 6.75 7 7.30964 7 8C7 8.69036 7.55964 9.25 8.25 9.25C8.94036 9.25 9.5 8.69036 9.5 8C9.5 7.30964 8.94036 6.75 8.25 6.75ZM16.5 13.5H7.5C6.11929 13.5 5 14.6193 5 16C5 17.3807 6.11929 18.5 7.5 18.5H16.5C17.8807 18.5 19 17.3807 19 16C19 14.6193 17.8807 13.5 16.5 13.5ZM7.5 12.5C5.567 12.5 4 14.067 4 16C4 17.933 5.567 19.5 7.5 19.5H16.5C18.433 19.5 20 17.933 20 16C20 14.067 18.433 12.5 16.5 12.5H7.5ZM8.25 14.75C7.55964 14.75 7 15.3096 7 16C7 16.6904 7.55964 17.25 8.25 17.25C8.94036 17.25 9.5 16.6904 9.5 16C9.5 15.3096 8.94036 14.75 8.25 14.75Z" fill="#d4d4d4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 991 B

3
src/img/theme/dark/icon/settings/data/location.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.254 8.5H5V16.6667C5 16.8796 5.08859 17.089 5.25488 17.2474C5.422 17.4066 5.65365 17.5 5.9 17.5H17.1C17.3464 17.5 17.578 17.4066 17.7451 17.2474C17.9114 17.089 18 16.8796 18 16.6667V9.33333C18 9.12041 17.9114 8.91097 17.7451 8.75259C17.578 8.59343 17.3464 8.5 17.1 8.5H13H12.254ZM12.0565 7.45933C12.118 7.4858 12.1851 7.5 12.254 7.5H17.1C17.5963 7.5 18.0768 7.68752 18.4348 8.02846C18.7936 8.37018 19 8.83901 19 9.33333V16.6667C19 17.161 18.7936 17.6298 18.4348 17.9715C18.0768 18.3125 17.5963 18.5 17.1 18.5H5.9C5.40375 18.5 4.9232 18.3125 4.56522 17.9715C4.20641 17.6298 4 17.161 4 16.6667V7.33333C4 6.83901 4.20641 6.37018 4.56522 6.02846C4.9232 5.68752 5.40375 5.5 5.9 5.5H9.81268C10.3021 5.5 10.7608 5.73882 11.0415 6.13981L11.6561 7.01771L12.0565 7.45933Z" fill="#d4d4d4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 939 B

3
src/img/theme/dark/icon/settings/data/sites.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 9H19V16C19 17.1046 18.1046 18 17 18H11.584C11.428 18.357 11.2315 18.6923 11.0004 19H17C18.6569 19 20 17.6569 20 16V8C20 6.34315 18.6569 5 17 5H7C5.34315 5 4 6.34315 4 8V11.9996C4.30773 11.7685 4.643 11.572 5 11.416V9ZM4.75 14C4.75 14.2761 4.97386 14.5 5.25 14.5H7.79289L3.64645 18.6464C3.45118 18.8417 3.45118 19.1583 3.64645 19.3536C3.84171 19.5488 4.15829 19.5488 4.35355 19.3536L8.5 15.2071V17.75C8.5 18.0261 8.72386 18.25 9 18.25C9.27614 18.25 9.5 18.0261 9.5 17.75V14V13.5H9H5.25C4.97386 13.5 4.75 13.7239 4.75 14Z" fill="#d4d4d4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 697 B

31
src/scss/component/sidebar/settings.scss
View file

@ -29,19 +29,6 @@
.section {
> .name { @include text-small; color: var(--color-text-secondary); margin: 0px; padding: 0px 8px; }
}
.section.isLabel {
> .name { margin-bottom: -4px; }
}
.section.isToggle {
.items { display: none; padding-left: 18px; }
}
.section.isToggle.isOpen {
.toggle {
.icon { transform: rotate(0deg); }
}
.items { display: flex; }
}
.items { display: flex; flex-direction: column; }
@ -51,7 +38,8 @@
transition: background-color $transitionCommon;
}
.toggle:hover,
.item:hover, .item.active { background-color: var(--color-shape-highlight-medium); }
.item:hover, .item.hover, .item.active { background-color: var(--color-shape-highlight-medium); }
.item {
.icon, .iconObject { flex-shrink: 0; }
.icon { width: 20px; height: 20px; }
@ -71,12 +59,21 @@
.name { @include text-common; @include text-overflow-nw; font-weight: 600; }
}
.toggle { padding-left: 4px; }
.toggle { padding-left: 4px; justify-content: space-between; }
.toggle {
.icon { width: 20px; height: 20px; flex-shrink: 0; background-image: url('~img/arrow/select/dark.svg'); transform: rotate(-90deg); }
.left { display: flex; justify-content: flex-start; gap: 0px 6px; align-items: center; }
.right { display: flex; align-items: center; }
.icon { width: 20px; height: 20px; }
.icon.arrow { flex-shrink: 0; background-image: url('~img/arrow/select/dark.svg'); transform: rotate(-90deg); }
.icon.plus { opacity: 0.8; border-radius: 4px; background-image: url('~img/icon/plus/menu0.svg'); }
}
.toggle:hover {
.icon.plus { opacity: 1; }
.icon.plus:hover { background-color: var(--color-shape-secondary); }
}
.toggle.isOpen {
.icon { transform: rotate(0deg); }
.icon.arrow { transform: rotate(0deg); }
}
}

5
src/scss/page/main/settings.scss
View file

@ -731,6 +731,11 @@
.swiper-slide.swiper-slide-prev,
.swiper-slide.swiper-slide-next { opacity: 0.2; }
.swiper-slide.swiper-slide-active { opacity: 1; }
.swiper-button-prev,
.swiper-button-next { position: absolute; width: 100%; height: 100%; top: 0px; z-index: 2; }
.swiper-button-prev { left: -100%; }
.swiper-button-next { right: -100%; }
}
.slide {

8
src/scss/theme/dark/common.scss
View file

@ -333,6 +333,14 @@ html.themeDark {
}
}
}
> #containerSettings {
> .body {
.logout {
.icon { background-image: url('#{$themePath}/icon/popup/settings/logout.svg'); }
}
}
}
}
/* Notifications */

6
src/scss/theme/dark/page.scss
View file

@ -173,4 +173,10 @@
.icon { background-image: url('#{$themePath}/icon/payment/hyperlink.svg'); }
}
}
.pageSettingsDataIndex {
.icon.drive { background-image: url('#{$themePath}/icon/settings/data/drive.svg'); }
.icon.sites { background-image: url('#{$themePath}/icon/settings/data/sites.svg'); }
.icon.location { background-image: url('#{$themePath}/icon/settings/data/location.svg'); }
}
}

2
src/ts/component/menu/object/context.tsx
View file

@ -463,4 +463,4 @@ class MenuContext extends React.Component<I.Menu> {
};
export default MenuContext;
export default MenuContext;

5
src/ts/component/page/main/settings/membership.tsx
View file

@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
import { Title, Label, Button, Icon } from 'Component';
import { I, S, U, J, Action, translate, analytics, keyboard } from 'Lib';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Autoplay, Mousewheel } from 'swiper/modules';
import { Pagination, Autoplay, Mousewheel, Navigation } from 'swiper/modules';
const PageMainSettingsMembership = observer(class PageMainSettingsMembership extends React.Component<I.PageSettingsComponent> {
@ -135,7 +135,8 @@ const PageMainSettingsMembership = observer(class PageMainSettingsMembership ext
disableOnInteraction: true,
}}
mousewheel={true}
modules={[ Pagination, Autoplay, Mousewheel ]}
navigation={true}
modules={[ Pagination, Autoplay, Mousewheel, Navigation ]}
centeredSlides={true}
loop={true}
onSwiper={this.onSwiper}

81
src/ts/component/sidebar/page/settings.tsx
View file

@ -1,6 +1,6 @@
import * as React from 'react';
import { observer } from 'mobx-react';
import { I, S, translate, U } from 'Lib';
import { analytics, I, J, keyboard, S, sidebar, translate, U } from 'Lib';
import { Icon, IconObject, ObjectName } from 'Component';
import { AutoSizer, CellMeasurer, InfiniteLoader, List, CellMeasurerCache } from 'react-virtualized';
@ -21,7 +21,7 @@ const SidebarSettings = observer(class SidebarSettings extends React.Component<P
cache: any = {};
toggle: any = {
contentModelTypes: false,
contentModelFields: false,
contentModelRelations: false,
};
render () {
@ -52,9 +52,14 @@ const SidebarSettings = observer(class SidebarSettings extends React.Component<P
};
return (
<div className={cn.join(' ')} onClick={() => this.onToggle(item)}>
<Icon />
{item.name}
<div id={`item-toggle-${item.id}`} className={cn.join(' ')} onClick={() => this.onToggle(item)}>
<div className="left">
<Icon className="arrow" />
{item.name}
</div>
<div className="right">
<Icon className="plus" onClick={e => this.onAdd(e, item)} />
</div>
</div>
);
};
@ -127,6 +132,7 @@ const SidebarSettings = observer(class SidebarSettings extends React.Component<P
<div
id={`item-${item.id}`}
className={cn.join(' ')}
onContextMenu={() => this.onContext(item)}
onClick={() => this.onClick(item)}
>
{icon}
@ -268,7 +274,7 @@ const SidebarSettings = observer(class SidebarSettings extends React.Component<P
{ id: 'contentModel', name: translate('pageSettingsSpaceManageContent'), isLabel: true },
{ id: 'contentModelTypes', isToggle: true, name: U.Common.plural(10, translate('pluralObjectType')), children: S.Record.getTypes() },
{ id: 'contentModelFields', isToggle: true, name: U.Common.plural(10, translate('pluralField')), children: S.Record.getRelations() },
{ id: 'contentModelRelations', isToggle: true, name: U.Common.plural(10, translate('pluralField')), children: S.Record.getRelations() },
];
return isSpace ? spaceSettings : appSettings;
@ -342,11 +348,72 @@ const SidebarSettings = observer(class SidebarSettings extends React.Component<P
U.Object.openAuto(param);
};
onContext (item) {
if (!U.Object.isTypeOrRelationLayout(item.layout)) {
return;
};
const { x, y } = keyboard.mouse.page;
S.Menu.open('objectContext', {
element: `#containerSettings #item-${item.id}`,
rect: { width: 0, height: 0, x: x + 4, y },
data: {
objectIds: [ item.id ],
getObject: () => {
return item;
},
}
});
};
onToggle (item) {
this.toggle[item.id] = !this.toggle[item.id];
this.forceUpdate();
};
onAdd (e, item) {
e.preventDefault();
e.stopPropagation();
const isPopup = keyboard.isPopup();
switch (item.id) {
case 'contentModelTypes': {
const type = S.Record.getTypeType();
const featured = [ 'type', 'tag', 'backlinks' ];
const recommended = [];
const mapper = it => S.Record.getRelationByKey(it)?.id;
const details: any = {
isNew: true,
type: type.id,
layout: I.ObjectLayout.Type,
recommendedFeaturedRelations: featured.map(mapper).filter(it => it),
recommendedRelations: recommended.map(mapper).filter(it => it),
};
sidebar.rightPanelToggle(true, true, isPopup, 'type', { details });
break;
};
case 'contentModelRelations': {
const node = $(this.node);
const width = node.width() - 32;
S.Menu.open('blockRelationEdit', {
element: `#containerSettings #item-toggle-${item.id} .plus`,
offsetY: 4,
width,
className: 'fixed',
classNameWrap: 'fromSidebar',
horizontal: I.MenuDirection.Right,
});
break;
};
};
};
});
export default SidebarSettings
export default SidebarSettings