random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updating background images to be svgs

Browse Source
This commit is contained in:
mgabdev
2020-01-27 17:20:07 -05:00
parent 6c8eea5160
commit c00c202d39
20 changed files with 246 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/javascript/gabsocial/components/floating_action_button/assets/compose_icon.js Normal file
View File

@@ -0,0 +1,25 @@
const ComposeIcon = ({
className = 'compose-icon',
width = '26px',
height = '26px',
viewBox = '0 0 50 50'
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
width={width}
height={height}
viewBox={viewBox}
>
<g>
<path className='compose-icon__path' d="M 37.007812 16.101562 C 36.582031 15.675781 35.828125 15.675781 35.402344 16.101562 L 13.820312 37.703125 C 13.5625 37.960938 13.445312 38.328125 13.503906 38.6875 C 13.5625 39.050781 13.789062 39.359375 14.113281 39.523438 L 15.886719 40.410156 L 15.886719 43.394531 L 10.457031 44.945312 L 4.976562 39.460938 L 6.53125 34.027344 L 9.511719 34.027344 L 10.398438 35.800781 C 10.5625 36.128906 10.871094 36.355469 11.230469 36.414062 C 11.292969 36.425781 11.351562 36.429688 11.414062 36.429688 C 11.710938 36.429688 12 36.3125 12.214844 36.097656 L 33.800781 14.496094 C 34.011719 14.28125 34.132812 13.996094 34.132812 13.691406 C 34.132812 13.390625 34.011719 13.101562 33.800781 12.890625 L 29.625 8.710938 C 29.414062 8.5 29.125 8.378906 28.824219 8.378906 L 28.820312 8.378906 C 28.519531 8.382812 28.230469 8.503906 28.019531 8.714844 L 4.867188 32.09375 C 4.855469 32.105469 4.859375 32.121094 4.847656 32.132812 C 4.730469 32.261719 4.632812 32.40625 4.582031 32.582031 L 2.613281 39.480469 L 0.0429688 48.480469 C -0.0703125 48.878906 0.0429688 49.304688 0.332031 49.597656 C 0.550781 49.8125 0.839844 49.929688 1.136719 49.929688 C 1.238281 49.929688 1.34375 49.914062 1.445312 49.886719 L 10.4375 47.316406 L 17.332031 45.34375 C 17.355469 45.335938 17.367188 45.320312 17.386719 45.316406 C 17.460938 45.289062 17.523438 45.25 17.589844 45.210938 C 17.652344 45.171875 17.71875 45.136719 17.773438 45.089844 C 17.789062 45.074219 17.804688 45.070312 17.820312 45.058594 L 41.179688 21.886719 C 41.390625 21.675781 41.511719 21.386719 41.515625 21.082031 C 41.515625 20.78125 41.394531 20.492188 41.179688 20.277344 Z M 37.007812 16.101562"/>
<path className='compose-icon__path' d="M 48.597656 8.101562 L 41.792969 1.289062 C 40.074219 -0.429688 37.089844 -0.429688 35.371094 1.292969 L 31.210938 5.488281 C 30.773438 5.933594 30.773438 6.648438 31.214844 7.09375 L 42.800781 18.6875 C 43.023438 18.910156 43.3125 19.019531 43.601562 19.019531 C 43.890625 19.019531 44.179688 18.910156 44.402344 18.691406 L 48.597656 14.527344 C 49.457031 13.667969 49.929688 12.527344 49.929688 11.316406 C 49.929688 10.101562 49.457031 8.960938 48.597656 8.101562 Z M 48.597656 8.101562"/>
</g>
<g>
<path className='compose-icon__path' d="M 17.015625 7.59375 L 10.40625 7.59375 L 10.40625 0.996094 C 10.40625 0.453125 9.964844 0 9.421875 0 L 8.578125 0 C 8.035156 0 7.59375 0.453125 7.59375 0.996094 L 7.59375 7.59375 L 0.984375 7.59375 C 0.441406 7.59375 0 8.03125 0 8.574219 L 0 9.425781 C 0 9.96875 0.441406 10.40625 0.984375 10.40625 L 7.59375 10.40625 L 7.59375 17.027344 C 7.59375 17.570312 8.035156 18 8.578125 18 L 9.421875 18 C 9.964844 18 10.40625 17.570312 10.40625 17.027344 L 10.40625 10.40625 L 17.015625 10.40625 C 17.558594 10.40625 18 9.96875 18 9.425781 L 18 8.574219 C 18 8.03125 17.558594 7.59375 17.015625 7.59375 Z M 17.015625 7.59375"/>
</g>
</svg>
)
export default ComposeIcon

14
app/javascript/gabsocial/components/floating_action_button/floating_action_button.js
View File

@@ -1,3 +1,5 @@
import ComposeIcon from './assets/compose_icon';
import './floating_action_button.scss';
export default class FloatingActionButton extends Component {
@@ -6,19 +8,17 @@ export default class FloatingActionButton extends Component {
message: PropTypes.string.isRequired,
};
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.message !== this.props.message) {
return true;
}
return false;
shouldComponentUpdate(nextProps) {
return nextProps.message !== this.props.message;
}
render() {
const { onClick, message } = this.props;
return (
<button onClick={onClick} className='floating-action-button' aria-label={message} />
<button onClick={onClick} className='floating-action-button' aria-label={message}>
<ComposeIcon />
</button>
)
}
}

17
app/javascript/gabsocial/components/floating_action_button/floating_action_button.scss
View File

@@ -3,19 +3,26 @@
position: fixed;
z-index: 1000;
border: none;
background-color: transparent;
background-color: $gab-brand-default;
padding-top: 6px;
padding-left: 10px;
@include size(61px, 52px);
@include circle(56px);
@include abs-position(auto, 14px, 14px, auto, false);
@include background-image('/assets/images/sprite-main-navigation.png', 161px 152px, -100px 0);
@media screen and (max-width: $nav-breakpoint-3) {
display: flex;
display: block !important;
}
&:hover,
&:focus,
&:active {
background-position: -100px -100px;
background-color: lighten($gab-brand-default, 5%);
}
.compose-icon {
&__path {
fill: #fff;
}
}
}