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

Styling changes #4019

Merged
merged 3 commits into from
Jul 31, 2019
Merged

Styling changes #4019

merged 3 commits into from
Jul 31, 2019

Conversation

ranbena
Copy link
Contributor

@ranbena ranbena commented Jul 30, 2019 •
edited
Loading

  • Feature

Description

ezgif com-video-to-gif

Added:

  1. Transitioning bg color when dragging.
  2. Box shadow to dragged element.
  3. A few minor styling changes.

@ranbena ranbena requested a review from gabrieldutra July 30, 2019 17:44
@ranbena ranbena self-assigned this Jul 30, 2019
ranbena
ranbena commented Jul 30, 2019
View reviewed changes
client/app/components/Parameters.less Outdated
}

// dragged element
body > & {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

No other hook 😅

Copy link
Member

Choose a reason for hiding this comment

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

It is possible to use helperContainer attr to append it somewhere else than the body, but I don't think it's worth it :)

Copy link
Member

@gabrieldutra gabrieldutra Jul 30, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

I wonder if helperClass is targeted on that element, I'll check that and edit this comment with my conclusion.

Edit: yes, helperClass targets on the dragged element, if prefer to use it instead of a body hook ^^

Copy link
Contributor Author

Choose a reason for hiding this comment

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

aaad44e

gabrieldutra
gabrieldutra reviewed Jul 30, 2019
View reviewed changes
Copy link
Member

@gabrieldutra gabrieldutra left a comment

Choose a reason for hiding this comment

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

Nice @ranbena, thanks! :)

One last thing to be discussed: How should we handle long parameter titles (longer than the parameter width actually)?

Currently it just grows:
image

One option is to use ellipsis on the overflow, but small inputs would be limited to small titles.

I think it's not a blocker for the migration as this is the same behavior we currently have, it's more in case you have a quick idea that can be applied.

client/app/components/Parameters.less Outdated
&[data-draggable] {
padding: 0 4px 4px 0;
transition: background-color 200ms ease-out;
transition-delay: 500ms; // short pause before returning to original bgcolor
Copy link
Member

Choose a reason for hiding this comment

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

May be because I was focused on the background changing, but 500ms made me feel it was a bit laggy 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

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

You're right. Decreased fc54399

client/app/components/Parameters.less
}

