Update sketch list styling #819

LakshSingla · 2019-02-02T13:00:41Z

I have verified that this pull request:

has no linting errors (npm run lint)
is from a uniquely-named feature branch and has been rebased on top of the latest master. (If I was asked to make more changes, I have made sure to rebase onto master then too)
is descriptively named and links to an issue number, i.e. Fixes #390

@catarak I have created a layout for the dropdown menu item along with the logic for displaying the menu item from the Zeplin specs. It would be great if you could confirm the layout and styling (for white theme) 😄 . After that, I will add functionality to individual buttons.

Here are my concerns / doubts :

There is no highlighting for specific menu item as there is in My Account button. Should I add it ?
What colors to use in highlighting ? I have currently hardcoded hex codes as in Zeplin doc, but I guess it has to be according to theme and hence which color correspond to which theme variable. Also what about those which are not included in any theme variable. Should I create any new variable ?

hellonearthis · 2019-02-02T13:09:09Z

Highlighting could be done using bold text?

LakshSingla · 2019-02-02T15:58:31Z

@hellonearthis I used bold text 😅. Didn't realise it was highlighting. I will make updates in the next commit if required.
Reference lines for others: L103 and L125

catarak · 2019-02-20T17:05:41Z

this is looking great! i'd take a closer look at the zeplin screen for some alignment/color issues:

there's more padding to the right of the triangle
the color is too light
it should be visible all of the time, not only on hover
the dropdown appears off center, too far down and too the left of the triangle icon

which highlighting do you mean? when you hover over the dropdown? i would follow the same color/highlight pattern as the navigation dropdowns.

LakshSingla · 2019-02-20T21:38:08Z

@catarak I would address these details at the earliest. In the beginning I did not realize that you can view CSS styles in the Zeplin itself 😅
What about themifying? There is no screen(as far as I recall) corresponding to the UI in other color schemes. Would it be the same as for white ?
Also for point 2 in your comment above, by color you meant the color of the dropdown rectangle right ? 🤔
I would also look over integrating it with the back end and let you know my concerns.

catarak · 2019-02-21T20:32:25Z

re: themes: there's no screens for the different themes for this view, but do you best to match the colors from the other theme screens and the themes as they exist in client/styles/abstracts/_variables.scss
and yes, for my point 2 above, i mean the color of the dropdown triangle on the right

LakshSingla · 2019-02-22T19:03:49Z

@catarak I have made the necessary changes (except themification) but I am facing some issues with package-lock.json post upgrading my node version. I had to delete it and reinstall node_modules. It may conflict with the current version of package-lock. I have currently commited without package-lock and would update it in the future commits after resolving my local issue.

meiamsome · 2019-02-22T19:10:30Z

@LakshSingla Just so you're aware, it looks like you committed the deletion of the package-lock.json you mention, rather than just not committing the changes to that file. I highly suggest you modify the previous commit to remove that change rather than commiting your package-lock.

LakshSingla · 2019-02-22T20:24:28Z

@meiamsome I have included the changed package-lock.json while updating my branch with the current master.
@catarak, @meiamsome I have updated the sketch list styling trying my best to incorporate the points above. I have also themifyed the dropdown menu taking references from the Nav. It would be helpful if you can provide your suggestions :). I will make the changes (if any) tomorrow and start integrating it with the backend.

catarak · 2019-02-22T22:52:02Z

thanks for making the changes, it is looking better! a few things i noticed:

the right arrow is slightly off center, vertically, and needs to be moved up a little:

- when you've opened the dropdown, and you click outside of it, still on the sketch list, the whole overlay closes. it should just close the dropdown and the sketch list should still be open. - when you hover over the last item in the list, there's a blank space at the bottom:

- the dark and high contrast themes have a double border between the title of the dropdown and the items, it should change the color of the dashed border:

catarak · 2019-02-22T22:53:02Z

last thing, the dropdown also needs a shadow, like in the nav:

LakshSingla · 2019-02-23T08:24:28Z

@catarak I am making the desired changes. However a few small things :

In the design screen (in Zeplin) there is some space at the bottom of the dropdown. (I will remove this space, as pointed out, in my next commit. Even still, please take a look at the screens to see if that space is required back).
Due to the design of the SVG I will have to manually adjust a few pixels here and there to center it. I am unable to find some way that would automatically position in the center. (The div containing it is in the center though)
For this following point that you have raised, I am not facing any such issue. Can you please tell the operating system and browser that you are using 🤔
I am using Ubuntu 18.04 and Firefox Quantum( as the test browser). I will do some testing on Chrome today as well.

when you've opened the dropdown, and you click outside of it, still on the sketch list, the whole overlay closes. it should just close the dropdown and the sketch list should still be open.

LakshSingla · 2019-02-23T13:29:19Z

@catarak I have added Delete, Share, Duplicate and Download functionality in to the new design modal

For Rename, should SET_PROJECT_NAME action should suffice ? I am confused as it only makes change in the client's side. It is not making any server side calls in the action creator. Also, there should be a new modal (to be created) corresponding to the rename dialog box right ?

LakshSingla · 2019-02-23T19:57:16Z

@catarak Update on overlay closing issue when we click outside :- In Google Chrome too, it is working as intended, i.e. shows the behavior as shown in the GIF commented above. (Chrome Version 71.0.3578.98).

LakshSingla · 2019-02-26T21:50:37Z

@catarak Should I go ahead and start creating a modal for renaming of the project name (only that functionality is left in the modal) or is there another UI you have in mind. Also is the issue that SketchList overlay is automatically closing when clicking outside the dropdown but still on SketchList still recurring in your browser ? 🤔

catarak · 2019-02-26T22:30:04Z

@LakshSingla when updating a sketch name from this overlay, it should update server side. the action you need might not exist!

also, when editing a sketch name, i would follow the same UI/UX as when editing a project name when it's open—it should create an inline <input> element, that when you hit enter or click outside of it, it updates it.

catarak · 2019-02-26T22:43:15Z

also, i think what's happening is that when you open the dropdown, and you click outside, it's opening a specific sketch, so it appears that it's closing the overlay, but really it's opening a sketch. kind of a confusing UX bug. i think a solution is changing how you open a sketch from the list—would need to do a little bit a research to figure out the right UX here!

LakshSingla · 2019-02-27T06:03:34Z

also, i think what's happening is that when you open the dropdown, and you click outside, it's opening a specific sketch, so it appears that it's closing the overlay, but really it's opening a sketch. kind of a confusing UX bug. i think a solution is changing how you open a sketch from the list—would need to do a little bit a research to figure out the right UX here!

Ohh I haven't thought of that case. My bad 😯. In most of the desktop environments, if a dropdown is open (say for example on right clicking the desktop), then any click made to the desktop is not processed, but the dropdown closes. That approach is intuitive, IMO.
So for opening a sketch of the sketchlist :

If any dropdown is not open: Open the sketch
If any dropdown is open: Close the dropdown

Please suggest if you need any other type of UX 😄 . (I am not sure how such cases are handled in Macs)

I will make the said changes. Also by the action did you mean a Redux action, or server side endpoint ? (I will dig into it a little further and let you know how I will proceed)

LakshSingla · 2019-02-27T14:20:28Z

@catarak I have updated the UX accordingly. Could you please check it and lemme know what you think of it :). Also, hopefully the bug that you stated is also fixed.

UPDATE: On the rename task, here is what all I found:

There is an updateProject controller which can be used to update the name of the project.
There is a SET_PROJECT_NAME action name, but no action creator corresponding to it has been created. Maybe I should use this one.UPDATE(NEW): This SET_PROJECT_NAME is to be used for handling changes to name of current project, not all projects.

LakshSingla · 2019-02-27T21:36:19Z

@catarak I have created the UI/UX for renaming of the project. I will write reducers and actions later. Please play around and lemme know your opinions, and suggestions (if any) I need to implement.

catarak · 2019-03-01T21:18:07Z

this is looking so great! i think it's a little awkward when you click on the "share" dropdown, it appears over the sketch list, and then when you click its "X", both overlays close. i'm not sure what the right UX here though, and i think some research is necessary.

catarak · 2019-03-01T21:19:45Z

and i think you'll need to use the saveProject action—i recently updated it so you can pass in a project rather than just pulling from the redux store.

LakshSingla · 2019-03-02T12:15:44Z

@catarak According to me, saveProject action only works on the current project, with renaming, we need the functionality to change the name of any project.

I am making some changes to the updateProject in the projects.controller.js. Currently, the controller only works if we pass some files in the request body, which would not be possible if we wish to just update the name of the project. More precisely, I am changing this:
if (updatedProject.files.length !== req.body.files.length)
to this:
if (req.body.files && updatedProject.files.length !== req.body.files.length)
and adding an action for renaming the project.

Lemme know if I should do this by some other way or not.
In the meantime, I will investigate the Modal Issue.

