refactor: neo tabs #6231

preschian · 2023-06-15T08:23:48Z

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

👇 __ Let's make a quick check before the contribution.

PR Type

Bugfix
Feature
Refactoring

Needs QA check

@kodadot/qa-guild please review

Context

Related Goodbye Buefy #5852

Did your issue had any of the "$" label on it?

My DOT address: Payout

Screenshot 📸

My fix has changed UI

Copilot Summary

`🤖 Generated by Copilot at 2c984d8`

The pull request refactors and updates the tab components used in various pages and components of the application. It replaces the BootstrapVue b-tabs and b-tab-item components with custom components that extend the Oruga UI library, namely NeoTabs and NeoTabItem. These custom components offer better style and functionality for the tabs, such as icons, labels, tooltips, and fallback content. The pull request also removes some unused and redundant code, and fixes some import paths and method accessibility issues.

`🤖 Generated by Copilot at 2c984d8`

The tabs in the app were outdated
So they were replaced and updated
With NeoTabs and NeoTabItem
They look much more delightful
And the code is less complicated

netlify · 2023-06-15T08:23:53Z

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	`037e3c2`
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/64a5536400fe37000828ed88
😎 Deploy Preview	https://deploy-preview-6231--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

reviewpad · 2023-06-15T08:24:52Z

AI-Generated Summary: This pull request consists of major changes across multiple Vue, SCSS and story files, mainly involving a migration of Oruga UI and Buefy tab components to custom NeoTabs and NeoTabItem components from the Kodadot1 brick UI library. Import statements, component names, and related logic have been updated accordingly. Styles have been removed, added or modified to better support the new custom components. Unused components, files, and imports have been removed for better adherence to the single responsibility principle.

Key updates include:

Replacement of <b-tabs>, <b-tab-item>, <o-tabs>, and <o-tab-item> with <NeoTabs> and <NeoTabItem> components.
Importing NeoTabItem, NeoTabs, and other required custom components from the Kodadot1 brick library.
Extending Vue instances to include new custom components.
Changes to style rules and removal of unnecessary or unused styles.
Deletion of DisablableTab component, NeoTab.vue, _o-tabs.scss, and related story and style files.

reviewpad · 2023-06-15T08:25:00Z

Reviewpad Report

⚠️ Warnings

Please link an issue to the pull request

prury · 2023-06-15T19:17:02Z

General - active tab texts are green, it should be something like white on dark mode and the usual pink on white mode i suppose.
GalleryItemDescription.vue ok
ProfileDetail.vue ok - Mobile problem:

15.06.2023_15.54.13_REC.mp4

SearchSuggestion.vue - beta was supper buggy and its now fixed with this deploy ❤️
create.vue - ok
settings.vue - Mobile - cant reach the other options

GalleryItemTabsPanel.vue - Scrolls appearing even if not needed

…eo-tabs

preschian · 2023-06-16T06:35:30Z

@prury fixed

roiLeo

Small stuff otherwise lgtm ✅

libs/ui/src/components/NeoTabs/NeoTabs.scss

components/rmrk/Profile/ProfileDetail.vue

components/search/SearchSuggestion.vue

libs/ui/src/components/NeoTabs/NeoTabs.scss

pages/bsx/create.vue

pages/ksm/create.vue

pages/rmrk/create.vue

pages/snek/create.vue

roiLeo

Tabs in /settings?tab=metadata look weird (hover state and stuff) could you check why?

Capture d’écran 2023-06-16 à 10 38 54 AM

preschian · 2023-06-16T09:05:04Z

Tabs in /settings?tab=metadata look weird (hover state and stuff) could you check why?

how about now, I changed it to k-primary

roiLeo

Maybe we should reintroduce content padding see screenshots

beta

preview

components/bsx/specific/MultiPaymentFeeButton.vue

roiLeo · 2023-06-23T07:26:59Z

Can be fixed later

…eo-tabs

vikiival · 2023-06-27T10:49:47Z

@prury is it possible to recheck pls? 🥺

prury · 2023-06-27T11:01:05Z

@prury is it possible to recheck pls? 🥺

Ofc my dear viki, I'll be home soon, recheck this one and everything else

prury · 2023-06-27T15:02:37Z

General issue:
Hover effect across all of them

Canary: (text also have hover effect)

27.06.2023_11.58.57_REC.mp4

This version:

332.mp4

Item description.vue - ok
GalleryitemtabsPanel.vue - Offers needs some padding:
Profiledetail.vue - ok
Searchsuggestion.vue - ok, only bug from Hover issue PR
BSX - Create.vue - ok
KSM - Create.vue - ok
RMRK - Create.vue - ok
SNEK - Create.vue - ok
Settings.vue - ok

…eo-tabs

preschian · 2023-06-30T08:22:42Z

General issue:
Hover effect across all of them

GalleryitemtabsPanel.vue - Offers needs some padding:

updated

prury · 2023-06-30T12:53:58Z

sorry, i only saw this one now(padding):
Profile:
Tabs that have a hover tool tip are not changing the text color when hovering:

hover.profile.mp4

I believe some padding is needed here as well(desktop and mobile):
side padding for item offers on mobile(BSX):

libs/ui/src/components/NeoTabs/NeoTabs.scss

…eo-tabs

preschian · 2023-07-04T13:05:40Z

@prury @roiLeo updated, related padding/margin and hover

codeclimate · 2023-07-05T11:26:53Z

Code Climate has analyzed commit 037e3c2 and detected 0 issues on this pull request.

View more on Code Climate.

preschian added 2 commits June 15, 2023 14:08

refactor: neo tabs

cbb9970

refactor: adjust style for tabs-toggle and disable tab

2c984d8

preschian changed the title ~~Refactor/neo-tabs~~ refactor: neo tabs Jun 15, 2023

