Skip to content
This repository has been archived by the owner on Dec 23, 2021. It is now read-only.

Interactive buttons #206

Merged
merged 5 commits into from
Feb 18, 2020
Merged

Interactive buttons #206

merged 5 commits into from
Feb 18, 2020

Conversation

xnkevinnguyen
Copy link
Contributor

Description:

Modify microbit svg to make it easier for the user to interact with buttons.

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Type of change

Please delete options that are not relevant.

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

Limitations:

Please describe limitations of this PR

Testing:

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

  • Test A
  • Test B

Checklist:

  • My code follows the style guidelines of this project
  • My code has been formatted with npm run format and passes the checks in npm run check
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • Any dependent changes have been merged and published in downstream modules

}
.sim-board,
.sim-display,
sim-button {
fill: #111;
}
.sim-button-outer:hover {
stroke: grey;
stroke-width: 3px;
stroke: orange !important;

Choose a reason for hiding this comment

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

Do you think we can avoid using !important?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes! Removing it. Shouldn't be used when not necessary. Good catch

@@ -14,16 +17,24 @@ svg.sim.grayscale {
}
.sim-button {
pointer-events: none;
fill: "rgb(17, 17, 17)";
}
.sim-button:active {

Choose a reason for hiding this comment

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

Are we going to give the metal strips at the bottom the same treatment (or are they not meant to be interacted with in the same way)?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The metal strips currently don't have functionality. We would add the same treatment if we implement functionality on those in the future.

Copy link

@nasadigital nasadigital left a comment

Choose a reason for hiding this comment

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

LGTM!

@xnkevinnguyen xnkevinnguyen merged commit ea1986c into dev Feb 18, 2020
@xnkevinnguyen xnkevinnguyen deleted the users/t-xunguy/buttons-styling branch February 20, 2020 16:21
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants