From 36d28fce795f7f48908ce50ba8a8cc822e3f9187 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Tue, 9 Apr 2024 13:33:29 +0200 Subject: [PATCH 01/19] JS-3436: reuse icons feature --- src/scss/menu/smile.scss | 39 +- src/ts/component/menu/block/cover.tsx | 6 +- src/ts/component/menu/smile.tsx | 540 ++++++++++++++++++-------- 3 files changed, 413 insertions(+), 172 deletions(-) diff --git a/src/scss/menu/smile.scss b/src/scss/menu/smile.scss index 9c0f7c4b2a..9bbadeb6c8 100644 --- a/src/scss/menu/smile.scss +++ b/src/scss/menu/smile.scss @@ -9,26 +9,28 @@ .head { color: var(--color-control-active); font-weight: 500; padding: 3px 16px 10px 16px; border-bottom: 1px solid var(--color-shape-secondary); - display: flex; flex-direction: row; gap: 0px 16px; + display: flex; flex-direction: row; gap: 0px 16px; justify-content: space-evenly; } .head { - .btn { display: inline-block; vertical-align: top; transition: $transitionAllCommon; } - .btn:last-child { margin-right: 0px; } - .btn:hover, .btn.active { color: var(--color-text-primary); } + .tab { display: inline-block; vertical-align: top; transition: $transitionAllCommon; @include text-overflow-nw; } + .tab:last-child { margin-right: 0px; } + .tab:hover, .btn.active { color: var(--color-text-primary); } + } + + .filter.withHead { padding-top: 12px; } + .filter { + .inner { height: 35px; } + } + + .body.gallery, .body.library { + .items { height: 238px; } } .body.gallery { - .filter.withHead { padding-top: 12px; } - .filter { - .inner { height: 35px; } - } - - .items { height: 238px; } - .section { padding: 11px 14px !important; border: 0px; } .section > .name { padding: 0px; margin: 0px; } - .row { padding: 0px 12px; display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; } + .row { padding: 0px 12px; display: grid; grid-template-columns: repeat(9, 1fr); } .item { width: 40px; height: 40px; position: relative; border-radius: 6px; padding: 0px; } .item::before { display: none; } @@ -74,6 +76,19 @@ } } + .body.library { + .filter { margin: 0px 0px 7px 0px; } + + .row { padding: 7px 14px; } + .row { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0px 12px; } + + .item { padding: 4px; border-radius: 6px; } + .item { + .img { width: 100%; height: 100%; } + } + .item.active { background-color: var(--color-shape-highlight-medium); } + } + .body.upload { padding: 16px; } .body.upload { .loaderWrapper { height: 292px; position: relative; background: none; } diff --git a/src/ts/component/menu/block/cover.tsx b/src/ts/component/menu/block/cover.tsx index d3505fa647..b36f043c24 100644 --- a/src/ts/component/menu/block/cover.tsx +++ b/src/ts/component/menu/block/cover.tsx @@ -234,8 +234,10 @@ const MenuBlockCover = observer(class MenuBlockCover extends React.Component { + this.setState({ isLoading: false }); + if (message.error.code) { this.setState({ isLoading: false }); return; @@ -250,8 +252,6 @@ const MenuBlockCover = observer(class MenuBlockCover extends React.Component { - node: any = null; _isMounted = false; state = { filter: '', @@ -38,18 +40,20 @@ class MenuSmile extends React.Component { tab: Tab.Gallery, }; - refFilter: any = null; - refList: any = null; + node = null; + refFilter = null; + refList = null; id = ''; skin = 1; - timeoutMenu = 0; - timeoutFilter = 0; cache: any = null; groupCache: any[] = []; - row: number = -1; - coll: number = 0; + row = -1; + coll = 0; active: any = null; + items: any[] = []; + timeoutMenu = 0; + timeoutFilter = 0; constructor (props: I.Menu) { super(props); @@ -71,7 +75,9 @@ class MenuSmile extends React.Component { const { filter, isLoading, tab } = this.state; const { param } = this.props; const { data } = param; - const { noHead, noGallery, noUpload, noRemove } = data; + const { noHead } = data; + const tabs = this.getTabs(); + const items = this.getItems(); let content = null; @@ -81,20 +87,19 @@ class MenuSmile extends React.Component { break; }; - const sections = this.getSections(); - const items = this.getItems(); + const sections = this.getSmileSections(); const groups = this.getGroups(); const Item = (item: any) => { const str = `:${item.itemId}::skin-tone-${item.skin}:`; return ( - item.itemId == ID_BLANK ?
:
this.onMouseEnter(e, item)} onMouseLeave={() => this.onMouseLeave()} - onMouseDown={e => this.onMouseDown(e, item.id, item.itemId, item.skin)} - onContextMenu={e => this.onSkin(e, item.id, item.itemId)} + onMouseDown={e => this.onMouseDown(e, item)} + onContextMenu={e => this.onSkin(e, item)} >
{ const rowRenderer = (param: any) => { const item = items[param.index]; + let content = null; + if (item.isSection) { + content = ( +
+
{item.name}
+
+ ); + } else { + content = ( +
+ {item.children.map((item: any, i: number) => ( + + ))} +
+ ); + }; + return ( { rowIndex={param.index} >
- {item.isSection ? ( -
- {item.name ?
{item.name}
: ''} -
- ) : ( -
- {item.children.map((smile: any, i: number) => { - smile.position = { row: param.index, n: i }; - return ; - })} -
- )} + {content}
); @@ -171,6 +182,7 @@ class MenuSmile extends React.Component { )} + {!sections.length ? ( ): ''} @@ -195,6 +207,85 @@ class MenuSmile extends React.Component { break; }; + case Tab.Library: { + const Item = (item: any) => ( +
this.onMouseEnter(e, item)} + onMouseLeave={() => this.onMouseLeave()} + onMouseDown={e => this.onMouseDown(e, item)} + > +
+
+ ); + + const rowRenderer = (param: any) => { + const item = items[param.index]; + + return ( + +
+ {item.children.map((item: any, i: number) => ( + + ))} +
+ + ); + }; + + content = ( + + this.refFilter = ref} + value={filter} + className={[ 'outlined', (!noHead ? 'withHead' : '') ].join(' ')} + onChange={e => this.onKeyUp(e, false)} + focusOnMount={true} + /> + +
+ {}} + isRowLoaded={({ index }) => !!items[index]} + > + {({ onRowsRendered }) => ( + + {({ width, height }) => ( + this.refList = ref} + width={width} + height={height} + deferredMeasurmentCache={this.cache} + rowCount={items.length} + rowHeight={({ index }) => this.getRowHeight(items[index])} + rowRenderer={rowRenderer} + onRowsRendered={onRowsRendered} + overscanRowCount={10} + scrollToAlignment="center" + /> + )} + + )} + + + {!items.length ? ( + + ): ''} +
+ + + ); + break; + }; + case Tab.Upload: { content = (
{ }; }; - if (isLoading) { - content = ; - }; - - let buttons: any[] = []; - - if (!noHead) { - if (!noGallery) { - buttons = buttons.concat([ - { text: translate('menuSmileRandom'), onClick: this.onRandom }, - { text: translate('menuSmileGallery'), onClick: () => this.onTab(Tab.Gallery), isActive: (tab == Tab.Gallery) }, - ]); - }; - if (!noUpload) { - buttons.push({ text: translate('menuSmileUpload'), onClick: () => this.onTab(Tab.Upload), isActive: (tab == Tab.Upload) }); - }; - if (!noRemove) { - buttons.push({ text: translate('commonRemove'), onClick: this.onRemove }); - }; - }; - return (
this.node = node} className="wrap" > - {buttons.length ? ( + {tabs.length ? (
- {buttons.map((item, i) => ( + {tabs.map((item, i) => (
{item.text} @@ -253,6 +323,7 @@ class MenuSmile extends React.Component { ) : ''}
+ {isLoading ? : ''} {content}
@@ -315,6 +386,39 @@ class MenuSmile extends React.Component { $(window).off('keydown.menu'); }; + load () { + const { filter, tab } = this.state; + + this.items = []; + + switch (tab) { + case Tab.Library: { + const filters: I.Filter[] = [ + { operator: I.FilterOperator.And, relationKey: 'layout', condition: I.FilterCondition.Equal, value: I.ObjectLayout.Image }, + ]; + const sorts = [ + { relationKey: 'lastOpenedDate', type: I.SortType.Desc }, + ]; + + this.setState({ isLoading: true }); + + UtilData.search({ + filters, + sorts, + fullText: filter, + limit: 1000, + }, (message: any) => { + if (!message.error.code) { + this.items = message.records || []; + }; + + this.setState({ isLoading: false }); + }); + break; + }; + }; + }; + checkRecent (sections: any[]) { const { storageGet } = this.props; const recent = storageGet().recent || []; @@ -336,7 +440,7 @@ class MenuSmile extends React.Component { return this.checkRecent(UtilSmile.getCategories().map(it => ({ id: it.id, name: it.name }))); }; - getSections () { + getSmileSections () { const { filter } = this.state; const reg = new RegExp(filter, 'gi'); @@ -376,7 +480,59 @@ class MenuSmile extends React.Component { }; getItems () { - let sections = this.getSections(); + const { tab } = this.state; + + let ret = []; + + switch (tab) { + case Tab.Gallery: { + ret = this.getSmileItems(); + break; + }; + + case Tab.Library: { + ret = this.getLibraryItems(); + break; + }; + }; + + return ret.map((it, i) => { + it.children = (it.children || []).map((c, n) => { + c.position = { row: i, n }; + return c; + }); + return it; + }); + }; + + getLibraryItems () { + const ret: any[] = []; + + let n = 0; + let row = { children: [] }; + + for (let i = 0; i < this.items.length; ++i) { + const item = this.items[i]; + + row.children.push(item); + + n++; + if (n == LIMIT_LIBRARY_ROW) { + ret.push(row); + row = { children: [] }; + n = 0; + }; + }; + + if (row.children.length && (row.children.length < LIMIT_LIBRARY_ROW)) { + ret.push(row); + }; + + return ret; + }; + + getSmileItems () { + let sections = this.getSmileSections(); let items: any[] = []; const ret: any[] = []; @@ -384,16 +540,6 @@ class MenuSmile extends React.Component { return (section.id == ID_RECENT) ? res : res + section.children.length; }, 0); - const fillRowWithBlankChildren = row => { - const len = row.children.length; - - if ((len > 0) && (len < LIMIT_ROW)) { - row.children.push(...new Array(LIMIT_ROW - len).fill({ itemId: ID_BLANK })); - }; - - return row; - }; - if (length && (length <= LIMIT_SEARCH)) { sections = [ { @@ -412,6 +558,7 @@ class MenuSmile extends React.Component { let n = 0; let row = { children: [] }; + for (let i = 0; i < items.length; ++i) { const item = items[i]; const next = items[i + 1]; @@ -426,28 +573,37 @@ class MenuSmile extends React.Component { row.children.push(item); n++; - if ((n == LIMIT_ROW) || (next && next.isSection && (row.children.length > 0) && (row.children.length < LIMIT_ROW))) { - ret.push(fillRowWithBlankChildren(row)); + if ((n == LIMIT_SMILE_ROW) || (next && next.isSection && (row.children.length > 0) && (row.children.length < LIMIT_SMILE_ROW))) { + ret.push(row); row = { children: [] }; n = 0; }; }; - if (row.children.length < LIMIT_ROW) { - ret.push(fillRowWithBlankChildren(row)); + if (row.children.length && (row.children.length < LIMIT_SMILE_ROW)) { + ret.push(row); }; return ret; }; getRowHeight (item: any) { - return item.isSection ? HEIGHT_SECTION : HEIGHT_ITEM; + if (item.isSection) { + return HEIGHT_SECTION; + }; + + switch (this.state.tab) { + case Tab.Gallery: return HEIGHT_SMILE_ITEM; + case Tab.Library: return HEIGHT_LIBRARY_ITEM; + }; + + return 0; }; onKeyUp (e: any, force: boolean) { window.clearTimeout(this.timeoutFilter); this.timeoutFilter = window.setTimeout(() => { - this.setState({ page: 0, filter: UtilCommon.regexEscape(this.refFilter.getValue()) }); + this.setState({ page: 0, filter: UtilCommon.regexEscape(this.refFilter.getValue()) }, () => this.load()); }, force ? 0 : 50); }; @@ -457,9 +613,8 @@ class MenuSmile extends React.Component { }; const { close } = this.props; - const checkFilter = () => { - return this.refFilter && this.refFilter.isFocused; - }; + const { tab } = this.state; + const checkFilter = () => this.refFilter && this.refFilter.isFocused; e.stopPropagation(); keyboard.disableMouse(true); @@ -481,29 +636,52 @@ class MenuSmile extends React.Component { this.onArrowHorizontal(pressed == 'arrowleft' ? -1 : 1); }); + if (!this.active) { + return; + }; + keyboard.shortcut('enter', e, () => { e.preventDefault(); - if (this.active) { - this.onSelect(this.active.itemId, this.skin); - close(); + switch (tab) { + case Tab.Gallery: { + this.onSmileSelect(this.active.itemId, this.skin); + break; + }; + + case Tab.Library: { + this.upload(this.active.id); + break; + }; }; + close(); }); keyboard.shortcut('tab, space', e, () => { - if (checkFilter() || !this.active) { + if (checkFilter()) { return; }; e.preventDefault(); - const item = UtilSmile.data.emojis[this.active.itemId]; + switch (tab) { + case Tab.Gallery: { + console.log(this.active); - if (item.skins && (item.skins.length > 1)) { - this.onSkin(e, this.active.id, this.active.itemId); - } else { - this.onSelect(this.active.itemId, this.skin); - close(); + const item = UtilSmile.data.emojis[this.active.itemId]; + if (item.skins && (item.skins.length > 1)) { + this.onSkin(e, this.active); + } else { + this.onSmileSelect(this.active.itemId, this.skin); + close(); + }; + break; + }; + + case Tab.Library: { + this.upload(this.active.id); + break; + }; }; Preview.tooltipHide(true); @@ -522,12 +700,14 @@ class MenuSmile extends React.Component { this.active = item; - if (this.active) { - const element = node.find(`#item-${$.escapeSelector(this.active.id)}`); - - element.addClass('active'); - Preview.tooltipShow({ text: (UtilSmile.aliases[this.active.itemId] || this.active.itemId), element }); + if (!item) { + return; }; + + const element = node.find(`#item-${$.escapeSelector(item.id)}`); + + element.addClass('active'); + Preview.tooltipShow({ text: this.getTooltip(item), element }); }; onArrowVertical (dir: number) { @@ -552,11 +732,6 @@ class MenuSmile extends React.Component { return; }; - const firstBlank = current.children.findIndex(it => it.itemId == ID_BLANK); - if ((firstBlank >= 0) && (firstBlank <= this.coll)) { - this.coll = firstBlank - 1; - }; - this.setActive(current.children[this.coll], this.row); }; @@ -572,13 +747,13 @@ class MenuSmile extends React.Component { // Arrow left if (this.coll < 0) { - this.coll = LIMIT_ROW - 1; + this.coll = LIMIT_SMILE_ROW - 1; this.onArrowVertical(dir); return; }; // Arrow right - if ((this.coll > current.children.length - 1) || (current.children[this.coll].itemId == ID_BLANK)) { + if (this.coll > current.children.length - 1) { this.coll = 0; this.onArrowVertical(dir); return; @@ -588,33 +763,25 @@ class MenuSmile extends React.Component { }; onRandom () { - const param = UtilSmile.randomParam(); + const { id, skin } = UtilSmile.randomParam(); - this.onSelect(param.id, param.skin); + this.onSmileSelect(id, skin); this.forceUpdate(); }; onUpload () { - const { param, close } = this.props; - const { data } = param; - const { onUpload } = data; - - close(); + this.props.close(); Action.openFile(Constant.fileExtension.cover, paths => { C.FileUpload(commonStore.space, '', paths[0], I.FileType.Image, {}, (message: any) => { - if (!message.error.code && onUpload) { - onUpload(message.objectId); + if (!message.error.code) { + this.upload(message.objectId); }; }); }); }; - onSelect (id: string, skin: number) { - if (id == ID_BLANK) { - return; - } - + onSmileSelect (id: string, skin: number) { const { param, storageSet } = this.props; const { data } = param; const { onSelect } = data; @@ -648,60 +815,70 @@ class MenuSmile extends React.Component { }; }; - onMouseDown (e: any, n: string, id: string, skin: number) { - if (id == ID_BLANK) { - return; - } - + onMouseDown (e: any, item: any) { const { close } = this.props; + const { tab } = this.state; const win = $(window); - const item = UtilSmile.data.emojis[id]; - this.id = id; - window.clearTimeout(this.timeoutMenu); + switch (tab) { + case Tab.Gallery: { + const { id, skin } = item; - if (e.button) { - return; - }; + this.id = id; + window.clearTimeout(this.timeoutMenu); - if (item && (item.skins.length > 1)) { - this.timeoutMenu = window.setTimeout(() => { - win.off('mouseup.smile'); - this.onSkin(e, n, id); - }, 200); - }; + if (e.button) { + return; + }; - win.off('mouseup.smile').on('mouseup.smile', () => { - if (menuStore.isOpen('smileSkin')) { - return; + if (item && (item.skins.length > 1)) { + this.timeoutMenu = window.setTimeout(() => { + win.off('mouseup.smile'); + this.onSkin(e, item); + }, 200); + }; + + win.off('mouseup.smile').on('mouseup.smile', () => { + if (menuStore.isOpen('smileSkin')) { + return; + }; + + if (this.id) { + this.onSmileSelect(id, skin); + close(); + }; + + window.clearTimeout(this.timeoutMenu); + win.off('mouseup.smile'); + }); + break; }; - if (this.id) { - this.onSelect(id, skin); - close(); + + case Tab.Library: { + this.upload(item.id); + break; }; - window.clearTimeout(this.timeoutMenu); - win.off('mouseup.smile'); - }); + }; }; - onSkin (e: any, n: string, id: string) { - const { getId, close, param } = this.props; - const item = UtilSmile.data.emojis[id]; - - if (item.skins.length <= 1) { + onSkin (e: any, item: any) { + const el = UtilSmile.data.emojis[item.itemId]; + if (el.skins.length <= 1) { return; }; + const { getId, close, param } = this.props; + menuStore.open('smileSkin', { ...param, type: I.MenuType.Horizontal, - element: `#${getId()} #item-${$.escapeSelector(n)}`, + element: `#${getId()} #item-${$.escapeSelector(item.id)}`, vertical: I.MenuDirection.Top, horizontal: I.MenuDirection.Center, data: { - smileId: id, + smileId: item.itemId, onSelect: (skin: number) => { - this.onSelect(id, skin); + this.onSmileSelect(item.itemId, skin); close(); }, rebind: this.rebind @@ -726,11 +903,7 @@ class MenuSmile extends React.Component { return it; }); - ids.unshift({ - id: id, - skin: skin, - key: [ id, skin ].join(',') - }); + ids.unshift({ id, skin, key: [ id, skin ].join(',') }); ids = UtilCommon.arrayUniqueObjects(ids, 'key'); ids = ids.slice(0, LIMIT_RECENT); @@ -743,7 +916,7 @@ class MenuSmile extends React.Component { }; onRemove () { - this.onSelect('', 1); + this.onSmileSelect('', 1); this.props.close(); }; @@ -827,9 +1000,7 @@ class MenuSmile extends React.Component { return; }; - const { dataset, param, close } = this.props; - const { data } = param; - const { onUpload } = data; + const { dataset, close } = this.props; const { preventCommonDrop } = dataset || {}; const file = e.dataTransfer.files[0].path; const node = $(this.node); @@ -846,17 +1017,72 @@ class MenuSmile extends React.Component { preventCommonDrop(false); if (!message.error.code) { - onUpload(message.objectId); + this.upload(message.objectId); }; close(); }); }; + getTabs () { + const { param } = this.props; + const { data } = param; + const { noHead, noGallery, noUpload, noRemove } = data; + const { tab } = this.state; + + if (noHead) { + return []; + }; + + let tabs: any[] = []; + + if (!noGallery) { + tabs = tabs.concat([ + { text: translate('menuSmileRandom'), onClick: this.onRandom }, + { text: translate('menuSmileGallery'), onClick: () => this.onTab(Tab.Gallery), isActive: (tab == Tab.Gallery) }, + ]); + }; + + if (!noUpload) { + tabs = tabs.concat([ + { text: translate('menuSmileUpload'), onClick: () => this.onTab(Tab.Upload), isActive: (tab == Tab.Upload) }, + { text: translate('commonLibrary'), onClick: () => this.onTab(Tab.Library), isActive: (tab == Tab.Library) }, + ]); + }; + + if (!noRemove) { + tabs.push({ text: translate('commonRemove'), onClick: this.onRemove }); + }; + + return tabs; + }; + onTab (tab: Tab) { - this.setState({ tab }); + this.setState({ tab }, () => this.load()); + }; + + upload (id: string) { + const { param } = this.props; + const { data } = param; + const { onUpload } = data; + + if (onUpload) { + onUpload(id); + }; + }; + + getTooltip (item) { + switch (this.state.tab) { + case Tab.Gallery: { + return UtilSmile.aliases[item.itemId] || item.itemId; + }; + + case Tab.Library: { + return item.name; + }; + }; }; }; -export default MenuSmile; +export default MenuSmile; \ No newline at end of file From 20cc77a8288df5cb105b9c064808b5879586772e Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Wed, 10 Apr 2024 08:14:59 +0200 Subject: [PATCH 02/19] fixes --- src/scss/menu/smile.scss | 4 ++-- src/ts/component/menu/block/cover.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/scss/menu/smile.scss b/src/scss/menu/smile.scss index 9bbadeb6c8..3b1e6ee89b 100644 --- a/src/scss/menu/smile.scss +++ b/src/scss/menu/smile.scss @@ -8,8 +8,8 @@ .ReactVirtualized__List { padding: 0px 0px 8px 0px; } .head { - color: var(--color-control-active); font-weight: 500; padding: 3px 16px 10px 16px; border-bottom: 1px solid var(--color-shape-secondary); - display: flex; flex-direction: row; gap: 0px 16px; justify-content: space-evenly; + color: var(--color-control-active); font-weight: 500; padding: 3px 14px 10px 14px; border-bottom: 1px solid var(--color-shape-secondary); + display: flex; flex-direction: row; gap: 0px 16px; justify-content: space-evenly; @include text-small; } .head { .tab { display: inline-block; vertical-align: top; transition: $transitionAllCommon; @include text-overflow-nw; } diff --git a/src/ts/component/menu/block/cover.tsx b/src/ts/component/menu/block/cover.tsx index b36f043c24..ddf68a28c0 100644 --- a/src/ts/component/menu/block/cover.tsx +++ b/src/ts/component/menu/block/cover.tsx @@ -234,7 +234,7 @@ const MenuBlockCover = observer(class MenuBlockCover extends React.Component { this.setState({ isLoading: false }); From 9c5c9d03333bd2fa279629d66c7b21fa206b9344 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Mon, 15 Apr 2024 16:06:29 +0200 Subject: [PATCH 03/19] refactoring --- src/json/text.json | 7 ++-- src/scss/menu/smile.scss | 16 ++++----- src/ts/component/menu/smile.tsx | 63 ++++++++++++--------------------- 3 files changed, 34 insertions(+), 52 deletions(-) diff --git a/src/json/text.json b/src/json/text.json index bbc2a6e6e6..04323e9972 100644 --- a/src/json/text.json +++ b/src/json/text.json @@ -1204,10 +1204,9 @@ "menuVaultPeer": "%d\/%d peers", "menuVaultPathText": "Your key files will be stored here. Click to change the path", - "menuSmileRandom": "Random emoji", - "menuSmileGallery": "Gallery", - "menuSmileUpload": "Upload image", - "menuSmileEmpty": "There are no emojis named \"%s\"<\/span><\/b>Try to find a new one or upload your image", + "menuSmileGallery": "Emojis", + "menuSmileUpload": "Upload", + "menuSmileEmpty": "There are no items named \"%s\"<\/span><\/b>Try to find a new one or upload your image", "menuSmileRecent": "Recently used", "menuSmileSearch": "Search results", diff --git a/src/scss/menu/smile.scss b/src/scss/menu/smile.scss index 3b1e6ee89b..85543e7ccf 100644 --- a/src/scss/menu/smile.scss +++ b/src/scss/menu/smile.scss @@ -1,7 +1,7 @@ @import "~scss/_vars"; .menus { - .menu.menuSmile { width: 384px; user-select: none; } + .menu.menuSmile { width: 404px; user-select: none; } .menu.menuSmile { .content { overflow: visible; padding-bottom: 0px; max-height: unset; } .wrap { display: flex; flex-direction: column; } @@ -9,12 +9,12 @@ .head { color: var(--color-control-active); font-weight: 500; padding: 3px 14px 10px 14px; border-bottom: 1px solid var(--color-shape-secondary); - display: flex; flex-direction: row; gap: 0px 16px; justify-content: space-evenly; @include text-small; + display: flex; flex-direction: row; gap: 0px 16px; } .head { .tab { display: inline-block; vertical-align: top; transition: $transitionAllCommon; @include text-overflow-nw; } .tab:last-child { margin-right: 0px; } - .tab:hover, .btn.active { color: var(--color-text-primary); } + .tab:hover, .tab.active { color: var(--color-text-primary); } } .filter.withHead { padding-top: 12px; } @@ -22,11 +22,11 @@ .inner { height: 35px; } } - .body.gallery, .body.library { + .body.smile, .body.library { .items { height: 238px; } } - .body.gallery { + .body.smile { .section { padding: 11px 14px !important; border: 0px; } .section > .name { padding: 0px; margin: 0px; } @@ -79,10 +79,10 @@ .body.library { .filter { margin: 0px 0px 7px 0px; } - .row { padding: 7px 14px; } - .row { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0px 12px; } + .row { padding: 3px 14px; } + .row { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0px 8px; } - .item { padding: 4px; border-radius: 6px; } + .item { padding: 0px; border-radius: 2px; } .item { .img { width: 100%; height: 100%; } } diff --git a/src/ts/component/menu/smile.tsx b/src/ts/component/menu/smile.tsx index 047ea40c17..9143296fc6 100644 --- a/src/ts/component/menu/smile.tsx +++ b/src/ts/component/menu/smile.tsx @@ -7,9 +7,10 @@ import { menuStore, commonStore } from 'Store'; import Constant from 'json/constant.json'; enum Tab { - Gallery = 0, - Upload = 1, - Library = 2, + None = 0, + Library = 1, + Smile = 2, + Upload = 3, }; interface State { @@ -37,7 +38,7 @@ class MenuSmile extends React.Component { filter: '', page: 0, isLoading: false, - tab: Tab.Gallery, + tab: Tab.None, }; node = null; @@ -60,7 +61,6 @@ class MenuSmile extends React.Component { this.onKeyUp = this.onKeyUp.bind(this); this.onKeyDown = this.onKeyDown.bind(this); - this.onRandom = this.onRandom.bind(this); this.onUpload = this.onUpload.bind(this); this.onRemove = this.onRemove.bind(this); this.onScroll = this.onScroll.bind(this); @@ -82,7 +82,7 @@ class MenuSmile extends React.Component { let content = null; switch (tab) { - case Tab.Gallery: { + case Tab.Smile: { if (!this.cache) { break; }; @@ -313,8 +313,8 @@ class MenuSmile extends React.Component { {tabs.map((item, i) => (
this.onTab(item.id))} > {item.text}
@@ -333,10 +333,9 @@ class MenuSmile extends React.Component { componentDidMount () { this._isMounted = true; - const { storageGet, param } = this.props; - const { data } = param; - const { noGallery } = data; + const { storageGet } = this.props; const items = this.getItems(); + const tabs = this.getTabs(); this.rebind(); @@ -347,11 +346,7 @@ class MenuSmile extends React.Component { keyMapper: i => (items[i] || {}).id, }); - if (noGallery) { - this.onTab(Tab.Upload); - } else { - this.forceUpdate(); - }; + this.onTab(tabs[0].id); }; componentDidUpdate () { @@ -485,7 +480,7 @@ class MenuSmile extends React.Component { let ret = []; switch (tab) { - case Tab.Gallery: { + case Tab.Smile: { ret = this.getSmileItems(); break; }; @@ -593,7 +588,7 @@ class MenuSmile extends React.Component { }; switch (this.state.tab) { - case Tab.Gallery: return HEIGHT_SMILE_ITEM; + case Tab.Smile: return HEIGHT_SMILE_ITEM; case Tab.Library: return HEIGHT_LIBRARY_ITEM; }; @@ -644,7 +639,7 @@ class MenuSmile extends React.Component { e.preventDefault(); switch (tab) { - case Tab.Gallery: { + case Tab.Smile: { this.onSmileSelect(this.active.itemId, this.skin); break; }; @@ -665,9 +660,7 @@ class MenuSmile extends React.Component { e.preventDefault(); switch (tab) { - case Tab.Gallery: { - console.log(this.active); - + case Tab.Smile: { const item = UtilSmile.data.emojis[this.active.itemId]; if (item.skins && (item.skins.length > 1)) { this.onSkin(e, this.active); @@ -762,13 +755,6 @@ class MenuSmile extends React.Component { this.setActive(current.children[this.coll], this.row); }; - onRandom () { - const { id, skin } = UtilSmile.randomParam(); - - this.onSmileSelect(id, skin); - this.forceUpdate(); - }; - onUpload () { this.props.close(); @@ -821,7 +807,7 @@ class MenuSmile extends React.Component { const win = $(window); switch (tab) { - case Tab.Gallery: { + case Tab.Smile: { const { id, skin } = item; this.id = id; @@ -1028,7 +1014,6 @@ class MenuSmile extends React.Component { const { param } = this.props; const { data } = param; const { noHead, noGallery, noUpload, noRemove } = data; - const { tab } = this.state; if (noHead) { return []; @@ -1036,18 +1021,16 @@ class MenuSmile extends React.Component { let tabs: any[] = []; + if (!noUpload) { + tabs.push({ id: Tab.Library, text: translate('commonLibrary') }); + }; + if (!noGallery) { - tabs = tabs.concat([ - { text: translate('menuSmileRandom'), onClick: this.onRandom }, - { text: translate('menuSmileGallery'), onClick: () => this.onTab(Tab.Gallery), isActive: (tab == Tab.Gallery) }, - ]); + tabs.push({ id: Tab.Smile, text: translate('menuSmileGallery') }); }; if (!noUpload) { - tabs = tabs.concat([ - { text: translate('menuSmileUpload'), onClick: () => this.onTab(Tab.Upload), isActive: (tab == Tab.Upload) }, - { text: translate('commonLibrary'), onClick: () => this.onTab(Tab.Library), isActive: (tab == Tab.Library) }, - ]); + tabs.push({ id: Tab.Upload, text: translate('menuSmileUpload') }); }; if (!noRemove) { @@ -1073,7 +1056,7 @@ class MenuSmile extends React.Component { getTooltip (item) { switch (this.state.tab) { - case Tab.Gallery: { + case Tab.Smile: { return UtilSmile.aliases[item.itemId] || item.itemId; }; From ef6ea8b396862dab6d40c4f4430e2cd643212705 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Fri, 19 Apr 2024 14:54:44 +0200 Subject: [PATCH 04/19] bump middleware version --- middleware.version | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/middleware.version b/middleware.version index 05588550da..72c8318a61 100644 --- a/middleware.version +++ b/middleware.version @@ -1 +1 @@ -0.33.0-rc17 \ No newline at end of file +0.33.0-rc18 \ No newline at end of file From 991bc1b3ce16110c68e77532d9ad0a4cf9660aa0 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Sat, 20 Apr 2024 11:28:25 +0200 Subject: [PATCH 05/19] JS-4421: library usecase banner --- src/img/icon/header/banner/close.svg | 5 +++ src/img/icon/header/banner/pic.png | Bin 0 -> 20491 bytes src/json/text.json | 2 ++ src/scss/component/header.scss | 27 ++++++++++++++++ src/scss/page/main/store.scss | 5 +-- src/scss/theme/dark/common.scss | 9 ++++++ src/ts/component/header/index.tsx | 8 +++-- src/ts/component/header/main/store.tsx | 35 ++++++++++++++++++--- src/ts/component/page/main/store.tsx | 41 +++++++++++++++++++------ src/ts/interface/common.ts | 3 ++ 10 files changed, 117 insertions(+), 18 deletions(-) create mode 100644 src/img/icon/header/banner/close.svg create mode 100644 src/img/icon/header/banner/pic.png diff --git a/src/img/icon/header/banner/close.svg b/src/img/icon/header/banner/close.svg new file mode 100644 index 0000000000..4ab94fb154 --- /dev/null +++ b/src/img/icon/header/banner/close.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/img/icon/header/banner/pic.png b/src/img/icon/header/banner/pic.png new file mode 100644 index 0000000000000000000000000000000000000000..9e1c60d61c2f641aed02aa788855f50e093f9f72 GIT binary patch literal 20491 zcmW(+1yEbt7KK8gIHhQd7PsP1+}+)wSaBz~dvSLN?(XhRarfd*fB?bydH>8r=gws3 zoNa5Zeg7yaNTMNsMTUWaL6epeQ-OhjErq^!`Gf#{p5ZPgg}xv;NNGF6z@U8j?*R*w zk%bTa64qHoQUs=Yitq&b0p46#UKj?ZE*9m*=pzh_Vy?89u$nvUMK)rmzIyWevJY*c zFlm5P_$@9bbk*hd8amJfQo0ho(2vtRX*v$`JG36Y!?I^pp*!G!R0{acWCzU~aPOII;(xhRM zlir1>2h;)T4m=ybS+(o9!1YZn5zz*q>0Zuv`#Q(oTv>V)E*~2hBD^j&z2&sCyZB@n z=pgWe+g)BB*|*csrw62Bj}n$LO}dE%_><$e4|Yy{H&MK~=O8MYORmcc$v`k&$EgZ9 ztKx=odS=(z(hAXXvkBO(x}D-8&|HxMxG}o{$xSCa4FgYjt8zRl?h(B`bdvc!-qndu z>Kf56zm?N_0ebx2=@j*K1g3A>kl%c7?m){&XDs+Ve)o$#Ma%Vu_p#~*r%bS~R;$aL z#_!rQ+jEfeZNLcf-RyPOOxV0V#A}(5sVy&eI}Gk?bZCrb7G^BRCKu+{Y(03|c=t9A zvqGQOm}PBILA^d$v@!}xx(!V3I!2P<(K6*rytU;4c)pFB0Csl*9u0`foJ65XccMxV zLN$5y%^bI%!Sh?^^S`er90FCh-Rzr<*U!$D1g}d#@SV)rE=U%MqD*#RyTy1YV)zxZ zZP+-$Tb0U7EO6V-+DPw}pb+nRyR_TY=w*=2H=<$TCcox-y5@hX$yIv{f8t-D-?f%( zpL;|ma!HZRuDI}%!77JO+-8Wz~ zLWi2g*bhl~9@y}_Vsh0J zK8l}h#Z-6ox#yu}&Kvj2DW`@s+BjPq6=6YTArYkF*4xA9QLWmg;wY{AeWg#$Oyya+ zW)WazZ^;9g7MsRD=5_*(1DgZdkMtnjyN>Y^EK1a6XKkFe-z>v`OOzKIi8mUSr>`BH zc5hj^)-Np?-G1*s=I!Tw?Bziwn11hz4G<|xj%JgQn2Y&dgR3B4ChZ}gZOO>E^0Okc zd6KwB?9bi8HJ0EbUa~T~Pjqqdtk>VOSRo%Fy80s;a&k`0P2~9w*{MmpEY&Dh9h+G? z{jofAcw}l^qwgG;tUjjs%)1WXC-&QH!0F5g%nTeeiz%qK0 z1ak6ZNvbQuMULuI)ZERZIqaNy?#o$@iT*1f``%~OC*uTMb7paNb5(k#ByIsXPn$Mx0Yk&B{k3AxW}cJ zz@)nhRV}Ce<#ar?dq87aP+swwW4f*E(o#Q_QFm!?+eBx$y>q^?QoL>6byYe8FoHM> zF>L&*1*2H%`|F@a`e@D{4;>5V7b)G7T@4zTBDwq-)0Be$4;QO2# zwCo~FbsqUXq2D=p`|oMCxV zFFLDbC-?Li*bb+X`^3KaEEcXW7`(7F{VC+x3T=9$I={CtsTRB!i${_I5Cl z3UNR?T0P3RaWgp>PezMr0GQ4s9kS(IM@e+H^mVb=stR1M#iaKIe;)XUC#Bo#S0Bgv_ttC#10 ziqi^^V{RqicZOXM@uDh7&n$Yn|7E0#=S*i#gWxXeh4&7W$Y`e0G2@Km%~So77ei;C z(YzJJRB(AWy}Hxx3kY_cE+kZA?mTl!YJtSjsHnM=gic z1h?R$M%AI0N3hp%;^(h37PE%rQlkn&DN6~3?0}&AC;>yUklybnNHL{su(TU8i~3S64I1NiP&OvKlIg`pCt%+QQG z>wSr-V{-TloPTWJKJmGjlWBpbq{rLYRJ5A*Vk)2r3EOn8y1+#KioZAlQ48BuScM(=|S_E)= z;gJhjyX0^3tg+mJ<1cCNbjLUtZ9m>8c!p>~s^|E;ALm?L?47!r+FfhC->c<95G2-8 zUQIt!PJUO96gWR*{zx!iD9gakMVU-58`5CRHqXRbC8=C#x2QPN{>(^2*=rU zlvd9(R&Gj_QCPeSj|A*fT={pZ#{pZ#ROSX2Efy=juzyt^xiBQ{@tAe_e$XskG$?yi z<9)1dGIRIl+x*sfDf>A#Oc?Pz>hIl9|gps*aQ zv8k5RYFoPX7WA!jt2^h7Tvg{%nf-;OnNIexfm#`)Hmydknk+jl?onQOP?vMtcFL_~ zgTZlNH|VDOYe&^UW*-V2 z3Cbgi3zrxXAxqja-9$P)YX6>5Z6RI8Dc#Xt{3bCt4*zA?Wom3!=Y#$4iZ(d@g`1DT z!yxfp)BV9nw2_n6Rdf2QbpkK!s?!PX%^DNu!@sn*x+nCLw{GnqPz8NvkHUd07z}Bm z6W#3UetTPUwS4lLK$xbf9uZ^$+HZo(E1dN`PG%n6lR|Txb(Y#2SM9p)mh?!ZMUmup6{sZK8S$nf*(EskU~z( z`6KNGU(s$NxA{TnpZV^BqNF{e@$^tGj1?{(QSYZu3P;;d38-2j3%XIl_t-{@%3Eb(9649&LShf4@)wyq1Fbop8 zSS}j4ZgW0*v)Uc})ABqtXrl}nnxGp%vJbr+lTqa#YcHjm0L9JFCDdu)TfvcXu*71i zCg!j-Ek#lk1>za&kIKv?y0Ng@t~EN#I(fEK!Hz#Om~cqM65A3$mvw|~%jUhwLGOF# zSR%FGOlH1yv=ukT;(p2xD?&Q-a1}L79hvS=Bm0egOtSUr#fQ=El_|{DWfLrpMN6_% zn&tfVbw?=2Xyh;7^_sV`yiXU(N}>t5Z=6%=6omH1Mn^}rbQugfAA$-bqIsAUdf?H+ z1I3$4Q%&M4%V~)|$y&MteahHBV&Qqd7IkMhJ)%^IYsgSEbz^dilmAf?LZ&nM1Y~%Z zwu(6A$M=Y)D2bX1psOYPTyf+csKWyEZipw zrv4F=K{(Q^dcBC1v}{HPr~RvNiz3S_G8EEuG&xol$8hhed$Gf<6`yo+k#@MP)xHqA zA^3$pd~xK-({?mp<%Uj!1G32M; zOA51^BW-WvA2Q3nRz*8?s~4$**ZVWGA|*{Hk3xWJtXi2ji)|bc&uBeMW1=Bu-O?14 ziB4638-Xpmp4a;!%dZ99SF1uw^lqD*p4-k(fks88_5|M$e#^f{zMj7*u7c6m@(BxV&3Mn>tTH>N z$vB~*e;q3r2zE48T%DI;&p_-Z1StY`_btemz`c~ ztnK4us67w_m|$!{9l>SL!dz41jyJeNiAz|EWq6gcU#T@pxsHYPfd@5BmE$fD*cZ`k zGm&&dMzo>@WJHjkPrR|8>kpmnKpA|pS+jZIm1Zn#o1@LIZK!mrB2{iT#N?)nu-rp9 zWAX;h0faP52ixFdawFb-`-;^b^Xu1&=B|eR=9)@S(1b=duPpyFF3sS z8gUQ^&zE5h{kJ|>Y2J|u&yIM>+QMTy1|$}iZ-1wZS5t#;MH<%y4Q&^13tT1! zYI0A1UNmN@^0k63mPb z*=X75*=R(_GXiKCF;U7mCuT@i0|Ovm-xz(T6Oc`RYvy@x(6-q~_tUu$mK1j!N;%OM zQ#OWaAUnBbI%J|lVtnV7l_ntEf*KR`nQ)Kzo{W3#!-xgRzUUez=82G6p=ik{edo4 zp5-?hR5_h1;Z@U8&Eg1id`>j)Snz^Bc@Wp#G6}{2Ga`+5JTghTr{^w_)u($%NDR04 z7fL5eJlAqJXNX0#GZP_ClF=fMmMab>F)Y}gN#`f0dovif{=wpjSw8&#>iUpLA$qGy=lVLX9 z{8Q#dxs-?51bs(4`eA|N7)69tSVFO+dSI>SzVdNFHlVt3c65USb4kKBH6EH^F*`L~ zEW5FH(#nFc$iCNPv1ldLHty3*39Fxs1=!HaYoiX$a=thJ)+y6bqzW=`{drqQ8j$u& zL4I_?lSxAg*Go+$U@`5ltua~nAL&Jo^uO!aWb<2{ah&AjCO*AG#(U;@wS+f6$RLu) zV`M0HB$FRv!d3Z0ASuL6PCNMtrB-;;0AmW}vWNX-jTEmeu!6B}8%Kg=ek}7JgT(Pv zXQgDc!oNT^9z+#v3d()%(x|8?KnS#^xuQCjuaF3MyOVwsCq|SKnY9=PQNbZ`l`YPEr6J(|iE&umKXj)^My7pfX;d9IY!iXg5_Rb>Z7%^m zq9^}Rq(Mxn9j-y_RJ`j3GF>=nCDQgT6qPS3Y81s(sgk)CUpi}X$Z1?92fT7P@N$** z_jg9i4DG&CPx6y-QUxqN8Ij^KlzwR7VJ3(E`B(omueco# zXQUI`?9U=lZUQkQ$AY?^ov)(k8t9LqLdoXr5`RqLGpHvfBCV`-**0^&gzoDbLR%Sv z^2ZIHrOJT4QoQ&B{W|w>e*eO5@Zwz2sMUWZo*NnHHVJVr=8}` ztgqj+%LOsE+|r5O^37gXAg2{I&ARqoi%@hCD`ZfJp4@UaZ&tI8z^ngU2_3J;wGMT^5=2of9j!B6Ko7ZtmF+Tc(>68mIxbPmD zI{->#VPBaV#(U-6Lu_wHun7k}HP6HSSsC5(jfAv!a#Y|6XHs5Lbi-D0xa@w5wlEbH zbxpvnbDU@JayDezU4m9&fWIC{2lP>56yl5T*Q{%54_455&oK*W^y-*t~0?0OqQF6t+KxPm9S5L17wvN=N!y*R>xUg=eVJZ-+m%dn!Acg|C*DlCvX zA71@)viK3!&B!t`W7UI|_m%pRmw*&me%5WwfiG!i>F$~14;DFMic)4zd5^su0iP$4 zgG`-VvODjy7v=l?a57F$w+18KltIpEn^~8JYgx^;cOO;zdH%vbOsrzcFHt+hpIAk{ z8h1Qjb|6;tLy1Pg2Rc!e_PrS1etYlm>u$UE1~G=_dzy8&}glzRfwk<%s7;U#b1B5fn1Dk*}e|u~<@loANOz~lHc*iUWFgsq%49|NdI%dFD zi=7RE{yK+3O6~Duc|Xl&M_&q3t8PY0E%oPBWzBMwwUEd)t#vMiiCI@eL6gxZe?!0^ zBK-g)J$(!k4;bU4C{pluNnUjO&wZ-;*ikcR37TiaCQ@K%>5#vNfZKGeX|O0OA>bfC4Sh!)MYOi35{ac zZCkNfxDoKWMoGEvNSXN%{FM~u+qJzCSX#dX6N}K??$6Cd%eL>T96vOG3qGbzAXaMM zQK)}!CS;i@`7T{Vwi9re{SWP7V4Anch>K6>ZVJuZXtpt&?yI!g^^pnurbB>R z7dnM-kuL<3V4_DP**>h!b;?$P%admKBYA!ZmTSrICm*>(IYI3hOjgz! zQu|aZD3o|8KUJ_9D8hE){`Im;LyKT$F@8lp#`yC{v0VDx7q*IBp~sm^tb^T`#KZc2 z61gb&kmFBnj6&ysq>dC3B23_CNpWmX@hhE`8hHbE$Z%>H`(|P+nNXGL$#*%D&+Qk_- zOeuD<2O_e@k?(R3MHv>JsQqsXlZUH>%mWMOPnik(C0-UgHqNB*V`b?_GtQ2Tt@h@ zY=~I6&wB4GjcmcM2O5G4geY5eZ(rhZQM%5b?`lPRj6Yk4LssJo`o@JBG`ykN4`6cm zH$6Ebws!X~ftd^XLaxhU|1afhqlE;l1s^v9`vQsB+CRMK>nie^*gi`g4mpeljiejf z$CfJ(NW4kl=!)!9R>)7!TZ@U&Q45Tk-NZ7FD6u}fPd$AKw^VsvPqnhY7_ocm)USRY z%6*}|?Pw;fQ3W@t3`0=vek|q~q6{rDEhHCc^&mu8i>YW`7$IRD4uL{34?ftU>U^6R=d|=U$I+l5x6D2x)%a3cKqtf7_6}D5EB>Pv%Qhzl^D>p{TTN zUY~3xTs{wCsll5V#m8q@Fsm49$CnXOa(ttOXIgkk{5Q~J{Z$gIB$AYmY~Qz>%+zhX zs4uVKy|n`b58+Mqr8!|w*gsnAx^jOtMUUu_Qu#?FzYO#1Cv~+&PeiNIGH9Hjt7*z+7wH;C?atDd0rGCBPgKG(C-ml` zIqkaX!Qte3(3n$vMx``%(Qo6iYIFeXcV)J)>z$4+e)hlU{1|G8qgQ_NVYV+TBg`qr z7@$88vi6DU2w%osQ&K%o#`v#w(pnInj=31Kmb&+^h?j zlq!6C6g;K|Gg-|fTk|4D{ZMR!LG#ABd)|j4PET;1yrmhAp~P_SFLaqe_;UWC(1aN> z4&Y&KK8XextoWVA5g{RI!RuGFn)ebgYqS(GB`RNMl-V=BlyAi­%{mE_;P!A#hPB(qEj8~ik_I1i_kw6b#}59d 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 literal 0 HcmV?d00001 diff --git a/src/json/text.json b/src/json/text.json index 87fc739671..ae089b2df6 100644 --- a/src/json/text.json +++ b/src/json/text.json @@ -396,6 +396,8 @@ "pageMainStoreRelationsEmpty": "Your Relation list is emptyAdd some from the Anytype Library using the search icon or create your own using the button above", "pageMainStoreMyTypes": "My Types", "pageMainStoreMyRelations": "My Relations", + "pageMainStoreBannerTitle": "What can I build with Anytype?", + "pageMainStoreBannerButton": "Explore", "pageMainTypeRecommendedLayout": "Recommended layout", "pageMainTypeNewSetOfObjects": "New Set of Objects", diff --git a/src/scss/component/header.scss b/src/scss/component/header.scss index 4706c4b1c0..f8d5203b34 100644 --- a/src/scss/component/header.scss +++ b/src/scss/component/header.scss @@ -128,6 +128,33 @@ html:not(.bodyIndexIndex):not(.bodyAuthSelect) { .icon.btn-settings { background-image: url('~img/icon/dataview/button/settings.svg'); } } +.header.mainStore.withBanner { flex-direction: column; height: auto !important; } +.header.mainStore.withBanner { + .sides { display: flex; flex-direction: row; align-items: center; justify-content: stretch; height: 52px; } + + .bannerWrapper { width: 100%; padding: 16px 80px; } + .bannerWrapper { + .banner { + background-image: linear-gradient(180deg, #fef2c6 0%, #f8f8f8 100%); display: flex; align-items: center; + color: var(--color-control-accent); height: 116px; border-radius: 11px; position: relative; justify-content: space-evenly; + padding: 0px 116px; overflow: hidden; + } + .banner { + .side { width: calc(50% - 46px); } + .side.left { display: flex; flex-direction: column; padding: 0px; align-items: flex-start; justify-content: center; gap: 8px 0px; } + .side.right { min-width: 424px; } + + .icon.close { position: absolute; width: 20px; height: 20px; background-image: url('~img/icon/header/banner/close.svg'); right: 10px; top: 10px; } + .title { @include text-header3; @include text-overflow-nw; width: 100%; } + .pic { + width: 100%; height: 100%; background: url('~img/icon/header/banner/pic.png') no-repeat; background-size: contain; + background-position: bottom right; + } + .button { @include text-small; height: 24px; line-height: 24px; } + } + } +} + .popup { .header { position: sticky; padding: 0px; top: 0px !important; } .header { diff --git a/src/scss/page/main/store.scss b/src/scss/page/main/store.scss index 8234ac2860..b30d45cb65 100644 --- a/src/scss/page/main/store.scss +++ b/src/scss/page/main/store.scss @@ -1,7 +1,8 @@ @import "~scss/_vars"; .pageMainStore { - .content { height: 100%; padding-top: 40px; } + .wrapper.withBanner { padding-top: 200px; } + .body { display: flex; flex-direction: column; } .body { @@ -42,7 +43,7 @@ } .loaderWrapper { position: relative !important; } - .ReactVirtualized__List { padding: 48px 80px 80px 80px; } + .ReactVirtualized__List { padding: 0px 80px 80px 80px; } .emptySearch { padding: 56px 0px; border: 1px solid var(--color-shape-primary); border-radius: 12px; height: auto; @include text-paragraph; } .emptySearch { diff --git a/src/scss/theme/dark/common.scss b/src/scss/theme/dark/common.scss index 387cbb43e2..2b9cebfd03 100644 --- a/src/scss/theme/dark/common.scss +++ b/src/scss/theme/dark/common.scss @@ -272,6 +272,15 @@ html.themeDark { } } + .header.mainStore.withBanner { + .bannerWrapper { + .banner { color: var(--color-text-inversion); } + .banner { + .button { background-color: var(--color-bg-primary); color: var(--color-text-primary); } + } + } + } + /* Sidebar */ .sidebar { background-color: var(--color-bg-secondary); box-shadow: 0px 4px 16px rgba(0,0,0,0.2); } diff --git a/src/ts/component/header/index.tsx b/src/ts/component/header/index.tsx index 4a85220921..0f8b5511c8 100644 --- a/src/ts/component/header/index.tsx +++ b/src/ts/component/header/index.tsx @@ -44,14 +44,18 @@ class Header extends React.Component { }; render () { - const { component, className, rootId } = this.props; + const { component, className, withBanner } = this.props; const Component = Components[component] || null; const cn = [ 'header', component, className ]; - if (![ 'authIndex', 'mainIndex' ].includes(component)) { + if (![ 'authIndex' ].includes(component)) { cn.push('isCommon'); }; + if (withBanner) { + cn.push('withBanner'); + }; + return (