Include css as part of the editor

This commit is contained in:
Paulo Gustavo Veiga 2022-02-20 21:25:18 -08:00
parent 24b9cadf80
commit 619f4274cb
6 changed files with 496 additions and 24 deletions

7
packages/editor/src/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,227 @@
div#header {
width: 100%;
height:50px;
position: absolute;
top: 0;
z-index:1000;
}
div#headerNotifier {
border: 1px solid rgb(241, 163, 39);
background-color: rgb(252, 235, 192);
border-radius: 3px;
position: fixed;
padding: 5px 9px;
color: back;
white-space: nowrap;
margin-top: 5px;
display: none;
bottom: 10px;
}
div#toolbarRight {
float: right;
white-space: nowrap;
vertical-align: middle;
justify-content: center;
margin: 6px 10px;
height: 100%;
}
#account {
float: right;
display: inline;
}
#account >img {
width: 36x;
height: 36px;
}
#accountSettingsPanel{
padding:10px 10px;
}
#share {
margin: 0 30px;
float: right;
}
.actionButton {
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
user-select: none;
vertical-align: middle;
justify-content: center;
padding: 10px 25px;
font-size: 15px;
min-width: 64px;
box-sizing: border-box;
font-weight: 600;
border-radius: 9px;
color: white;
background-color: #ffa800;
}
.actionButton:hover {
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
div#toolbar {
width: 100%;
height: 50px;
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
background-color: #fff;
min-width: 900px;
overflow: hidden;
}
div#toolbar .buttonContainer {
height: 50px;
padding-top: 8px;
padding-right: 10px;
padding-left: 10px;
float: left;
border-left: 1px solid lightgray;
}
div#mapName >span {
border-radius: 4px;
float: left;
padding: 8px;
min-width: 30px;
font-weight: bold;
}
div#backToList {
height: 24px;
width: 24px;
float: left;
margin: 13px 20px;
}
/******************************************************************************************/
/* Buttons*/
/******************************************************************************************/
div#toolbar .buttonOn,
div#toolbar .buttonOff,
div#toolbar .buttonActive,
div#toolbar .buttonOn:hover {
width: 28px;
height: 28px;
float: left;
text-align: center;
z-index: 4;
margin-top: 3px;
padding-top: 2px;
padding-left: 2px;
margin-left: 3px;
}
div#toolbar .buttonOn:hover {
cursor: pointer;
opacity: 1;
}
div#toolbar .buttonOn {
opacity: 0.8;
}
div#toolbar .buttonOff {
opacity: 0.4;
}
div#exportAnchor {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
div#toolbar .buttonExtOn,
div#toolbar .buttonExtOff,
div#toolbar .buttonExtActive,
div#toolbar .buttonExtOn:hover {
width: 40px;
height: 28px;
float: left;
text-align: left;
z-index: 4;
margin-top: 3px;
padding-top: 2px;
padding-left: 5px;
margin-left: 3px;
}
div#toolbar .buttonExtOn:hover {
opacity: 1;
}
div#toolbar .buttonExtActive {
opacity: 1;
}
div#toolbar .buttonExtOn {
opacity: 0.8;
cursor: pointer
}
div#toolbar .buttonExtOff {
opacity: 0.4;
}
div#exportAnchor {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
/***************************************************************************************************/
/* Other toolbar styles */
/***************************************************************************************************/
.toolbarTip {
background-color: #000000;
padding: 5px 5px;
color: #f5f5f5;
font-size: 11px;
}
div#colorPalette {
border: 1px solid #bbb4d6;
display: none;
position: absolute;
z-index: 4;
width: 160px;
top: 89px;
}
div.toolbarPanelLink,
div.toolbarPanelLinkSelectedLink {
cursor: pointer;
color: black;
margin: 1px;
cursor: pointer;
font-size: 12px;
padding: 5px 10px;
font-weight: bold;
}
div.toolbarPanelLink:hover,
div.toolbarPanelLinkSelectedLink {
cursor: pointer;
background-color: #efefef;
}
.toolbarPaneTip {
background-color: rgb(228, 226, 210);
padding: 5px 5px;
color: #f5f5f5;
font-size: 11px;
border-radius: 6px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
border: 3px double rgb(190, 190, 190);
}

View File

@ -24,6 +24,7 @@ import PublicSvg from '../../../images/public.svg';
import HistorySvg from '../../../images/history.svg';
import PrintSvg from '../../../images/print.svg';
import AccountSvg from '../../../images/account.svg';
import './global-styled.css';
import { HeaderContainer, ToolbarButton, ToolbarButtonExt, ToolbarRightContainer } from './styled';
import ActionButton from '../action-button';

View File

