Add basic top bar
[MAILPOET-3102]
This commit is contained in:
31
assets/css/src/components/_top_bar.scss
Normal file
31
assets/css/src/components/_top_bar.scss
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
.top-bar {
|
||||||
|
align-items: center;
|
||||||
|
background-color: $color-white;
|
||||||
|
box-shadow:
|
||||||
|
0 -1px 0 0 $color-tertiary-light,
|
||||||
|
0 2px 4px 0 opacify($color-tertiary-light, .5);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
height: 64px;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0;
|
||||||
|
padding-left: $grid-gap;
|
||||||
|
padding-right: $grid-gap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-bar-logo {
|
||||||
|
height: 24px;
|
||||||
|
object-fit: contain;
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-bar-beamer {
|
||||||
|
align-items: center;
|
||||||
|
background-color: $color-white;
|
||||||
|
border: solid 2px $color-tertiary-light;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
height: 40px;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
}
|
@@ -57,6 +57,7 @@
|
|||||||
@import 'components/tags';
|
@import 'components/tags';
|
||||||
@import 'components/template_box';
|
@import 'components/template_box';
|
||||||
@import 'components/tooltips';
|
@import 'components/tooltips';
|
||||||
|
@import 'components/top_bar';
|
||||||
@import 'components-plugin/automatic-emails';
|
@import 'components-plugin/automatic-emails';
|
||||||
@import 'components-plugin/browser-preview';
|
@import 'components-plugin/browser-preview';
|
||||||
@import 'components-plugin/dynamic-segments';
|
@import 'components-plugin/dynamic-segments';
|
||||||
|
@@ -0,0 +1,22 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { TopBar } from '../top_bar';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Top Bar/No Children',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const TopBarWithoutChildren = () => (
|
||||||
|
<>
|
||||||
|
<div style={{
|
||||||
|
backgroundColor: '#bbb',
|
||||||
|
width: '100%',
|
||||||
|
position: 'fixed',
|
||||||
|
height: '100%',
|
||||||
|
top: '0px',
|
||||||
|
left: '0px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TopBar />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
7
assets/js/src/common/top_bar/beamer_icon.tsx
Normal file
7
assets/js/src/common/top_bar/beamer_icon.tsx
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export const BeamerIcon = () => (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
|
<path fill="#071C6D" d="M18.2 11.286L12.525 7.33c-.318-.221-.731-.221-1.049 0l-5.675 3.956c-.302.211-.463.587-.411.964l.946 6.923c.066.488.464.849.935.849h3.783V22h1.892v-1.978h3.783c.471 0 .87-.361.936-.849l.946-6.923c.051-.377-.109-.753-.411-.964zM12 9.341l4.654 3.245-.745 5.458H8.091l-.745-5.458L12 9.341zM12 2l10 7.321-1.084 1.62L12 4.415l-8.916 6.526L2 9.321 12 2zM8.926 14.087c0 1.636 1.273 2.968 2.838 2.968 1.564 0 2.837-1.332 2.837-2.968 0-1.635-1.273-2.967-2.837-2.967-1.565 0-2.838 1.332-2.838 2.967zm3.783 0c0 .545-.424.99-.945.99-.522 0-.946-.445-.946-.99 0-.545.424-.989.946-.989.52 0 .945.444.945.99z" />
|
||||||
|
</svg>
|
||||||
|
);
|
7
assets/js/src/common/top_bar/mailpoet_logo.tsx
Normal file
7
assets/js/src/common/top_bar/mailpoet_logo.tsx
Normal file
File diff suppressed because one or more lines are too long
16
assets/js/src/common/top_bar/top_bar.tsx
Normal file
16
assets/js/src/common/top_bar/top_bar.tsx
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { MailPoetLogo } from './mailpoet_logo';
|
||||||
|
import { BeamerIcon } from './beamer_icon';
|
||||||
|
|
||||||
|
export const TopBar = () => (
|
||||||
|
<div className="top-bar">
|
||||||
|
<div className="top-bar-logo">
|
||||||
|
<MailPoetLogo />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="top-bar-beamer">
|
||||||
|
<BeamerIcon />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
Reference in New Issue
Block a user