Skip to content

Symbol selector #78

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
Merged
merged 11 commits into from
Nov 17, 2017
Merged

Symbol selector #78

merged 11 commits into from
Nov 17, 2017

Conversation

bpostlethwaite
Copy link
Member

@bpostlethwaite bpostlethwaite commented Nov 15, 2017 •
edited
Loading

Annotation of important pieces of code will arrive in a day or so

@bpostlethwaite
fix for TraceSelector
f51c8bb 
TraceSelector was not updated when we moved to the container system.
Tests!
@bpostlethwaite
create a more reasonable scss system
fa5dcc5 
A variables main file defines the customizable variables in the
editor. This is only partially complete. Better standardization and
coverage is required. Use a default vars file to assign plotly
defaults to the customizable variables.
@bpostlethwaite
rename SubPanel -> MenuPanel and split MenuPanel
4b6f652 
The underlying modal is useful to other dropdown like components so
that has been split into something called ModalBox
@bpostlethwaite
delete all the unused constants
e573f95
@bpostlethwaite
small fixes for props and truthy checks in components
8afad28
@bpostlethwaite
introduce SymbolSelector
d022316
@bpostlethwaite bpostlethwaite mentioned this pull request Nov 15, 2017
Closed
@bpostlethwaite
Copy link
Member Author

@alexcjohnson This PR introduces the SymbolSelector and also a layer of abstraction in our SCSS so users can more easily customize it.

The concept for Editor+SCSS is to locate all configurable variables in a variables/_main.scss file. These variables are used throughout the SCSS src. All a user needs to do is edit variables/_main.scss to change the styling Editor.

I have created a variables/_defaults.scss that contains the Plotly brand styling. variables/_main.scss currently pulls all of its values from variables/_defaults.scss.

The type of styles that are exposed in variables/_main.scss is not consistent nor is it thorough. But at least we have something to start building off of.

@bpostlethwaite
Copy link
Member Author

bpostlethwaite commented Nov 16, 2017 •
edited
Loading

Oh and this PR takes care of SubPanel. It has been split into two components.
MenuPanel a component that presents an icon that when toggled shows a ModalBox. This is exposed in the API.
ModalBox a dumb rectangular panel that has a high z-index and appears in the right place. This isn't exposed but it is useful to SymbolSelector so I split out to make the dependency explicit.

alexcjohnson
alexcjohnson reviewed Nov 16, 2017
View reviewed changes
src/styles/components/containers/_fold.scss
font-size: 13px;
line-height: 13px;
font-size: $font-size;
line-height: $font-size;
border: 1px solid #a2b1c6;
background-color: #a2b1c6;
height: 15px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if line-height gets abstracted to a var, presumably height should too? I see this a bunch of places below too.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Absolutely. Only the rudiments of a framework are in place. Some components have no variable coverage. It'll be part of a theming campaign at some point

alexcjohnson
alexcjohnson reviewed Nov 17, 2017
View reviewed changes
src/lib/constants.js Outdated
@@ -22,3 +22,400 @@ export const multiValueText = {
"Common Case: An 'All' tab might display this message " +
'because the X and Y tabs contain different settings.',
};

export const SYMBOLS = [
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oy, I know this is what we are doing in WS2 but I'd really love us to be able to build this off plotly.js rather than hard coding it in. Wishlist item I guess...

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure what do I need to do?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess this exact array could be generated by running the functions in https://github.com/plotly/plotly.js/blob/master/src/components/drawing/symbol_defs.js
then filling in 3d and gl flags by looking at https://github.com/plotly/plotly.js/blob/master/src/constants/gl3d_markers.js and https://github.com/plotly/plotly.js/blob/master/src/constants/gl2d_markers.js
then spitting the result out as text.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay I'll link this comment to an issue and we'll tackle it before full release

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#88

@alexcjohnson
Copy link
Collaborator

your call if you want to build SYMBOLS in this PR or later. No more comments from my side, 💃

@bpostlethwaite bpostlethwaite mentioned this pull request Nov 17, 2017
Open
@bpostlethwaite bpostlethwaite merged commit fa29c2d into multiAxes Nov 17, 2017
@bpostlethwaite bpostlethwaite deleted the SymbolSelector branch November 17, 2017 14:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@alexcjohnson alexcjohnson alexcjohnson left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@bpostlethwaite @alexcjohnson