&.parameter-dragged {
box-shadow: 0 4px 9px -3px rgba(102, 136, 153, 0.15);
Copy link
Member

@gabrieldutra gabrieldutra Jul 30, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

A slight and cool detail when it's over the drag background 😁

@ranbena
Copy link
Contributor Author

ranbena commented Jul 31, 2019

One last thing to be discussed: How should we handle long parameter titles (longer than the parameter width actually)?

I'm gonna reply to this in your PR.

@ranbena ranbena merged commit 0c0bf6e into getredash:react-parameters Jul 31, 2019
@ranbena ranbena deleted the react-parameters branch July 31, 2019 05:09
arikfr pushed a commit that referenced this pull request Aug 18, 2019
@gabrieldutra @arikfr
Migrate Parameters component to React (#4006)
a1f11cb 
* Start Parameters Migration

* Add dirtyCount

* Use workaround with setState

* Apply Changes

* Add EditSettingsDialog

* Add Cmd/Ctrl + Enter behavior

* Remove isApplying

* Delete Angular version of parameters

* Update tests

* Remove angular stuff

* Update jest

* Drag placeholder

* Update events

* Use old button styling and move css

* Reviewing code

* Add parameter rearrange test

* Add Parameter Settings title change test

* Update Parameter Settings button styling

* Move parameter url logic back to Parameters

* Disable url update when query is new

* Styling changes (#4019)

* Ran's title width styling

* Update drag test

* Improve sizing for Number inputs

Co-Authored-By: Ran Byron <ranbena@gmail.com>

* Fix issue with dragged parameter wrapping

Co-Authored-By: Ran Byron <ranbena@gmail.com>

* Don't reevaluate dirtyParamCount

* Allow multiple values :)

* Fix parameter alignments

* Fix Select width on search

* Update client/app/components/Parameters.less

Co-Authored-By: Ran Byron <ranbena@gmail.com>

* Humanize param.name

* Make sure angular updates Execute disabled status
@weekly-digest weekly-digest bot mentioned this pull request Aug 19, 2019
Closed
arikfr added a commit that referenced this pull request Sep 18, 2019
@arikfr
Update v8 branch to v8-beta.2 (#4149)
7ac6058 
* Migrate Parameters component to React (#4006)

* Start Parameters Migration

* Add dirtyCount

* Use workaround with setState

* Apply Changes

* Add EditSettingsDialog

* Add Cmd/Ctrl + Enter behavior

* Remove isApplying

* Delete Angular version of parameters

* Update tests

* Remove angular stuff

* Update jest

* Drag placeholder

* Update events

* Use old button styling and move css

* Reviewing code

* Add parameter rearrange test

* Add Parameter Settings title change test

* Update Parameter Settings button styling

* Move parameter url logic back to Parameters

* Disable url update when query is new

* Styling changes (#4019)

* Ran's title width styling

* Update drag test

* Improve sizing for Number inputs

Co-Authored-By: Ran Byron <ranbena@gmail.com>

* Fix issue with dragged parameter wrapping

Co-Authored-By: Ran Byron <ranbena@gmail.com>

* Don't reevaluate dirtyParamCount

* Allow multiple values :)

* Fix parameter alignments

* Fix Select width on search

* Update client/app/components/Parameters.less

Co-Authored-By: Ran Byron <ranbena@gmail.com>

* Humanize param.name

* Make sure angular updates Execute disabled status

* Add more flake8 tests and fail build if any test fails (#4055)

* Add more flake8 tests and fail build if any test fails

Run all flake8 E9xx + F63x + F7xx + F82x tests.

* long = long in Python 2

* Fix: MySQL connections without SSL are failing (#4090)

* Move connection logic into a single method & make sure not to pass ssl value if not used.

* Remove wildcard import and format file.

* Removed redash-newstyle.less (#4017)

* Make sure we always pass a list to _get_column_lists (#4095)

(some data sources might return None as the columns list)

* [Data Sources] Add: Azure Data Explorer (Kusto) query runner (#4091)

* [Data Sources] Add: Azure Data Explorer (Kusto) query runner

* CodeClimate fixes

* Remove TODO

* Fixed configuration properties names for Azure Kusto

* Azure Kusto: get_schema in one query

* azure-kusto-data update to 0.0.32

* Add Kusto to the default query runners list

* [Qubole] - Adding support to process Quantum query types. (#4066)

* [Qubole] - Adding support to process Quantum query types.

Quantum is a serverless interactive service that offers
direct SQL access to user's data lake. Changes are made
to accept `quantum` query type from user which makes
`Cluster Label` as optional.

* -Making quantum as defult query.
-Dictionary safe access to connection parmeters

* keeping pep8 standards

* Maintainig pep8 std

* Use latest version of qds-sdk

* Use qds-sdk v1.13.0

* Use qds-sdk v1.12.0

* Use qds-sdk v1.13.0

* Updating SDK with verified version

* hive as default query type

* qds-sdk : Locking most recent release version

* qds-sdk : Locking recent release version

* falling back to original version of qds-sdk

* Dashboard: when updating parameters, run only relevant queries (#3804)

* refresh only affected queries in dashboard when parameters are changed

* rename pendingParameters to updatedParameters

* select which widgets to update according to their mapping as a dashboard-level parameter

* use lodash's include

* Migrate with SQL statements. (#4105)

* Update badge in README.md to link to CircleCI (#4104)

* Update README.md

* Update README.md

* Update README.md

Co-Authored-By: Ran Byron <ranbena@gmail.com>

* Update README.md

* Fix widget bottom element alignment (#4110)

* Fix: allow users with view only acces to use the queries in Query Results (#4112)

* Fix: allow users with view only acces to access the queries

* Add tests

* Update error message

* Update error message. Take 2

* Fix Dropdown parameter options appearing behind Dialog (#4109)

* Add ability to use Ant's Table loading property when using ItemsTable (#4117)

* Display data source icon in query editor (#4119)

* Move annotation logic into Query Runner (#4113)

* Code formatting

* Move annotation logic into query runner, so it can be overriden in the query runner.

* Add mixin to __all__

* Switch to flag instead of mixin

* Feature (Redshift): option to set query group for adhoc/scheduled queries  (#4114)

* Add scheduled status to query job metadata.

* Add: option to set query group for adhoc/scheduled Redshift queries

* Scheduled might not be set for already enqueued queries.

* Fix number param value normlization (#4116)

* Use ng-src for data source icons (#4123)

* hive_ds: show a user friendly error message when possible (#4121)

* Update botocore, to get pass pip warning (#4122)

* Widget table scroll-x visible (#4101)

* Table viz horizontal scroll made visible

* Added tests

* Fixed snapshot pre-condition

* Perhaps this would trigger percy

* Upgrade Sentry-SDK and enable additional integratoins (#4127)

* Update sentry-sdk version

* Add additional Sentry integrations

* Migrate Counter visualization to React (#4106)

* Migrate Counter to React: Renderer

* Migrate Counter to React: Editor

* Cleanup

* Review and fix rows indexing algorithm

* Counter not properly scaled in editor

* Fix wrong label for/input id pair

* Tests

* Tests

* Fix vendor prefixes

* Remove unnecessary useEffect dependencies

* Update tests

* Fix Percy snapshot names

* Sync botocor eversions across requirements files. (#4128)

* Decrease size of widget pagination (#4120)

* Added tests

* Perhaps this would trigger percy

* Decrease size of widget pagination

* Removed unused attr

* Updated tests

* Allow the user to decide how to handle null values in charts (#4071)

* #2629 Refactor Chart visualization, add option for handling NULL values (keep/convert to 0.0)

* Handle null values in line/area stacking code; some cleanup

* Handle edge case: line/area stacking when last value of one of series is missing

* Mjnor update to line/area stacking code

* Fix line/area normalize to percents feature

* Unit tests

* Refine tests; add tests for prepareLayout function

* Tests for prepareData (heatmap) function

* Tests for prepareData (pie) function

* Tests for prepareData (bar, line, area) function

* Tests for prepareData (scatter, bubble) function

* Tests for prepareData (box) function

* Remove unused file

* Alerts: Add more condition comparison options (#4134)

* #4132 Add more condition comparison options

* Add arguments to fallback lambda

* Remove duplicate messages method (#4131)

* Migrate Chart visualization to React Part 1: Renderer (#4130)

* Migrate Chart visualization: Renderer

* Refine PlotlyChart component; move stylesheets to visualization's folder

* Migrate Custom JS Chart to React

* Cleanup

* Add jsconfig settings with '@' webpack alias (#4135)

* Counter Editor: move components to own files (#4138)

* Allow users to share aggregated usage information with us (#4108)

* Initial commit of BeaconConsent component

* Add comment about being able to change setting

* Use <Text> correctly

* Final version of consent screen

* Show beacon consent message on homepage only if it wasn't enabled already.

* Add consent setting to organization settings screen.

* Add support for custom message in OrgSetting.save.

* Implmenet consent saving.

* If consent given, send extra data

* Add HelpTrigger

* Make CodeClimate happy

* Wrap everything with DynamicComponent

* CHANGELOG for V8-beta. (#4057)

* CHANGELOG for V8-beta.

* Update CHANGELOG.md

* Update CHANGELOG.md

* Update CHANGELOG.md

* Bug fix: Query view doesn't sync parameters when selecting and deleting (#4146)

* Query Snippets: Use onClick instead of link for 'Click here' option (#4144)

* Snippets: Don't change url when not needed

* Revert "Snippets: Don't change url when not needed"

This reverts commit 2f346f3.

* Query Snippets: use onClick instead of link

* Color picker component (#4136)

* Widget filters overlapped by visualization (#4137)

* Fix: widget filters overlapped by visualization

* Fix tests

* Fix tests

* CHANGELOG for v8.0.0-beta.2 (#4145)

* Stop building tarballs.

* Update version reference.

* CHANGELOG for 8.0.0-beta.2
arikfr pushed a commit that referenced this pull request Oct 27, 2019
@gabrieldutra @arikfr
Migrate Parameters component to React (#4006)
6b39437 
* Start Parameters Migration

* Add dirtyCount

* Use workaround with setState

* Apply Changes

* Add EditSettingsDialog

* Add Cmd/Ctrl + Enter behavior

* Remove isApplying

* Delete Angular version of parameters

* Update tests

* Remove angular stuff

* Update jest

* Drag placeholder

* Update events

* Use old button styling and move css

* Reviewing code

* Add parameter rearrange test

* Add Parameter Settings title change test

* Update Parameter Settings button styling

* Move parameter url logic back to Parameters

* Disable url update when query is new

* Styling changes (#4019)

* Ran's title width styling

* Update drag test

* Improve sizing for Number inputs

Co-Authored-By: Ran Byron <ranbena@gmail.com>

* Fix issue with dragged parameter wrapping

Co-Authored-By: Ran Byron <ranbena@gmail.com>

* Don't reevaluate dirtyParamCount

* Allow multiple values :)

* Fix parameter alignments

* Fix Select width on search

* Update client/app/components/Parameters.less

Co-Authored-By: Ran Byron <ranbena@gmail.com>

* Humanize param.name

* Make sure angular updates Execute disabled status
harveyrendell pushed a commit to pushpay/redash that referenced this pull request Nov 14, 2019
@gabrieldutra @harveyrendell
Migrate Parameters component to React (getredash#4006)
bc21f8c 
* Start Parameters Migration

* Add dirtyCount

* Use workaround with setState

* Apply Changes

* Add EditSettingsDialog

* Add Cmd/Ctrl + Enter behavior

* Remove isApplying

* Delete Angular version of parameters

* Update tests

* Remove angular stuff

* Update jest

* Drag placeholder

* Update events

* Use old button styling and move css

* Reviewing code

* Add parameter rearrange test

* Add Parameter Settings title change test

* Update Parameter Settings button styling

* Move parameter url logic back to Parameters

* Disable url update when query is new

* Styling changes (getredash#4019)

* Ran's title width styling

* Update drag test

* Improve sizing for Number inputs

Co-Authored-By: Ran Byron <ranbena@gmail.com>

* Fix issue with dragged parameter wrapping

Co-Authored-By: Ran Byron <ranbena@gmail.com>

* Don't reevaluate dirtyParamCount

* Allow multiple values :)

* Fix parameter alignments

* Fix Select width on search

* Update client/app/components/Parameters.less

Co-Authored-By: Ran Byron <ranbena@gmail.com>

* Humanize param.name

* Make sure angular updates Execute disabled status
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@gabrieldutra gabrieldutra gabrieldutra approved these changes

Assignees

@ranbena ranbena

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@ranbena @gabrieldutra