feat(TwoColorWord.js): implement blinking #86
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
TwoColorWord achieves the two-color-word effect
by adding a half-word overlay to a full-width character ("word").
By making use of the overlay,
the blinking effect can be achieved by the following cases:
* Only the tail blinks: Overlay the head and blink only the underneath word
* Only the head blinks: Overlay the tail and blink only the underneath word
* Both blink: Overlay the head and blink both the underneath word and the overlay
For overlaying the tail,
a negative text-indent is applied to the overlay
to truncate off the left half of the overlay character.
The background color is handled by the .b* CSS classes
but was also affected by the .qq* classes.
This further complicated the TwoColorWord blinking implementation.
Therefore, I removed the .qq* classes,
except for the .qq class, which does not affect the background color.
* src/components/Row/WordSegmentBuilder/ColorSpan.js
* Use CSS class .qq for the blinking effect
* src/components/Row/WordSegmentBuilder/TwoColorWord.js
* Add implementation description
* Implement blinking
* src/css/color.css
* Use class .qq for the blinking effect solely and remove other .qq* classes
|
Superseded by #102, where a simpler implementation is given. Closed. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
TwoColorWordachieves the two-color-word effect by adding a half-word overlay to a full-width character ("word").By making use of the overlay, the blinking effect can be achieved by the following cases:
For overlaying the tail, a negative
text-indentis applied to the overlay to truncate off the left half of the overlay character.The background color is handled by the
.b*CSS classes but was also affected by the.qq*classes. This further complicated theTwoColorWordblinking implementation.Therefore, I removed the
.qq*classes, except for the.qqclass, which does not affect the background color.Demonstration:
