Ocelot-Social icon indicating copy to clipboard operation
Ocelot-Social copied to clipboard

🔧 [Refactor] Frontend Cleanup - Button Components Code

Open mahula opened this issue 2 years ago • 0 comments

🔧 RefactorButton Component related Code

Base the refactoring on the atomic design, so that the minimum necessary button code remains.

These components and page contain button related code and require some refactoring:

BaseButton Component

components/_new/generic/BaseButton/BaseButton.vue

Button Components based on base-button

components/Button/JoinLeaveButton.vue
components/Button/FollowButton.vue
components/Editor/MenuBarButton.vue
components/Group/GroupButton.vue
components/InviteButton/InviteButton.vue
components/LoginButton/LoginButton.vue
components/Map/MapButton.vue
components/Map/MapStylesButtons.vue
components/Registration/Signup.vue
components/ShoutButton.vue
components/_new/generic/PaginationButtons/PaginationButtons.vue

Components using the base-button

components/CategoriesSelect/CategoriesSelect.vue
components/Chat/Chat.vue
components/Chat/AddChatRoomByUserSearch.vue
components/ChatNotificationMenu/ChatNotificationMenu.vue
components/CommentCard/CommentCard.vue
components/CommentForm/CommentForm.vue
components/ComponentSlider/ComponentSlider.vue
components/ContentMenu/GroupContentMenu.vue
components/ContentMenu/ContentMenu.vue
components/DeleteData/DeleteData.vue
components/DonationInfo/DonationInfo.vue
components/Embed/EmbedComponent.vue
components/EmotionButton/EmotionButton.vue
components/EnterNonce/EnterNonce.vue
components/features/ReportRow/ReportRow.vue
components/features/ProfileList/ProfileList.vue
components/FilterMenu/CategoriesFilter.vue
components/FilterMenu/EventsByFilter.vue
components/FilterMenu/FilterMenu.vue
components/FilterMenu/FollowingFilter.vue
components/FilterMenu/HeaderButton.vue
components/FilterMenu/OrderByFilter.vue
components/generic/SearchableInput/SearchableInput.vue
components/Group/GroupForm.vue
components/HashtagsFilter/HashtagsFilter.vue
components/LoginForm/LoginForm.vue
components/Map/MapButton.vue
components/Map/MapStylesButtons.vue
components/Modal/ConfirmModal.vue
components/Modal/DeleteUserModal.vue
components/Modal/DisableModal.vue
components/Modal/ReportModal.vue
components/NotificationMenu/NotificationMenu.vue
components/Password/Change.vue
components/PasswordReset/ChangePassword.vue
components/PasswordReset/Request.vue
components/ReleaseModal/ReleaseModal.vue
components/Uploader/ImageUploader.vue

components/_new/features/MySomethingList/MySomethingList.vue
components/_new/generic/LabeledButton/LabeledButton.vue
components/_new/generic/PaginationButtons/PaginationButtons.vue

Components using Button components

  • components/HeaderMenu/HeaderMenu.vue
    • GroupButton from components/Group/GroupButton
    • InviteButton from components/InviteButton/InviteButton
    • MapButton from components/Map/MapButton
  • components/Editor/MenuLegend.vue
    • MenuButton from components/Editor/MenuBarButton
  • components/Editor/MenuBar.vue
    • MenuButton from components/Editor/MenuBarButton
  • components/_new/features/SearchResults/SearchResults.vue
    • PaginationButtons from /components/_new/generic/PaginationButtons/PaginationButtons
  • components/Emotions/Emotions.vue
    • EmotionButton from components/EmotionButton/EmotionButton
  • components/ProgressBar/ProgressBar.vue
    • progress-bar-button
  • components/FilterMenu/FilterMenuComponent.vue
    • LabeledButton components/_new/generic/LabeledButton/LabeledButton
  • components/FilterMenu/PostTypeFilter.vue
    • LabeledButton from components/_new/generic/LabeledButton/LabeledButton
  • components/features/ReportList/ReportList.vue
    • PaginationButtons from components/_new/generic/PaginationButtons/PaginationButtons
  • components/ContributionForm/ContributionForm.vue
    • base-button
    • in style .buttons-footer, action-buttons-group, layouts/basic.vue
    • LoginButton from components/LoginButton/LoginButton

in Style

  • components/Editor/Editor.vue in style: menubar__button
  • components/_new/generic/LoadingSpinner/LoadingSpinner.vue in style $size-button-base from components/_new/generic/BaseButton/BaseButton.vue

Pages using the base-button

pages/admin/donations.vue
pages/settings/blocked-users.vue
pages/settings/embeds.vue
pages/settings/index.vue
pages/settings/muted-users.vue
pages/settings/notifications.vue
pages/settings/privacy.vue
pages/settings/my-email-address/index.vue
pages/settings/my-email-address/enter-nonce.vue
pages/terms-and-conditions-confirm.vue

Pages using Button Components

  • pages/notifications/index.vue
    • PaginationButtons from components/_new/generic/PaginationButtons/PaginationButtons
  • pages/groups/_id/_slug.vue
    • base-button
    • FollowButton from components/Button/FollowButton
    • JoinLeaveButton from components/Button/JoinLeaveButton
    • in style .profile-post-add-button, .action-buttons, .collaps-button
  • pages/groups/index.vue
    • base-button
    • PaginationButtons from components/_new/generic/PaginationButtons/PaginationButtons
    • in style .group-add-button
  • pages/admin/users.vue
    • base-button
    • PaginationButtons from components/_new/generic/PaginationButtons/PaginationButtons
  • pages/index.vue
    • base-button
    • HeaderButton from components/FilterMenu/HeaderButton
  • pages/settings/data-download.vue
    • base-button from components/_new/generic/BaseButton/BaseButton.vue
  • pages/profile/_id/_slug.vue
    • base-button
    • HcFollowButton from components/Button/FollowButton
    • in style .action-buttons
  • pages/post/_id/_slug/index.vue
    • base-button
    • components/ShoutButton.vue
  • pages/map.vue
    • components/Map/MapStylesButtons

mahula avatar Dec 26 '23 15:12 mahula