Skip to content

/ ghostery-extension

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

Jump to bottom

GH-1623: Update Hover State for Expanded View #408

Merged
merged 5 commits into from Jul 17, 2019
+30 −15
Merged

GH-1623: Update Hover State for Expanded View #408

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d7683fe
updated expanded view hover state
tdtnguyen Jul 2, 2019
92ee0cc
centered left caret
tdtnguyen Jul 2, 2019
4bc98db
adjusted caret spacing
tdtnguyen Jul 8, 2019
d701080
Merge branch 'develop' into expandedViewHoverState
IAmThePan Jul 9, 2019
3e956d0
Merge branch 'develop' into expandedViewHoverState
christophertino Jul 17, 2019
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

Next
Loading status checks…
updated expanded view hover state
  • Loading branch information
@tdtnguyen
tdtnguyen committed Jul 2, 2019
commit d7683feb8e0bca5fb0f7eaaf7c126115be68d668
2 app/images/panel/caret-left.svg
View file
Open in desktop
@@ -1,3 +1,3 @@
<svg width="7" height="11" viewBox="0 0 7 11" xmlns="http://www.w3.org/2000/svg">
<path d="M7 9.717L5.676 11 0 5.5 5.676 0 7 1.283 2.65 5.5" fill="#4A4A4A" fill-rule="evenodd"/>
<path d="M7 9.717L5.676 11 0 5.5 5.676 0 7 1.283 2.65 5.5" fill="#F7F7F7" fill-rule="evenodd"/>
</svg>
2 app/images/panel/caret-right.svg
View file
Open in desktop
@@ -1,3 +1,3 @@
<svg width="7" height="11" viewBox="0 0 7 11" xmlns="http://www.w3.org/2000/svg">
<path d="M.5 9.31l1.23 1.23L7 5.27 1.73 0 .5 1.23l4.04 4.04" fill="#4A4A4A" fill-rule="evenodd"/>
<path d="M.5 9.31l1.23 1.23L7 5.27 1.73 0 .5 1.23l4.04 4.04" fill="#F7F7F7" fill-rule="evenodd"/>
</svg>
0 app/images/panel/line-empty-moon.svg → app/images/panel/line.svg
View file
Open in desktop
File renamed without changes.
1 app/images/panel/right-left-moon.svg
View file
Open in desktop

This file was deleted.

1 app/images/panel/right-right-moon.svg
View file
Open in desktop

This file was deleted.

4 app/panel/components/Detail.jsx
View file
Open in desktop
@@ -61,7 +61,9 @@ class Detail extends React.Component {
return (
<div className="detail-wrap">
<div id="content-detail" className={(this.props.is_expanded ? 'expanded' : '')}>
<div className={condensedToggleClassNames} onClick={this.toggleExpanded} />
<div className="toggle-bar">
<div className={condensedToggleClassNames} onClick={this.toggleExpanded} />
</div>
<Route path="/detail/blocking" render={this.BlockingComponent} />
<Route path="/detail/rewards" render={this.RewardsComponent} />
<DetailMenu hasReward={enable_offers && unread_offer_ids.length > 0} subscriptionsPlus={this.props.user && this.props.user.subscriptionsPlus} />
32 app/scss/partials/_detail.scss
View file
Open in desktop
@@ -73,24 +73,36 @@
@include expanding-panel(2px);
}

.condensed-toggle {
.toggle-bar:hover {
position: absolute;
height: 50px;
width: 25px;
top: 198px;
height: 100%;
width: 2px;
top: 0px;
z-index: 2;
cursor: pointer;
background-position: 7px center;
background-color: $ghosty-blue;
}

.condensed-toggle {
position: absolute;
height: 24px;
width: 13px;
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
top: 215px;
z-index: 3;
cursor: pointer;
background-position: center;

This comment has been minimized.

Sign in to view
@IAmThePan

IAmThePan Jul 2, 2019
Contributor

Try using this to move the left caret to the left:

background-position: calc(50% - 1.75px);

you may have to have separate css selector for the right arrow and left.
background-size: 3px 20px;
background-repeat: no-repeat;
background-image: url('../../app/images/panel/line-empty-moon.svg');
background-image: url('../../app/images/panel/line.svg');
&:hover {
background-size: 25px 50px;
background-position: center;
background-image: url('../../app/images/panel/right-left-moon.svg');
background-color: $ghosty-blue;
background-size: 7px 20px;
background-image: url('../../app/images/panel/caret-left.svg');
}
&.condensed:hover {
background-image: url('../../app/images/panel/right-right-moon.svg');
background-image: url('../../app/images/panel/caret-right.svg');
}
}

ProTip! Use n and p to navigate between commits in a pull request.