UPDATE: I am unable to find the cause why the SketchList is closing when Share modal is closed

LakshSingla · 2019-03-02T13:33:26Z

@catarak This feature is almost complete from my side 🎉 🎉
Following are somethings that I want to mention:

The module thing that you mentioned is not related to this pull, it seems to be a general behavior of closing all overlays if one seems to be present on top of other, and I feel should be addressed in a separate issue. If you also think so, lemme know, I will open another issue and start working on it. ( Otherwise, I would include that in the same issue)
Please take a look at my last commit and the changes I made, especially to the server file, and the new action I created. If you are unsatisfied with the method I employed, lemme know any other you want me to follow. The saveProject action, I think requires the whole project to change just the name, which I feel would be unnecessary.
Your thoughts on this ..?

LakshSingla · 2019-03-03T17:59:49Z

@catarak Here are some further issues which can be spin-off from this PR (apart from implementing the search bar, and sorting of sketches):

Add the rename functionality to the File header (as are the other options present).
Investigate the behavior of modals when one overlays the other. (i.e. closing of both when only one is closed)

LakshSingla · 2019-03-04T19:19:19Z

@catarak I have brought my branch upto date with the current master. 😄

LakshSingla · 2019-03-08T22:13:35Z

@catarak Any further updates? Did you review the changes I made? 😅

LakshSingla · 2019-03-20T17:40:34Z

@jonathan-s Thanks a lot for the review, I appreciate it. I missed these lines while cleaning up my code. I will take another look at my code, to check if I have missed some other things like these. 😄
UPDATE: I have made the necessary changes required.

catarak · 2019-03-21T20:32:16Z

this is looking good. you've left in a few commented out changes, and it would be great if you took those out.

LakshSingla · 2019-03-22T07:40:56Z

@catarak I have tried to remove all the commented out changes. Please let me know if there is any specific line which you want me to clean, or which I might have missed 😄. I have also updated the branch to the latest version of master

jonathan-s · 2019-03-22T07:49:49Z

client/styles/components/_sketch-list.scss

+        fill: getThemifyVariable('nav-hover-color');
+      }
+    }
+  }*/


Perhaps this commented code can be removed?

jonathan-s · 2019-03-22T07:50:05Z

client/styles/components/_sketch-list.scss

+  @include themify(){
+    border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
+  }
+  // color: #ffffff; 


This code here is also commented.

Thanks again :)

LakshSingla · 2019-03-26T13:21:08Z

Any further updates, or corrections which I may have missed ?

catarak · 2019-03-26T19:00:53Z

hi @LakshSingla! sorry for the delay on this. there's been a ton of activity in this repository and i'm trying to get through it all.

LakshSingla · 2019-03-26T19:10:46Z

@catarak No problem at all! I felt that something more had to be done on my part, which I forgot to address.

LakshSingla · 2019-04-13T17:53:34Z

@catarak Did you get a chance to review this ?

catarak · 2019-04-17T18:58:30Z

sorry for the slowness on this, hang tight!

LakshSingla · 2019-05-09T15:07:06Z

@catarak Any updates? It has been around 1.5 months since my last commit was reviewed 😅 .

author Laksh Singla <lakshsingla@gmail.com> 1549106083 +0530 committer Cassie Tarakajian <ctarakajian@gmail.com> 1560540243 -0400 parent b3c3efc author Laksh Singla <lakshsingla@gmail.com> 1549106083 +0530 committer Cassie Tarakajian <ctarakajian@gmail.com> 1560540198 -0400 parent b3c3efc author Laksh Singla <lakshsingla@gmail.com> 1549106083 +0530 committer Cassie Tarakajian <ctarakajian@gmail.com> 1560539667 -0400 Created initial html structure and styling for new SketchList design Final styling of ActionDialogueBox commplete Dropdown menu disappearing while clicking anywhere on the table Fixed linting issues and renamed variables Minor tweaks in the SketchList dropdown dialogue UI Themifyed the dropdown Made changes in the dropdown: Arrow positioned slightly updwards, Removed blank space and added box-shadow in dropdown, themifyed dropdowns dashed border color Added Delete and Share functionality to Dialog box Added Duplicate functionality to Dialog box Added download functionality to Dialog box SketchList does not open a sketch if dialogue box is opened SketchList Rename initial UI completed Enter key handled for rename project option [WIP] Updating rename functionality Download option now working for all the sketches Duplicate functionality extended for non opened sketches too Modified overlay behaviour to close only the last overlay Share modal can now display different projects Dropdown closes when Share and Delete are closing for a more natural UX fix broken files from rebasing Created initial html structure and styling for new SketchList design Final styling of ActionDialogueBox commplete Added Delete and Share functionality to Dialog box Added Duplicate functionality to Dialog box [WIP] Updating rename functionality Duplicate functionality extended for non opened sketches too Modified overlay behaviour to close only the last overlay Share modal can now display different projects Final styling of ActionDialogueBox commplete Fixed linting issues and renamed variables Minor tweaks in the SketchList dropdown dialogue UI Themifyed the dropdown Added Delete and Share functionality to Dialog box [WIP] Updating rename functionality Modified overlay behaviour to close only the last overlay Share modal can now display different projects Dropdown closes when Share and Delete are closing for a more natural UX fix broken files from rebasing Final styling of ActionDialogueBox commplete Minor tweaks in the SketchList dropdown dialogue UI Themifyed the dropdown [WIP] Updating rename functionality Duplicate functionality extended for non opened sketches too Modified overlay behaviour to close only the last overlay Share modal can now display different projects Dropdown closes when Share and Delete are closing for a more natural UX

