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

UI Polish #5921

Merged
merged 50 commits into from
Mar 20, 2014
Merged

UI Polish #5921

Show file tree
Hide file tree
Changes from 42 commits
Commits
Show all changes
50 commits
Select commit Hold shift + click to select a range
e26d386
Added Modal Window animation.
larz0 Nov 9, 2013
bb515c5
Tweak.
larz0 Nov 9, 2013
171888e
Added dropdown animation.
larz0 Nov 9, 2013
1c59bde
Removed context menu animation due to project manager selection perfo…
larz0 Nov 9, 2013
362856b
Removed quick open dropdown border. #5029 is no longer an issue.
larz0 Nov 9, 2013
9357b94
Removed backface-visibility property as it's not needed.
larz0 Nov 9, 2013
01d19c0
Added JSTree transition.
larz0 Nov 9, 2013
a9577be
JSTree animation tweaks.
larz0 Nov 9, 2013
7ecb72f
Quick Open animation tweaks.
larz0 Nov 9, 2013
ab092cd
Muted Extension Manager keyword text.
larz0 Nov 9, 2013
3ebc695
Added input glow transition.
larz0 Nov 9, 2013
67fba82
Added pressed state to Project Dropdown button.
larz0 Nov 9, 2013
451c34d
Replaced clear icon with unicode character to keep it consistent with…
larz0 Nov 9, 2013
9e5ac07
Replaced Recent Project close icon with unicode character and removed…
larz0 Nov 9, 2013
a64f5f7
Replaced sidebar selection bg with CSS and removed bg image.
larz0 Nov 9, 2013
6575da9
Sidebar selection tweak.
larz0 Nov 9, 2013
0902c7e
Merge branch 'master' of https://github.com/adobe/brackets into larz/…
larz0 Nov 9, 2013
a5f070b
Tweaked sidebar selection shadow and highlight.
larz0 Nov 10, 2013
a706a32
Removed close and dirty icons and replaced them with unicode characte…
larz0 Nov 10, 2013
f405010
Merge branch 'master' of https://github.com/adobe/brackets into larz/…
larz0 Nov 13, 2013
b635d86
Tweaked working files dirty and close icon vertical centering.
larz0 Jan 6, 2014
7737c87
Removed JSTree Animation.
larz0 Jan 6, 2014
0db8c92
Tweaked Project Panel Highlight.
larz0 Jan 6, 2014
1ae3c6d
Tweaked Extension Manager Dialog version alert text.
larz0 Jan 7, 2014
666fde0
Tweaked about dialog icon.
larz0 Jan 7, 2014
39b3353
Tweaked Modal Dialog border color.
larz0 Jan 7, 2014
8cd2c0f
Tweaked quick open dropdown menu drop-shadow.
larz0 Jan 7, 2014
e4f126e
Removed code hint animation.
larz0 Jan 7, 2014
570fff5
Adding Quick Open dropdown border back.
larz0 Feb 11, 2014
8e35a1a
Tweaked UI components.
larz0 Feb 12, 2014
2e3ab00
Inline color picker tweaks.
larz0 Feb 25, 2014
a96145a
Replaced double triangle with single triangle for #7134
larz0 Mar 9, 2014
2e1fb17
Triangle tweak.
larz0 Mar 9, 2014
7f85594
Forgot to update css.
larz0 Mar 9, 2014
0fca25f
Merge branch 'master' of https://github.com/adobe/brackets into larz/…
larz0 Mar 13, 2014
377cc50
Merge branch 'master' of https://github.com/adobe/brackets into larz/…
larz0 Mar 17, 2014
140372a
Adding animation to all drop-down menus except for code hint drop-downs.
larz0 Mar 17, 2014
26de829
Refactored sidebar quiet dark buttons because we have more than one n…
larz0 Mar 17, 2014
2c451f0
Faster Quick Open animation.
larz0 Mar 18, 2014
d293ed5
Using mixins for animation based on @redmunds' feedback.
larz0 Mar 18, 2014
5ac1106
Increased pagination icon hit area and added hover state because the …
larz0 Mar 18, 2014
79e5465
Removed flicker for nested modal dialogs.
larz0 Mar 18, 2014
c38f4a5
Fixed indentation.
larz0 Mar 18, 2014
352d544
Vendor prefix fixes from @redmunds and @tommalbran
larz0 Mar 18, 2014
3a420aa
Removing last backdrop code based on @tommalbran's feedback.
larz0 Mar 19, 2014
bd407b7
Missing semicolon.
larz0 Mar 19, 2014
550bc5c
Fix for #7151
larz0 Mar 19, 2014
ce492cf
Merge branch 'master' of https://github.com/adobe/brackets into larz/…
larz0 Mar 19, 2014
9fec5ce
Tweaked dark buttons.
larz0 Mar 19, 2014
da64651
Missed autocomplete unprefixed keyframes.
larz0 Mar 20, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/editor/InlineTextEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,7 @@ define(function (require, exports, module) {
// dirty indicator, with file path stored on it
var $dirtyIndicatorDiv = $("<div/>")
.addClass("dirty-indicator")
.html("&bull;")
.width(0); // initialize indicator as hidden
$dirtyIndicatorDiv.data("fullPath", doc.file.fullPath);

Expand Down
32 changes: 16 additions & 16 deletions src/extensions/default/InlineColorEditor/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
}
.color-editor aside ul.swatches li:focus {
outline: none;
box-shadow: 0 0 0 2px #6fb5f1;
box-shadow: 0 0 0 1px #94ceff;
Copy link
Contributor

Choose a reason for hiding this comment

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

How do you keep track of all of the colors in this file? Would be nice to use variables, but it's probably not worth using less just for that. Is it worth putting a comment at top of file listing all colors and where/how they're used?

Copy link
Member Author

Choose a reason for hiding this comment

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

It would be nice if we could use the less variables in brackets_colors.less so that inline editors can also be themed. The colors I'm using in the inline-editor are from brackets_colors.less e.g. @tc-input-glow: 0 0 0 1px #94ceff; Should I still add a comment at the top?

Copy link
Contributor

Choose a reason for hiding this comment

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

You can use .less files in extensions, but I see 2 issues:

  1. The less gets compiled every time you start Brackets. This slows down startup time, but even worse provides an example that other people will copy and make it even worse.
  2. You can pre-compile the .less into .css, but it's a step you have to remember to do every time an edit is made.

I just thought I'd mention putting colors in a comment. If you don't think it's necessary then I'm ok with it.

Copy link
Member

Choose a reason for hiding this comment

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

The other issue is that you still can't reference variables from the core code's LESS files... so @larz0's motivation for using LESS in this case would be shot...

border-radius: 2px;
}
.color-editor aside ul.swatches li .swatch-bg {
Expand Down Expand Up @@ -148,7 +148,7 @@
}
.color-editor section .color-selection-field .selector-base:focus {
outline: none;
box-shadow: 0 0 0 5px #6fb5f1;
box-shadow: 0 0 0 5px #94ceff;
border-radius: 10px;
}
.color-editor section .color-selection-field .selector {
Expand Down Expand Up @@ -181,7 +181,7 @@
}
.color-editor section .slider .selector-base:focus {
outline: none;
box-shadow: 0 0 0 5px #6fb5f1;
box-shadow: 0 0 0 5px #94ceff;
border-radius: 1px;
}
.color-editor section .slider .selector {
Expand Down Expand Up @@ -210,7 +210,7 @@
width: 118px;
height: 23px;
margin-right: 5px;
border-color: #aaa;
border-color: #b2b5b5;
box-sizing: border-box;
display: inline-block;
color: #222;
Expand All @@ -219,8 +219,8 @@
display: inline-block;
height: 23px;
padding: 0 0 0 4px;
border: 1px solid #9c9e9e;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12);
border: 1px solid #b2b5b5;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
background: #fff;
font-family: "SourceSansPro";
font-size: 12px;
Expand All @@ -232,8 +232,8 @@
.color-editor section footer input:focus {
background: #fff;
outline: none;
box-shadow: 0 0 0 2px #6fb5f1;
border: 1px solid #0940fd;
box-shadow: 0 0 0 1px #94ceff;
border: 1px solid #2893ef;
z-index: 911;
}
@media all and (-webkit-min-device-pixel-ratio : 2), (min-device-pixel-ratio : 2) {
Expand Down Expand Up @@ -284,21 +284,21 @@
padding: 2px 4px 4px;
height: 15px;
font-size: 12px;
text-shadow: 0 1px #fff;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76);
background-color: #e5e9e9;
border: 1px solid #9c9e9e;
border: 1px solid #b2b5b5;
border-right: 1px solid transparent;
margin-left: -3px;

box-shadow: inset 0 1px 0 #fff;
box-shadow: inset 0 1px 0 #f3f3f3;
}

.color-editor .button-bar a:focus, .color-editor .button-bar li.selected a:focus{
outline: none;
position: relative;
border: 1px solid #0940fd;
border-right: 1px solid #063dfa !important; /* we need this !important, sorry! */
box-shadow: 0 0 0 2px #65aeed;
border: 1px solid #2893ef;
border-right: 1px solid #2893ef !important; /* we need this !important, sorry! */
box-shadow: 0 0 0 1px #94ceff;
z-index: 999;
}
.color-editor .button-bar li:first-child {
Expand All @@ -310,13 +310,13 @@
border-bottom-left-radius: 3px;
}
.color-editor .button-bar li:last-child a {
border-right: 1px solid #9c9e9e;
border-right: 1px solid #b2b5b5;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.color-editor .button-bar li.selected a {
background-color: #d3d7d7;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12);
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
background-image: none;
}
.color-editor .button-bar li.disabled a {
Expand Down
4 changes: 2 additions & 2 deletions src/extensions/default/RecentProjects/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ define(function (require, exports, module) {
* Create the "delete" button that shows up when you hover over a project.
*/
function renderDelete() {
return $("<div id='recent-folder-delete' class='trash-icon'></div>")
return $("<div id='recent-folder-delete' class='trash-icon'>&times;</div>")
.mouseup(function (e) {
// Don't let the click bubble upward.
e.stopPropagation();
Expand Down Expand Up @@ -458,7 +458,7 @@ define(function (require, exports, module) {

AppInit.htmlReady(function () {
$("#project-title")
.wrap("<div id='project-dropdown-toggle'></div>")
.wrap("<div id='project-dropdown-toggle' class='btn-alt-quiet'></div>")
.after("<span class='dropdown-arrow'></span>");

var cmenuAdapter = {
Expand Down
13 changes: 0 additions & 13 deletions src/extensions/default/RecentProjects/styles/close-btn.svg
View file
Open in desktop

This file was deleted.

17 changes: 9 additions & 8 deletions src/extensions/default/RecentProjects/styles/down-arrow.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 10 additions & 18 deletions src/extensions/default/RecentProjects/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,30 @@
#project-dropdown {
border-radius: 3px;
box-shadow: 0 3px 9px rgba(0, 0, 0, .3);
border: none;
}
.dropdown-arrow {
display: inline-block;
width: 5px;
height: 10px;
width: 7px;
height: 5px;
margin-left: 4px;
background-image: url("down-arrow.svg");
background-repeat: no-repeat;
position: relative;
top: 1px;
top: 0;
}

.trash-icon {
position: absolute;
left: 7px;
width: 16px;
height: 16px;
background-image: url("close-btn.svg");
background-position: 0 0;
font-size: 20px;
color: rgba(0, 0, 0, 0.5);
line-height: 15px;
text-align: center;
}

.trash-icon:hover {
background-position: -15px 0;
color: rgba(0, 0, 0, 1);
}

#project-dropdown-toggle {
border: 1px solid transparent;
display: inline-block;
/* adjust margins to keep position #project-title position stable after extension is loaded */
margin: -3px 0px -2px -6px;
Expand All @@ -41,12 +39,6 @@
line-height: 21px;
}

#project-dropdown-toggle:hover {
border-radius: 3px;
border: 1px solid #2d2f31;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
text-decoration: none;
}
#project-dropdown-toggle:hover .dropdown-arrow {
background-image: url("down-arrow.svg");
}
Expand Down
2 changes: 1 addition & 1 deletion src/htmlContent/extension-manager-dialog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<li><a href="#installed" class="installed" data-toggle="tab"><img src="styles/images/extension-manager-installed.svg"/><br/>{{Strings.EXTENSIONS_INSTALLED_TITLE}}</a><span class="notification"></span></li>
</ul>
<div>
<button class="search-clear"></button>
<button class="search-clear">&times;</button>
<input class="search" type="text" placeholder="{{EXTENSION_SEARCH_PLACEHOLDER}}">
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/htmlContent/main-view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
<div class="main-view">
<div id="sidebar" class="sidebar panel quiet-scrollbars horz-resizable right-resizer collapsible" data-minsize="0" data-forceleft=".content">
<div id="working-set-header">{{WORKING_FILES}}
<div id="working-set-option-btn"></div>
<div id="working-set-option-btn" class="btn-alt-quiet"></div>
</div>
<div id="open-files-container">
<!-- This will contain runtime-generated <li>'s for each file in the working set -->
Expand Down
Loading