forked from adobe/brackets
-
Notifications
You must be signed in to change notification settings - Fork 282
Added all components for Border Radius Inline editor #890
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.
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
Merged
Merged
Changes from all commits
Commits
Show all changes
26 commits
Select commit
Hold shift + click to select a range
320f414
Added all components for Border Radius Inline editor
65ba628
remove text selection after closing inline border radius editor
df38f6a
made allCornerSlider and individual slider work seperately without ef…
183704c
added the slider value indicator
63f7f4e
modified BorderRadiusEditor to allow keeping all units(%,em,px)
f964e3b
modified BorderRadiusEditor to allow keeping all units(%,em,px)--#2
c6dcd4a
added radio buttons to toggle slider unit
627ce91
making individual corner values sync with allcorner mode value
8b1e5c1
Border UI updates
flukeout f744a28
Merge pull request #1 from flukeout/radius-ui-updates
feihaozi77 7e52b7b
fixed when close inlineEditor the cursor do not go to top
6a10245
Light theme + CSS cleanup
flukeout 2fe9283
Merge pull request #2 from flukeout/radius-ui-theme
feihaozi77 f4adfd8
code cleaned up
f4792c9
fixed indentation and replaceAll() local function
82677fa
fixed some indentations
43bc8cc
removed _values local property from borderRadiusEditor.js
db8e5ae
Fixed few indentations and comments
f42ceb1
added comment for borderRadiusUtil
063d61f
added more comments in borderRadiusUtils.js
4c68e51
Fixed few comments
de372ac
Review fixes
aa58423
Merge branch 'gideonthomas-border-radius'
9095909
Fixed some codes according to comments from gide
1bcd535
fixed indentation
c823dd7
fixed indentation 2x
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or 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
225 changes: 225 additions & 0 deletions
225
src/extensions/default/InlineBorderRadiusEditor/BorderRadiusEditor.js
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,225 @@ | ||
| define(function(require, exports, module) { | ||
| "use strict"; | ||
|
|
||
| var Strings = brackets.getModule("strings"); | ||
| var Mustache = brackets.getModule("thirdparty/mustache/mustache"); | ||
| var BorderRadiusUtils = require("BorderRadiusUtils"); | ||
|
|
||
| // getting reference to the html template for the border-radius editor UI | ||
| var BorderRadiusTemplate = require("text!BorderRadiusEditorTemplate.html"); | ||
|
|
||
| function getIndividualValues(values){ | ||
| // Convert "12px 20px 30px" into an array of individual values like: | ||
| // [{num: 12, unit: "px"}, {num: 20, unit: "px"}, ...] | ||
| var individualValues = []; | ||
| var currentValue; | ||
|
|
||
| // We create a new regular expression everytime so that we don't | ||
| // reuse stale data from the old RegExp object. | ||
| var valueRegex = new RegExp(BorderRadiusUtils.BORDER_RADIUS_SINGLE_VALUE_REGEX); | ||
|
|
||
| while ((currentValue = valueRegex.exec(values)) !== null) { | ||
| individualValues.push({ | ||
| num: parseFloat(currentValue[1]), | ||
| unit: currentValue[2] || "" | ||
| }); | ||
| } | ||
|
|
||
| return individualValues; | ||
| } | ||
|
|
||
| function BorderRadiusValue($parentElement, location, value, unit, onChange) { | ||
| var self = this; | ||
|
|
||
| self.value = value || 0; | ||
| self.unit = unit || ""; | ||
|
|
||
| var $slider = this.$slider = $parentElement.find("#" + location + "-slider"); | ||
| var $unitOptions = $parentElement.find("#" + location + "-radio").children(); | ||
| var $text = $parentElement.find("#" + location + "-text"); | ||
|
|
||
| $slider.val(self.value); | ||
| $unitOptions.filter(function() { | ||
| return $(this).text().trim() === self.unit; | ||
| }).addClass("selected"); | ||
| $text.text(self.toString()); | ||
|
|
||
| $slider.on("input", function() { | ||
| var newValue = $slider.val().trim(); | ||
| self.value = newValue; | ||
| $text.text(self.toString()); | ||
| onChange(); | ||
| }); | ||
|
|
||
| $unitOptions.on("click", function() { | ||
| var $selectedUnit = $(this); | ||
| $selectedUnit.siblings().removeClass("selected"); | ||
| $selectedUnit.addClass("selected"); | ||
|
|
||
| self.unit = $selectedUnit.text().trim(); | ||
| $text.text(self.toString()); | ||
| onChange(); | ||
| }); | ||
| } | ||
|
|
||
| BorderRadiusValue.prototype.toString = function() { | ||
| return this.value + (this.value === 0 ? "" : this.unit); | ||
| }; | ||
|
|
||
| function BorderRadiusEditor($parent, valueString, radiusChangeHandler) { | ||
| var self = this; | ||
|
|
||
| // Create the DOM structure, filling in localized strings via Mustache | ||
| self.$element = $(Mustache.render(BorderRadiusTemplate, Strings)); | ||
| $parent.append(self.$element); | ||
| self.radiusChangeHandler = radiusChangeHandler; | ||
|
|
||
| this.onChange = this.onChange.bind(this); | ||
| self.updateValues(valueString); | ||
|
|
||
| // Attach event listeners to toggle the corner mode UI elements | ||
| var $individualCornerArea = self.$element.find("#individualCornerArea"); | ||
| var $individualCornerButton = self.$element.find("#individualCorners"); | ||
| var $allCornersArea = self.$element.find("#allCornersArea"); | ||
| var $allCornerButton = self.$element.find("#allCorners"); | ||
|
|
||
| function toggleCornerOption($showElement, $hideElement) { | ||
| $showElement.show(); | ||
| $hideElement.hide(); | ||
| self.allCorners = $showElement === $allCornersArea; | ||
| self.onChange(); | ||
| } | ||
|
|
||
| $allCornerButton.on("click", function() { | ||
| $allCornerButton.addClass("selected"); | ||
| $individualCornerButton.removeClass("selected"); | ||
| toggleCornerOption($allCornersArea, $individualCornerArea); | ||
| }); | ||
| $individualCornerButton.on("click", function() { | ||
| $allCornerButton.removeClass("selected"); | ||
| $individualCornerButton.addClass("selected"); | ||
| toggleCornerOption($individualCornerArea, $allCornersArea); | ||
| }); | ||
|
|
||
| // initialize individual corner editing to be disabled if allCorner is set to true | ||
| if(self.allCorners){ | ||
| $allCornerButton.trigger("click"); | ||
| } else { | ||
| $individualCornerButton.trigger("click"); | ||
| } | ||
| } | ||
|
|
||
| BorderRadiusEditor.prototype.updateValues = function(valueString) { | ||
| var values = getIndividualValues(valueString); | ||
| var numOfValues = values.length; | ||
| var firstValue = values[0]; | ||
| var secondValue = firstValue; | ||
| var thirdValue = firstValue; | ||
| var fourthValue = firstValue; | ||
|
|
||
| this.allCorners = values.length === 1; | ||
|
|
||
| if (!this.allCorners) { | ||
| secondValue = values[1]; | ||
|
|
||
| if (numOfValues === 2) { | ||
| fourthValue = secondValue; | ||
| } else { | ||
| thirdValue = values[2]; | ||
|
|
||
| if (numOfValues === 3) { | ||
| fourthValue = secondValue; | ||
| } else { | ||
| fourthValue = values[3]; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| this.topLeft = new BorderRadiusValue( | ||
| this.$element, | ||
| "top-left", | ||
| firstValue.num, | ||
| firstValue.unit, | ||
| this.onChange | ||
| ); | ||
| this.topRight = new BorderRadiusValue( | ||
| this.$element, | ||
| "top-right", | ||
| secondValue.num, | ||
| secondValue.unit, | ||
| this.onChange | ||
| ); | ||
| this.bottomRight = new BorderRadiusValue( | ||
| this.$element, | ||
| "bottom-right", | ||
| thirdValue.num, | ||
| thirdValue.unit, | ||
| this.onChange | ||
| ); | ||
| this.bottomLeft = new BorderRadiusValue( | ||
| this.$element, | ||
| "bottom-left", | ||
| fourthValue.num, | ||
| fourthValue.unit, | ||
| this.onChange | ||
| ); | ||
| this.allCorner = new BorderRadiusValue( | ||
| this.$element, | ||
| "all-corner", | ||
| firstValue.num, | ||
| firstValue.unit, | ||
| this.onChange | ||
| ); | ||
|
|
||
| //correctly update the values in the UI. | ||
| this.onChange(); | ||
| }; | ||
|
|
||
| BorderRadiusEditor.prototype.onChange = function() { | ||
| if (this.allCorners) { | ||
| this.radiusChangeHandler(this.allCorner.toString()); | ||
| return; | ||
| } | ||
|
|
||
| var topLeft = this.topLeft.toString(); | ||
| var topRight = this.topRight.toString(); | ||
| var bottomRight = this.bottomRight.toString(); | ||
| var bottomLeft = this.bottomLeft.toString(); | ||
| var borderRadiusString; | ||
|
|
||
| if (topRight === bottomLeft) { | ||
| // We can use a two value border radius if top right and | ||
| // bottom left are equal and top left and bottom right are equal. | ||
| // For e.g. 20px 30px | ||
| borderRadiusString = topLeft + " " + topRight; | ||
|
|
||
| if (topLeft !== bottomRight) { | ||
| // We can use a three value border radius if top right and | ||
| // bottom left are equal but the top left and bottom right | ||
| // values are not. | ||
| borderRadiusString += " " + bottomRight; | ||
| } else if (topLeft === topRight) { | ||
| // This means that top left and bottom right are equal (set 1), | ||
| // the top right and bottom left values are equal (set 2), and | ||
| // that set 1 and set 2 are equal - implying that all values | ||
| // are the same. | ||
| borderRadiusString = topLeft; | ||
| } | ||
| } else { | ||
| borderRadiusString = [topLeft, topRight, bottomRight, bottomLeft].join(" "); | ||
| } | ||
|
|
||
| this.radiusChangeHandler(borderRadiusString); | ||
| }; | ||
|
|
||
| BorderRadiusEditor.prototype.focus = function() { | ||
| this.topLeft.$slider.focus(); | ||
| }; | ||
|
|
||
| BorderRadiusEditor.prototype.isValidBorderRadiusString = function(string){ | ||
| var radiusValueRegEx = new RegExp(BorderRadiusUtils.BORDER_RADIUS_VALUE_REGEX); | ||
| return radiusValueRegEx.test(string); | ||
| }; | ||
|
|
||
| exports.BorderRadiusEditor = BorderRadiusEditor; | ||
| }); | ||
121 changes: 121 additions & 0 deletions
121
src/extensions/default/InlineBorderRadiusEditor/BorderRadiusEditorTemplate.html
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| <div tabindex="-1" class="border-radius-editor"> | ||
| <header> | ||
| <ul class="button-bar"> | ||
| <li id="allCorners" title="{{ALL_CORNERS}}"> | ||
| <a href="#" tabindex="0">{{ALL_CORNERS}}</a> | ||
| </li> | ||
| <li title="{{INDIVIDUAL_CORNERS}}" id="individualCorners"> | ||
| <a href="#" tabindex="0">{{INDIVIDUAL_CORNERS}}</a> | ||
| </li> | ||
| </ul> | ||
| </header> | ||
|
|
||
| <div id="individualCornerArea"> | ||
|
|
||
| <table> | ||
| <tr class="border-radius-input"> | ||
| <td class="label-container"> | ||
| <div class="top-left corner-icon"></div> | ||
| </td> | ||
| <td class="slider-container"> | ||
| <input id="top-left-slider" type="range" min="0" max="100" step="1"> | ||
| </td> | ||
| <td class="slider-value"> | ||
| <span class="slider-indicator" id="top-left-text"></span> | ||
| </td> | ||
| <td class="units-container"> | ||
| <ul class="button-bar ul-padding-left" id="top-left-radio"> | ||
| <li id="top-left-radio-px" title="{{PIXEL_UNIT}}"><a href="#" tabindex="0">px</a></li> | ||
| <li title="{{PERCENTAGE_UNIT}}" id="top-left-radio-percent"><a href="#" tabindex="0">%</a></li> | ||
| <li title="{{EM_UNIT}}" id="top-left-radio-em"><a href="#" tabindex="0">em</a></li> | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
|
|
||
| <tr class="border-radius-input"> | ||
| <td class="label-container"> | ||
| <div class="top-right corner-icon"></div> | ||
| </td> | ||
| <td class="slider-container"> | ||
| <input id="top-right-slider" type="range" min="0" max="100" step="1"> | ||
| </td> | ||
| <td> | ||
| <span class="slider-indicator" id="top-right-text"></span> | ||
| </td> | ||
| <td class="units-container"> | ||
| <ul class="button-bar ul-padding-left" id="top-right-radio"> | ||
| <li id="top-right-radio-px" title="{{PIXEL_UNIT}}"><a href="#" tabindex="0">px</a></li> | ||
| <li title="{{PERCENTAGE_UNIT}}" id="top-right-radio-percent"><a href="#" tabindex="0">%</a></li> | ||
| <li title="{{EM_UNIT}}" id="top-right-radio-em"><a href="#" tabindex="0">em</a></li> | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
|
|
||
| <tr class="border-radius-input"> | ||
| <td class="label-container"> | ||
| <div class="bottom-right corner-icon"></div> | ||
| </td> | ||
| <td class="slider-container"> | ||
| <input id="bottom-right-slider" type="range" min="0" max="100" step="1"> | ||
| </td> | ||
| <td> | ||
| <span class="slider-indicator" id="bottom-right-text"></span> | ||
| </td> | ||
| <td class="units-container"> | ||
| <ul class="button-bar ul-padding-left" id="bottom-right-radio"> | ||
| <li id="bottom-right-radio-px" title="{{PIXEL_UNIT}}"><a href="#" tabindex="0">px</a></li> | ||
| <li title="{{PERCENTAGE_UNIT}}" id="bottom-right-radio-percent"><a href="#" tabindex="0">%</a></li> | ||
| <li title="{{EM_UNIT}}" id="bottom-right-radio-em"><a href="#" tabindex="0">em</a></li> | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
|
|
||
| <tr class="border-radius-input"> | ||
| <td class="label-container"> | ||
| <div class="bottom-left corner-icon"></div> | ||
| </td> | ||
| <td class="slider-container"> | ||
| <input id="bottom-left-slider" type="range" min="0" max="100" step="1"> | ||
| </td> | ||
| <td> | ||
| <span class="slider-indicator" id="bottom-left-text"></span> | ||
| </td> | ||
| <td class="units-container"> | ||
| <ul class="button-bar ul-padding-left" id="bottom-left-radio"> | ||
| <li id="bottom-left-radio-px" title="{{PIXEL_UNIT}}"><a href="#" tabindex="0">px</a></li> | ||
| <li title="{{PERCENTAGE_UNIT}}" id="bottom-left-radio-percent"><a href="#" tabindex="0">%</a></li> | ||
| <li title="{{EM_UNIT}}" id="bottom-left-radio-em"><a href="#" tabindex="0">em</a></li> | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| </div> | ||
|
|
||
| <div id="allCornersArea"> | ||
| <table> | ||
| <tr class="border-radius-input"> | ||
| <td class="label-container"> | ||
| <div class="all corner-icon"> | ||
| <div class="dot"></div> | ||
| <div class="dot"></div> | ||
| <div class="dot"></div> | ||
| <div class="dot"></div> | ||
| </div> | ||
| </td> | ||
| <td class="slider-container"> | ||
| <input id="all-corner-slider" type="range" min="0" max="100" step="1"> | ||
| </td> | ||
| <td class="slider-value"> | ||
| <span class="slider-indicator" id="all-corner-text"></span> | ||
| </td> | ||
| <td class="units-container"> | ||
| <ul class="button-bar ul-padding-left" id="all-corner-radio"> | ||
| <li id="all-corner-radio-px" title="{{PIXEL_UNIT}}"><a href="#" tabindex="0">px</a></li> | ||
| <li title="{{PERCENTAGE_UNIT}}" id="all-corner-radio-percent"><a href="#" tabindex="0">%</a></li> | ||
| <li title="{{EM_UNIT}}" id="all-corner-radio-em"><a href="#" tabindex="0">em</a></li> | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| <div> | ||
| </div> |
7 changes: 7 additions & 0 deletions
7
src/extensions/default/InlineBorderRadiusEditor/BorderRadiusProperties.json
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "border-radius": {"values": ["inherit"]}, | ||
| "border-top-left-radius": {"values": ["inherit"]}, | ||
| "border-top-right-radius": {"values": ["inherit"]}, | ||
| "border-bottom-left-radius": {"values": ["inherit"]}, | ||
| "border-bottom-right-radius": {"values": ["inherit"]} | ||
| } |
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I noticed another bug. Change this entire if into: