Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

Added halo around signed in trigger button

Browse source 
no refs.
- added an outline on the Portal trigger button for logged in state so that it pops out better on any background with Gravatars
This commit is contained in:
Peter Zimon 2020-10-13 17:16:33 +02:00
parent e0103647e6
commit 91414f764d
4 changed files with 64 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
ghost/portal/src/components/TriggerButton.js
View file

@ -22,20 +22,17 @@ const ICON_MAPPING = {
const Styles = ({brandColor, hasText}) => {
const frame = {
...(!hasText ? {width: '60px'} : {})
...(!hasText ? {width: '105px'} : {})
};
return {
frame: {
zIndex: '3999998',
position: 'fixed',
bottom: '28px',
right: '28px',
bottom: '0',
right: '0',
width: '500px',
maxWidth: '500px',
height: '60px',
// boxShadow: '0 3.2px 3.6px rgba(0, 0, 0, 0.024), 0 8.8px 10px rgba(0, 0, 0, 0.035), 0 21.1px 24.1px rgba(0, 0, 0, 0.046), 0 70px 80px rgba(0, 0, 0, 0.07)',
boxShadow: 'rgba(0, 0, 0, 0.24) 0px 6px 16px -3px',
borderRadius: '999px',
height: '98px',
animation: '250ms ease 0s 1 normal none running animation-bhegco',
transition: 'opacity 0.3s ease 0s',
overflow: 'hidden',
@ -176,10 +173,13 @@ class TriggerButtonContent extends React.Component {
render() {
const hasText = this.hasText();
const {member} = this.context;
const triggerBtnClass = member ? 'halo' : '';
if (hasText) {
return (
<div className='gh-portal-triggerbtn-wrapper' onClick={e => this.onToggle(e)}>
<div className='gh-portal-triggerbtn-container with-label' ref={this.container}>
<div className='gh-portal-triggerbtn-wrapper' ref={this.container}>
<div className='gh-portal-triggerbtn-container with-label' onClick={e => this.onToggle(e)}>
{this.renderTriggerIcon()}
{this.renderText()}
</div>
@ -187,8 +187,8 @@ class TriggerButtonContent extends React.Component {
);
}
return (
<div className='gh-portal-triggerbtn-wrapper' onClick={e => this.onToggle(e)}>
<div className='gh-portal-triggerbtn-container'>
<div className='gh-portal-triggerbtn-wrapper'>
<div className={'gh-portal-triggerbtn-container ' + triggerBtnClass} onClick={e => this.onToggle(e)}>
{this.renderTriggerIcon()}
</div>
</div>
@ -249,7 +249,7 @@ export default class TriggerButton extends React.Component {
}
return (
<Frame style={frameStyle} title="membersjs-trigger" head={this.renderFrameStyles()}>
<Frame className='gh-portal-triggerbtn-iframe' style={frameStyle} title="membersjs-trigger" head={this.renderFrameStyles()}>
<TriggerButtonContent isPopupOpen={showPopup} updateWidth={width => this.onWidthChange(width)} />
</Frame>
);

58
ghost/portal/src/components/TriggerButton.styles.js
View file

@ -3,29 +3,57 @@ import {AvatarStyles} from './common/MemberGravatar';
const TriggerButtonStyles = `
.gh-portal-triggerbtn-wrapper {
display: inline-flex;
align-items: flex-start;
justify-content: flex-end;
height: 100%;
opacity: 1;
transition: transform 0.16s linear 0s; opacity 0.08s linear 0s;
user-select: none;
line-height: 1;
padding: 10px 28px 0 17px;
}
.gh-portal-triggerbtn-wrapper span {
margin-bottom: 1px;
}
.gh-portal-triggerbtn-container {
position: relative;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
opacity: 1;
transform: rotate(0deg) scale(1);
height: 100%;
transition: transform 0.16s linear 0s; opacity 0.08s linear 0s;
overflow: hidden;
user-select: none;
background: var(--brandcolor);
line-height: 1;
height: 60px;
min-width: 60px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 8px 16px -2px;
border-radius: 999px;
transition: opacity 0.3s ease;
}
.gh-portal-triggerbtn-wrapper span {
margin-bottom: 1px;
.gh-portal-triggerbtn-container:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0);
transition: background 0.3s ease;
}
.gh-portal-triggerbtn-container {
display: flex;
align-items: center;
padding: 0 24px;
.gh-portal-triggerbtn-container:hover:before {
background: rgba(255, 255, 255, 0.08);
}
.gh-portal-triggerbtn-container.halo:before {
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border: 4px solid rgba(255, 255, 255, 0.15);
}
.gh-portal-triggerbtn-container.with-label {
@ -33,7 +61,7 @@ const TriggerButtonStyles = `
}
.gh-portal-avatar {
margin-bottom: 16px !important;
margin-bottom: 0px !important;
width: 60px;
height: 60px;
}

12
ghost/portal/src/components/common/ActionButton.js
View file

@ -15,16 +15,8 @@ export const ActionButtonStyles = `
border: none;
}
.gh-portal-btn-primary:hover::before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: "";
background: rgba(255, 255, 255, 0.08);
border-radius: 5px;
border: none;
.gh-portal-btn-primary:hover {
opacity: 0.92 !important;
}
.gh-portal-btn-primary:disabled:hover::before {

14
ghost/portal/src/components/common/MemberGravatar.js
View file

@ -8,19 +8,19 @@ export const AvatarStyles = `
align-items: center;
justify-content: center;
overflow: hidden;
margin-bottom: 8px;
margin: 0 0 8px 0;
border-radius: 999px;
}
.gh-portal-avatar img {
position: absolute;
display: block;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
width: calc(100% + 2px);
height: calc(100% + 2px);
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
width: calc(100% + 4px);
height: calc(100% + 4px);
opacity: 1;
max-width: unset;
}