Permalink
Browse files

Use square icons for representing empty blocks

Summary:
Previously, empty blocks would have the same cursor as other blocks and would have a filled in rectangle when there was no cursor. Now, cursors in empty blocks are green rectangles and the rectangles when there is no cursor are not filled in.

Before:
{F543753}

After:
{F543779}

Test Plan:
- Verified in a browser that a cursor in an empty block is a rectangle
- Verified in a browser that a gray rectangle appears in empty blocks with no cursor
- Verified that logarithms, roots, and exponents display rectangles correctly
- Verified that the rectangles are rendered properly in Perseus
- Verified that the rectangles are rendered properly in webapp

Reviewers: charlie, kevinb

Reviewed By: kevinb

Differential Revision: https://phabricator.khanacademy.org/D28187
1 parent b834388 commit ac8f92b7dc708e4fb6d955b545e2891e62098ed1 @shadaj shadaj committed Jun 14, 2016
Showing with 28 additions and 1 deletion.
  1. +27 −0 css/overrides.css
  2. +1 −1 src/components/input/math-input.js
View
@@ -1,7 +1,34 @@
.keypad-input .mq-editable-field .mq-cursor {
border-left: 2px solid #78c008 !important;
+ border-radius: 1px;
+
margin-left: -1px !important;
margin-right: -1px !important;
+ margin-bottom: 2px;
+}
+
+.keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child {
+ border: 2px solid #78c008 !important; /* bright-green color */
+ padding: 0 4px 0 4px;
+}
+
+.keypad-input .mq-empty {
+ background: transparent !important;
+}
+
+.keypad-input .mq-empty:not(.mq-root-block):after {
+ visibility: visible !important;
+
+ /* hides the 'c' content added by MathQuill to measure the width */
+ color: transparent;
+
+ display: inline-block;
+ border: 2px solid #ccc;
+ border-radius: 1px;
+ padding: 0 4px 0 4px;
+ margin-left: -1px;
+ margin-right: -1px;
+ margin-bottom: 2px;
}
.keypad-input .mq-math-mode .mq-selection,
@@ -225,7 +225,7 @@ const MathInput = React.createClass({
const cursor = this._container.querySelector('.mq-cursor');
const cursorBounds = cursor.getBoundingClientRect();
- const cursorWidth = 2;
+ const cursorWidth = cursorBounds.width;
const gapBelowCursor = 2;
this.setState({

0 comments on commit ac8f92b

Please sign in to comment.