Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Redesign Templates Library #384

Closed
mauryaratan opened this issue Jun 8, 2020 · 7 comments
Closed

Redesign Templates Library #384

mauryaratan opened this issue Jun 8, 2020 · 7 comments
Assignees
@gvgvgvijayan
Milestone
1.7.0

Comments

@mauryaratan
Copy link
Member

Blocks UI need to be redesigned on an independent page, for now.
It'll live basically along with other Elementor trigger buttons, as of its own.

See mockup.
@gvgvgvijayan gvgvgvijayan self-assigned this Jun 9, 2020
gvgvgvijayan added a commit that referenced this issue Jun 9, 2020
@gvgvgvijayan
#384 created block sub-menu
4eb547d
@JohnPixle
Copy link
Collaborator

This is still in progress, but you can see an interactive Figma design showcasing the progress here:

https://www.figma.com/proto/kOdprBRtF7VB8hzWASXRx9/SK-UI-2?node-id=5%3A1&viewport=-973%2C471%2C0.5&scaling=min-zoom

@gvgvgvijayan
Copy link
Contributor

This is still in progress, but you can see an interactive Figma design showcasing the progress here:

https://www.figma.com/proto/kOdprBRtF7VB8hzWASXRx9/SK-UI-2?node-id=5%3A1&viewport=-973%2C471%2C0.5&scaling=min-zoom

Started and working on this new layout

gvgvgvijayan added a commit that referenced this issue Jun 15, 2020
@gvgvgvijayan
#384 Updated grid cards to look alike native WP UI
5ecff33 
# Please enter the commit message for your changes. Lines starting
# with '#' will be kept; you may remove them yourself if you want to.
# An empty message aborts the commit.
#
# Date:      Mon Jun 15 14:50:40 2020 +0530
#
# On branch 384_redesign_blocks_ui
# Changes to be committed:
#	modified:   client/collection/Collection.js
#
# Untracked files:
#	package-lock.json
#
gvgvgvijayan added a commit that referenced this issue Jun 15, 2020
@gvgvgvijayan
#384 Added Card and it's subcomponent to template collection list
7893318
gvgvgvijayan added a commit that referenced this issue Jun 15, 2020
@gvgvgvijayan
#384 Added new heading and moved the sync button to top, changed the …
693f50c 
…sync button to gutenberg package: button component
gvgvgvijayan added a commit that referenced this issue Jun 16, 2020
@gvgvgvijayan
#384 Updated tab navigation to TabPanel component
370f844
gvgvgvijayan added a commit that referenced this issue Jun 17, 2020
@gvgvgvijayan
#384 Removed style component and moved the css to global/main css file
dee11dc
gvgvgvijayan added a commit that referenced this issue Jun 17, 2020
@gvgvgvijayan
#384 Created 'Style Kit Library' main css file and enqueued it in bot…
eba7c4c 
…h admin end and in elementor editor
gvgvgvijayan added a commit that referenced this issue Jun 17, 2020
@gvgvgvijayan
#384 enclosed tab panel inside span with id to apply & override css
d8f6ac8
gvgvgvijayan added a commit that referenced this issue Jun 17, 2020
@gvgvgvijayan
#384 Added card layout, altered grid to show four cards, removed styl…
d5c74cc 
…ed component css of class pro and added it to main css file
gvgvgvijayan added a commit that referenced this issue Jun 17, 2020
@gvgvgvijayan
#384 Altered to use WP Button component
9d4cd3f
gvgvgvijayan added a commit that referenced this issue Jun 17, 2020
@gvgvgvijayan
#384 Added card component to the style kit, changed buttons to WP But…
5851d9f 
…ton component
gvgvgvijayan added a commit that referenced this issue Jun 17, 2020
@gvgvgvijayan
#384 removed unused component initialization and removed button--plai…
7b385b2 
…n css
gvgvgvijayan added a commit that referenced this issue Jun 17, 2020
@gvgvgvijayan
#384 Updated buttons to WP Button component
98cc90a
gvgvgvijayan added a commit that referenced this issue Jun 17, 2020
@gvgvgvijayan
#384 Removed unused CSS button--plain
ef83e1b
gvgvgvijayan added a commit that referenced this issue Jun 18, 2020
@gvgvgvijayan
#384 Removed font-family in order to use WP common font family implic…
4f75c84 
…itly
gvgvgvijayan added a commit that referenced this issue Jun 18, 2020
@gvgvgvijayan
#384 Removed styled component css for hover overlay and added in comm…
502a707 
…on CSS file. Changed overlay color to white.
gvgvgvijayan added a commit that referenced this issue Jun 18, 2020
@gvgvgvijayan
#384 Added css to display WP component button with black transparent
f2ad7e0
gvgvgvijayan added a commit that referenced this issue Jun 18, 2020
@gvgvgvijayan
#384 Added css for block group card. In block listing page UI turned …
cdce128 
…to WP card layout, buttons are wp component button
gvgvgvijayan added a commit that referenced this issue Jun 18, 2020
@gvgvgvijayan
#384 altered from primary to secondary button to eradicate box shadow…
f009b1a 
… (blue border) during button active state like clicking, right clicking which seems unnatural with black transparent background
gvgvgvijayan added a commit that referenced this issue Jun 19, 2020
@gvgvgvijayan
#384 Added card layout with card divider
62ba490 
# Please enter the commit message for your changes. Lines starting
# with '#' will be kept; you may remove them yourself if you want to.
# An empty message aborts the commit.
#
# Date:      Fri Jun 19 13:45:25 2020 +0530
#
# On branch 384_redesign_blocks_ui
# Changes to be committed:
#	modified:   client/popup.js
#
# Untracked files:
#	package-lock.json
#
gvgvgvijayan added a commit that referenced this issue Jun 19, 2020
@gvgvgvijayan
#384 updated popup button to WP Button component
d491e9d
gvgvgvijayan added a commit that referenced this issue Jun 19, 2020
@gvgvgvijayan
#384 Converted popup to resemble like native WP UI component
7bc9e5b
gvgvgvijayan added a commit that referenced this issue Jun 19, 2020
@gvgvgvijayan
#384 Removed extra padding in cards of template collection and indivi…
b716bde 
…dual template cards
gvgvgvijayan added a commit that referenced this issue Jun 19, 2020
@gvgvgvijayan
#384 Turned all buttons to equal size in cards
009bee6
gvgvgvijayan added a commit that referenced this issue Jun 19, 2020
@gvgvgvijayan
#384 CSS clean-up work
d654107
gvgvgvijayan added a commit that referenced this issue Jun 22, 2020
@gvgvgvijayan
#384 Removed few internal css and added few in main css file, filter …
feb4700 
…controls are now native WP component, add css for altered WP component for alignment
@mauryaratan mauryaratan changed the title Redesign Blocks UI Redesign Templates Library Jun 22, 2020
gvgvgvijayan added a commit that referenced this issue Jun 24, 2020
@gvgvgvijayan
#384 Spacing corrected in template collectio page, stylekit page and …
5eb06b6 
…blocks collection page
gvgvgvijayan added a commit that referenced this issue Jun 25, 2020
@gvgvgvijayan
#384 Button css updated
725499b
gvgvgvijayan added a commit that referenced this issue Jun 25, 2020
@gvgvgvijayan
#384 card footer content font size and color set as in figma
b623525
gvgvgvijayan added a commit that referenced this issue Jun 25, 2020
@gvgvgvijayan
#384 cleaned css and card footer dom structure converted to uniform l…
5bfdf01 
…ayout
gvgvgvijayan added a commit that referenced this issue Jun 25, 2020
@gvgvgvijayan
#384 Modified card footer content structure and added css to display …
bd27c41 
…h3 tag and span left and right
gvgvgvijayan added a commit that referenced this issue Jun 25, 2020
@gvgvgvijayan
#384 adjusted margin bottom unit to adhere with figma provided unit
f0ccd33
gvgvgvijayan added a commit that referenced this issue Jun 25, 2020
@gvgvgvijayan
#384 Implemented equal horizontal spacing between navigation tab, fil…
a794ff7 
…ter controls, announment notice and main card content
gvgvgvijayan added a commit that referenced this issue Jun 25, 2020
@gvgvgvijayan
#384 updated preview page css
82d6052
gvgvgvijayan added a commit that referenced this issue Jun 25, 2020
@gvgvgvijayan
#384 Changed the loader color
6aa74c2
gvgvgvijayan added a commit that referenced this issue Jun 25, 2020
@gvgvgvijayan
#384 Added popup component css
365cb53
gvgvgvijayan added a commit that referenced this issue Jun 25, 2020
@gvgvgvijayan
#384 css cleanup
9b5d839
gvgvgvijayan added a commit that referenced this issue Jun 25, 2020
@gvgvgvijayan
#384 added css for buttons
11647da
gvgvgvijayan added a commit that referenced this issue Jun 29, 2020
@gvgvgvijayan
#384 Modified pro text and border as in new UI changes and renamed th…
4be7059 
…e button as Import Template
gvgvgvijayan added a commit that referenced this issue Jun 29, 2020
@gvgvgvijayan
#384 Border beneath the title removed
384f5b9
gvgvgvijayan added a commit that referenced this issue Jun 29, 2020
@gvgvgvijayan
#384 Removed divider component to avoid double border in the footer, …
e8fc028 
…CardFooter component itself sets border top 1px
gvgvgvijayan added a commit that referenced this issue Jun 29, 2020
@gvgvgvijayan
#384 Removed blue border of the secondary button
00272df
gvgvgvijayan added a commit that referenced this issue Jun 29, 2020
@gvgvgvijayan
#384 Revoked all card fluid width to static width
7018c0a
gvgvgvijayan added a commit that referenced this issue Jun 30, 2020
@gvgvgvijayan
#384 Fixed the stylekit popup css issue
e46e265
gvgvgvijayan added a commit that referenced this issue Jun 30, 2020
@gvgvgvijayan
#384 added css for template collection and template list page
cb0c0d3
@gvgvgvijayan
Copy link
Contributor

@JohnPixle kindly share your thoughts, I completed all changes and deployed it.

gvgvgvijayan added a commit that referenced this issue Jul 9, 2020
@gvgvgvijayan
#384 Added padding for template collection card
851b6a3
gvgvgvijayan added a commit that referenced this issue Jul 9, 2020
@gvgvgvijayan
#384 In template kit collection, modified card container css similar …
1dd2544 
…to WP admin theme grid listing css
gvgvgvijayan added a commit that referenced this issue Jul 9, 2020
@gvgvgvijayan
#384 In template kit list, modified card container css similar to WP …
e5daa92 
…admin theme grid listing css
gvgvgvijayan added a commit that referenced this issue Jul 10, 2020
@gvgvgvijayan
#384 In style kits list, modified card container css similar to WP ad…
77736f4 
…min theme grid listing css
@gvgvgvijayan
Copy link
Contributor

@JohnPixle kindly share your thoughts. Completed spacing adjustments for the grids.

@mauryaratan mauryaratan added this to the 1.7.0 milestone Jul 13, 2020
@JohnPixle
Copy link
Collaborator

Just to post here too, that the UI is fine so far. Apart from a minor positioning tweak that VJ is going through now, we can include it in the next release.

@gvgvgvijayan
Copy link
Contributor

gvgvgvijayan commented Jul 30, 2020 •
edited
Loading

Test Case:

  1. For new change position of the dropdown control in the second row to the right of the first row in the template list, makes sure this affects only when the user clicks the "view templates" button of the template group instead of all template list which is visible when "Group by Template kit" switch is off.
  2. For new change position of the dropdown control in the second row to the right of the first row in the block list, makes sure this affects only when the user clicks the individual block group card of the block group grid instead of all block list which is visible when "Group by Block type" switch is off.

@gvgvgvijayan
Copy link
Contributor

@JohnPixle did the changes of controls in a single row instead of two rows in template and block group list.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@gvgvgvijayan gvgvgvijayan

Labels
None yet
Projects
None yet
Milestone
1.7.0
Development

No branches or pull requests
3 participants
@mauryaratan @JohnPixle @gvgvgvijayan