reviewpad bot added the large Pull request is large label Jun 15, 2023

roiLeo mentioned this pull request Jun 15, 2023

Goodbye Buefy #5852

Closed

37 tasks

preschian marked this pull request as ready for review June 15, 2023 08:44

preschian requested a review from a team as a code owner June 15, 2023 08:44

preschian requested review from roiLeo, daiagi and prury and removed request for a team June 15, 2023 08:44

reviewpad bot added the waiting-for-review label Jun 15, 2023

prury added the S-changes-requested-🤞 PR is almost good to go, just some fine tunning label Jun 15, 2023

preschian added 4 commits June 16, 2023 12:25

Merge branch 'main' of github.com:kodadot/nft-gallery into refactor/n…

f95c1de

…eo-tabs

style: for default tabs

4624259

fix: disable tooltip on mobile

993db16

fix: nowrap on mobile

8c424e0

roiLeo approved these changes Jun 16, 2023

View reviewed changes

preschian added 2 commits June 16, 2023 15:31

style: use oruga variables instead

5256a28

refactor: remove unused props

bba2250

roiLeo reviewed Jun 16, 2023

View reviewed changes

fix: tooltip on disabled button and hover color

14a9b58

roiLeo reviewed Jun 16, 2023

View reviewed changes

revert: keep padding on type toggle

472485d

preschian mentioned this pull request Jun 20, 2023

Waifu mint progress bug #6269

Closed

vikiival approved these changes Jun 21, 2023

View reviewed changes

components/bsx/specific/MultiPaymentFeeButton.vue Outdated Show resolved Hide resolved

Merge branch 'main' into refactor/neo-tabs

f97f990

Merge branch 'main' into refactor/neo-tabs

022f00a

roiLeo mentioned this pull request Jun 26, 2023

Feat/statemine minting #6251

Merged

8 tasks

daiagi mentioned this pull request Jun 26, 2023

NeoTabs in pages/stmn/create #6335

Closed

preschian added 2 commits June 27, 2023 15:30

revert: components/bsx/specific/MultiPaymentFeeButton.vue

256dc10

Merge branch 'main' of github.com:kodadot/nft-gallery into refactor/n…

db324f1

…eo-tabs

prury added S-changes-requested-🤞 PR is almost good to go, just some fine tunning and removed S-works-for-me-✅ qa-guild has tested PR from end user perspective and functionality worked labels Jun 27, 2023

preschian added 2 commits June 30, 2023 15:11

Merge branch 'main' of github.com:kodadot/nft-gallery into refactor/n…

cbf9d52

…eo-tabs

style: text hover and padding on offer list

91fa7d0

roiLeo reviewed Jun 30, 2023

View reviewed changes

libs/ui/src/components/NeoTabs/NeoTabs.scss Show resolved Hide resolved

preschian added 2 commits July 4, 2023 19:45

Merge branch 'main' of github.com:kodadot/nft-gallery into refactor/n…

3e669bf

…eo-tabs

style: adjust margin and padding

9cb6669

prury added S-works-for-me-✅ qa-guild has tested PR from end user perspective and functionality worked and removed S-changes-requested-🤞 PR is almost good to go, just some fine tunning labels Jul 4, 2023

Merge branch 'main' into refactor/neo-tabs

037e3c2

roiLeo enabled auto-merge July 5, 2023 11:26

roiLeo merged commit c375e47 into main Jul 5, 2023
12 of 14 checks passed

roiLeo deleted the refactor/neo-tabs branch July 5, 2023 11:28

preschian mentioned this pull request Jul 6, 2023

#6387 alignment fix #6401

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: neo tabs #6231

refactor: neo tabs #6231

preschian commented Jun 15, 2023 •

edited by ghost

netlify bot commented Jun 15, 2023 •

edited

reviewpad bot commented Jun 15, 2023

reviewpad bot commented Jun 15, 2023

prury commented Jun 15, 2023

preschian commented Jun 16, 2023

roiLeo left a comment

roiLeo left a comment

preschian commented Jun 16, 2023

roiLeo left a comment

roiLeo commented Jun 23, 2023

vikiival commented Jun 27, 2023

prury commented Jun 27, 2023

prury commented Jun 27, 2023

preschian commented Jun 30, 2023

prury commented Jun 30, 2023

preschian commented Jul 4, 2023

codeclimate bot commented Jul 5, 2023

refactor: neo tabs #6231

refactor: neo tabs #6231

Conversation

preschian commented Jun 15, 2023 • edited by ghost

PR Type

Needs QA check

Context

Did your issue had any of the "$" label on it?

Screenshot 📸

Copilot Summary

🤖 Generated by Copilot at 2c984d8

🤖 Generated by Copilot at 2c984d8

netlify bot commented Jun 15, 2023 • edited

✅ Deploy Preview for koda-canary ready!

reviewpad bot commented Jun 15, 2023

reviewpad bot commented Jun 15, 2023

prury commented Jun 15, 2023

preschian commented Jun 16, 2023

roiLeo left a comment

Choose a reason for hiding this comment

roiLeo left a comment

Choose a reason for hiding this comment

preschian commented Jun 16, 2023

roiLeo left a comment

Choose a reason for hiding this comment

roiLeo commented Jun 23, 2023

vikiival commented Jun 27, 2023

prury commented Jun 27, 2023

prury commented Jun 27, 2023

preschian commented Jun 30, 2023

prury commented Jun 30, 2023

preschian commented Jul 4, 2023

codeclimate bot commented Jul 5, 2023

preschian commented Jun 15, 2023 •

edited by ghost

`🤖 Generated by Copilot at 2c984d8`

`🤖 Generated by Copilot at 2c984d8`

netlify bot commented Jun 15, 2023 •

edited