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

[New feature] Add flip-view and close buttons to pane-headers #11749

Merged
merged 10 commits into from
Oct 15, 2015
Merged

[New feature] Add flip-view and close buttons to pane-headers #11749

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b2ddf06
Add flip-view buttons to panel headers
petetnt Sep 27, 2015
8a8d343
Remove commented out line, add non-vendor prefixed filter
petetnt Sep 28, 2015
fe6c0df
Merge remote-tracking branch 'upstream/master' into petetnt/flip-view…
petetnt Oct 4, 2015
ac4ec57
Merge remote-tracking branch 'upstream/master' into petetnt/flip-view…
petetnt Oct 6, 2015
11905f4
Added unit test
petetnt Oct 6, 2015
58e30c2
Added close button for split view panes
petetnt Oct 11, 2015
cb7fa06
Modify button styles, add preferences, fix close button bug
petetnt Oct 12, 2015
443aeb1
Add possible values for the pane header button pref, remove unneeded …
petetnt Oct 13, 2015
3ef3b19
Ensure that header close button is visible on lighter themes
petetnt Oct 15, 2015
750d2bd
Fix regression with .flipview-icon-none caused by the 'always'-pref
petetnt Oct 15, 2015
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
5 changes: 4 additions & 1 deletion src/htmlContent/pane.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<div id="{{id}}" class="view-pane">
<div class="pane-header"></div>
<div class="pane-header">
<div class="pane-header-text"></div>
<div class="pane-header-flipview-btn btn-alt-quiet flipview-icon-none"></div>
</div>
<div class="pane-content">
<div class="not-editor"></div>
</div>
Expand Down
3 changes: 3 additions & 0 deletions src/nls/root/strings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -461,7 +461,10 @@ define({
"BASEURL_ERROR_HASH_DISALLOWED" : "The base URL can't contain hashes like \"{0}\".",
"BASEURL_ERROR_INVALID_CHAR" : "Special characters like '{0}' must be %-encoded.",
"BASEURL_ERROR_UNKNOWN_ERROR" : "Unknown error parsing Base URL",

//Strings for Pane.js
"EMPTY_VIEW_HEADER" : "<em>Open a file while this pane has focus</em>",
"FLIPVIEW_BTN_TOOLTIP" : "Flip this view to {0} pane",

// Strings for themes-settings.html and themes-general.html
"CURRENT_THEME" : "Current Theme",
Expand Down
52 changes: 51 additions & 1 deletion src/styles/brackets.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -486,11 +486,58 @@ a, img {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;


&-text {
display: inline;
}

.dark & {
background-color: #1d1f21; // not using a variable on purpose.
border-bottom-color: rgba(255, 255, 255, 0.05);
}

&-flipview-btn {
position: relative;
display: inline-block;
top: 0px;
padding-top: 4px;
padding-right: 4px;
padding-bottom: 2px;
padding-left: 4px;
margin-left: 0;
margin-bottom: 0;
.sprite-icon(0, 0, 13px, 13px, "images/flip-view-icons.svg");
background-origin: content-box;
-webkit-transform: translateZ(0); // forces GPU mode for better filter rendering on retina
transform: translateZ(0); // future proofing
-webkit-filter: drop-shadow(0 1px 0 rgba(0,0,0,0.36));
Copy link
Contributor

Choose a reason for hiding this comment

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

filter has a standardized version. It'd probably be best to add that too like you did with transform.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Thanks @le717, fixed those 👍

RE: the filter declaration, there are some other components using the plain vendor-prefixed versions of ones that have standardized ones available, might be worth checking out.

z-index: 1;
vertical-align: middle;

&.btn-alt-quiet:hover {
border-color: @dark-bc-panel-bg;
}

&.flipview-icon-none {
display: none;
}

&.flipview-icon-top {
background-position: center 1px;
}

&.flipview-icon-right {
background-position: center -18px;
}

&.flipview-icon-bottom {
background-position: center -35px;
}

&.flipview-icon-left {
background-position: center -54px;
}
}
}
.active-pane {

Expand Down Expand Up @@ -755,6 +802,7 @@ a, img {
-webkit-filter: drop-shadow(0 1px 0 rgba(0,0,0,0.36));
z-index: 1;
}

.splitview-icon-none {
background-position: center 1px;
}
Expand All @@ -765,6 +813,8 @@ a, img {
background-position: center -41px;
}



// Show splitview icons on the button's dropdown menu too
#splitview-menu ul.dropdown-menu > li {
.menu-name::before {
Expand Down
67 changes: 67 additions & 0 deletions src/styles/images/flip-view-icons-dark.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.
67 changes: 67 additions & 0 deletions src/styles/images/flip-view-icons.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.
Loading