…sed css

…nor updates ot icon sizing

catarak · 2019-06-19T20:21:17Z

i think this is ready to merge! i didn't know what to do about the share modal flow (i still don't think it's great to layer it on top of the list modal), so i decided to just comment out that option for now, for the sake of getting this merged in. thanks for your work on this @LakshSingla!

LakshSingla · 2019-06-20T01:36:42Z

@catarak In case you finalize another share modal flow, I tag me in the issue / PR too. I will try to work on that issue 😄

* parent b3c3efc author Laksh Singla <lakshsingla@gmail.com> 1549106083 +0530 committer Cassie Tarakajian <ctarakajian@gmail.com> 1560540243 -0400 parent b3c3efc author Laksh Singla <lakshsingla@gmail.com> 1549106083 +0530 committer Cassie Tarakajian <ctarakajian@gmail.com> 1560540198 -0400 parent b3c3efc author Laksh Singla <lakshsingla@gmail.com> 1549106083 +0530 committer Cassie Tarakajian <ctarakajian@gmail.com> 1560539667 -0400 Created initial html structure and styling for new SketchList design Final styling of ActionDialogueBox commplete Dropdown menu disappearing while clicking anywhere on the table Fixed linting issues and renamed variables Minor tweaks in the SketchList dropdown dialogue UI Themifyed the dropdown Made changes in the dropdown: Arrow positioned slightly updwards, Removed blank space and added box-shadow in dropdown, themifyed dropdowns dashed border color Added Delete and Share functionality to Dialog box Added Duplicate functionality to Dialog box Added download functionality to Dialog box SketchList does not open a sketch if dialogue box is opened SketchList Rename initial UI completed Enter key handled for rename project option [WIP] Updating rename functionality Download option now working for all the sketches Duplicate functionality extended for non opened sketches too Modified overlay behaviour to close only the last overlay Share modal can now display different projects Dropdown closes when Share and Delete are closing for a more natural UX fix broken files from rebasing Created initial html structure and styling for new SketchList design Final styling of ActionDialogueBox commplete Added Delete and Share functionality to Dialog box Added Duplicate functionality to Dialog box [WIP] Updating rename functionality Duplicate functionality extended for non opened sketches too Modified overlay behaviour to close only the last overlay Share modal can now display different projects Final styling of ActionDialogueBox commplete Fixed linting issues and renamed variables Minor tweaks in the SketchList dropdown dialogue UI Themifyed the dropdown Added Delete and Share functionality to Dialog box [WIP] Updating rename functionality Modified overlay behaviour to close only the last overlay Share modal can now display different projects Dropdown closes when Share and Delete are closing for a more natural UX fix broken files from rebasing Final styling of ActionDialogueBox commplete Minor tweaks in the SketchList dropdown dialogue UI Themifyed the dropdown [WIP] Updating rename functionality Duplicate functionality extended for non opened sketches too Modified overlay behaviour to close only the last overlay Share modal can now display different projects Dropdown closes when Share and Delete are closing for a more natural UX * fix bugs in merge commit * move sketch list dialogue to ul/li * update sketch option dropdown to use dropdown placeholder, remove unused css * major refactor of sketchlist component, fix showShareModal action, minor updates ot icon sizing * fix broken links on asset list * remove unused image, fix options for different users in sketch list

LakshSingla force-pushed the feature/sketch-list branch from e9d06f6 to fc9c543 Compare March 2, 2019 13:27

LakshSingla changed the title ~~[WIP] Update sketch list styling~~ Update sketch list styling Mar 2, 2019

LakshSingla force-pushed the feature/sketch-list branch from fc9c543 to 2fdcafd Compare March 3, 2019 06:59

LakshSingla mentioned this pull request Mar 3, 2019

Update Sketch List styling #390

Closed

LakshSingla force-pushed the feature/sketch-list branch 2 times, most recently from 9dac841 to 7174ce5 Compare March 20, 2019 19:36

LakshSingla force-pushed the feature/sketch-list branch from ec51c13 to 17312a9 Compare March 22, 2019 07:30

jonathan-s reviewed Mar 22, 2019

View reviewed changes

LakshSingla force-pushed the feature/sketch-list branch from 1fb2f63 to 1012a51 Compare March 22, 2019 09:29

LakshSingla and others added 2 commits June 14, 2019 15:31

fix bugs in merge commit

22ee762

catarak force-pushed the feature/sketch-list branch from a1f1e7f to 22ee762 Compare June 14, 2019 19:32

catarak added 6 commits June 18, 2019 16:56

Merge branch 'master' into feature/sketch-list

beb116d

move sketch list dialogue to ul/li

0d65e1a

update sketch option dropdown to use dropdown placeholder, remove unu…

b107221

…sed css

major refactor of sketchlist component, fix showShareModal action, mi…

2f0ba88

…nor updates ot icon sizing

fix broken links on asset list

7c22139

remove unused image, fix options for different users in sketch list

4a8d8c2

catarak merged commit 735adcf into processing:master Jun 19, 2019

LakshSingla deleted the feature/sketch-list branch August 27, 2023 11:08

Uh oh!

Update sketch list styling #819

Update sketch list styling #819

Uh oh!

Conversation

LakshSingla commented Feb 2, 2019

Uh oh!

hellonearthis commented Feb 2, 2019

Uh oh!

LakshSingla commented Feb 2, 2019

Uh oh!

catarak commented Feb 20, 2019

Uh oh!

LakshSingla commented Feb 20, 2019

Uh oh!

catarak commented Feb 21, 2019

Uh oh!

LakshSingla commented Feb 22, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

meiamsome commented Feb 22, 2019

Uh oh!

LakshSingla commented Feb 22, 2019

Uh oh!

catarak commented Feb 22, 2019

Uh oh!

catarak commented Feb 22, 2019

Uh oh!

LakshSingla commented Feb 23, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LakshSingla commented Feb 23, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LakshSingla commented Feb 23, 2019

Uh oh!

LakshSingla commented Feb 26, 2019

Uh oh!

catarak commented Feb 26, 2019

Uh oh!

catarak commented Feb 26, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LakshSingla commented Feb 27, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LakshSingla commented Feb 27, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LakshSingla commented Feb 27, 2019

Uh oh!

catarak commented Mar 1, 2019

Uh oh!

catarak commented Mar 1, 2019

Uh oh!

LakshSingla commented Mar 2, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LakshSingla commented Mar 2, 2019

Uh oh!

LakshSingla commented Mar 3, 2019

Uh oh!

LakshSingla commented Mar 4, 2019

Uh oh!

LakshSingla commented Mar 8, 2019

Uh oh!

LakshSingla commented Mar 20, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

catarak commented Mar 21, 2019

Uh oh!

LakshSingla commented Mar 22, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jonathan-s Mar 22, 2019

Choose a reason for hiding this comment

Uh oh!

LakshSingla Mar 22, 2019

Choose a reason for hiding this comment

Uh oh!

LakshSingla commented Feb 22, 2019 •

edited

Loading

LakshSingla commented Feb 23, 2019 •

edited

Loading

LakshSingla commented Feb 23, 2019 •

edited

Loading

catarak commented Feb 26, 2019 •

edited

Loading

LakshSingla commented Feb 27, 2019 •

edited

Loading

LakshSingla commented Feb 27, 2019 •

edited

Loading

LakshSingla commented Mar 2, 2019 •

edited

Loading

LakshSingla commented Mar 20, 2019 •

edited

Loading

LakshSingla commented Mar 22, 2019 •

edited

Loading

LakshSingla commented May 9, 2019 •

edited

Loading

LakshSingla commented Jun 20, 2019 •

edited

Loading