@ -0,0 +1,231 @@
/********************************************************************************/
/* Header & Toolbar Styles */
/********************************************************************************/
@import "bootstrap.min.css";
html {
/* avoid bootstrap overriding font-size and breaking Mui */
font-size: initial;
}
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
}
div#mindplot {
position: relative;
top: 50px;
left: 0;
width: 100%;
height: 100%;
border: 0;
overflow: hidden;
opacity: 1;
background-color: #f2f2f2;
background-image: linear-gradient(#ebe9e7 1px, transparent 1px), linear-gradient(to right, #ebe9e7 1px, #f2f2f2 1px);
background-size: 50px 50px;
}
.notesTip {
background-color: #dfcf3c;
padding: 5px 15px;
color: #666666;
/*font-weight: bold;*/
/*width: 100px;*/
font-size: 13px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
.linkTip {
background-color: #dfcf3c;
padding: 5px 15px;
color: #666666;
/*font-weight: bold;*/
/*width: 100px;*/
font-size: 13px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
.keyboardShortcutTip {
background-color: black;
padding: 5px 15px;
color: white;
font-weight: bold;
font-size: 11px;
}
/** */
/* Modal dialogs definitions */
div.modalDialog {
position: fixed;
top: 50%;
left: 50%;
z-index: 11000;
width: 500px;
margin: -250px 0 0 -250px;
background-color: #ffffff;
border: 1px solid #999;
padding: 10px;
overflow: auto;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
div.modalDialog .content {
padding: 5px 5px;
}
div.modalDialog .title {
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
border-bottom: 1px solid #eee;
padding: 5px 15px;
font-size: 18px;
}
/*--- End Modal Dialog Form ---*/
.publishModalDialog .content {
height: 420px;
}
.exportModalDialog .content {
height: 400px;
}
.shareModalDialog .content {
height: 440px;
}
div.shareModalDialog {
width: 550px;
}
.panelIcon {
width: 20px;
height: 20px;
margin-left: 4px;
margin-top: 3px;
cursor: pointer
}
.panelIcon:hover {
background-color: #efefef;
}
.popover {
font-size: 13px;
max-width: none;
}
#floating-panel {
position: fixed;
display: flex;
flex-direction: column;
align-items: flex-end;
bottom: 20px;
right: 20px;
align-items: stretch;
}
div#position {
margin-top: 5px;
}
#position-button {
cursor: pointer;
border: solid black 1px;
width: 40px;
height: 40px;
background-position: center;
background-repeat: no-repeat;
background-size: 40px 40px;
background-color: #FFF;
border-radius: 8px;
}
#zoom-button {
width: 40px;
border: 0;
}
#zoom-plus,
#zoom-minus {
border: solid black 1px;
height: 40px;
width: 40px;
background-repeat: no-repeat;
background-size: 40px 40px;
background-position: center;
cursor: pointer;
background-color: #FFF;
}
#zoom-plus {
border-radius: 8px 8px 0 0;
}
#zoom-minus {
border-radius: 0 0 8px 8px;
}
div#shotcuts > img{
margin: 20px 0;
width: 40px;
height: 40px;
}
#keyboardTable {
font-family: Arial, verdana, serif;
font-size: 13px;
width: 100%;
}
#keyboardTable td {
padding: 3px;
white-space: nowrap;
}
#keyboardTable th {
padding: 5px;
white-space: nowrap;
}
#keyboardTable th {
background-color: #000000;
color: #ffffff;
}
div#tryInfoPanel {
position: absolute;
margin: auto;
text-align: center;
top: 80px;
right: 20px;
width: 200px;
height: 300px;
padding: 20px;
font-size: 15px;
border-radius: 9px;
background-color: white;
border: solid 2px #ffa800;
}
#tryInfoPanel > p {
justify-content: center;
padding-bottom: 20px;
}

View File

@ -5,9 +5,7 @@ import { IntlProvider } from 'react-intl';
import {
$notify,
buildDesigner,
LocalStorageManager,
PersistenceManager,
RESTPersistenceManager,
DesignerOptionsBuilder,
Designer,
DesignerKeyboard,
@ -16,7 +14,7 @@ import FR from './compiled-lang/fr.json';
import ES from './compiled-lang/es.json';
import EN from './compiled-lang/en.json';
import DE from './compiled-lang/de.json';
import './global-styled.css';
declare global {
var memoryPersistence: boolean;

View File

@ -4,11 +4,12 @@ module.exports = {
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
publicPath: '',
publicPath: '',
library: {
type: 'umd',
}, },
stats:{
},
},
stats: {
errorDetails: true
},
entry: {
@ -18,24 +19,31 @@ module.exports = {
devtool: 'source-map',
target: 'web',
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
extensions: ['.ts', '.tsx', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: '/node_modules/'
},
{
test: /\.(png|jpe?g|gif|svg)$/,
type: 'asset/inline',
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
],
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: '/node_modules/'
},
{
test: /\.(png|jpe?g|gif|svg)$/,
type: 'asset/inline',
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
}, {
test: /\.css$/i,
loader: 'style-loader'
},
{
test: /\.css$/,
loader: 'css-loader',
}
],
},
}
};