From 99a8ae9746204a9ad8d8b73cb62489b7d8920f98 Mon Sep 17 00:00:00 2001 From: x1unix Date: Sun, 27 Mar 2022 21:07:43 +0200 Subject: [PATCH 01/10] web: add status bar skeleton --- .../components/core/StatusBar/StatusBar.css | 27 ++++++++++++++ .../components/core/StatusBar/StatusBar.tsx | 35 +++++++++++++++++++ .../core/StatusBar/StatusBarButton.css | 35 +++++++++++++++++++ .../core/StatusBar/StatusBarButton.tsx | 25 +++++++++++++ web/src/components/core/StatusBar/index.ts | 2 ++ web/src/components/pages/Playground.tsx | 2 ++ web/src/components/utils/EllipsisText.css | 15 ++++++++ web/src/components/utils/EllipsisText.tsx | 12 +++++++ 8 files changed, 153 insertions(+) create mode 100644 web/src/components/core/StatusBar/StatusBar.css create mode 100644 web/src/components/core/StatusBar/StatusBar.tsx create mode 100644 web/src/components/core/StatusBar/StatusBarButton.css create mode 100644 web/src/components/core/StatusBar/StatusBarButton.tsx create mode 100644 web/src/components/core/StatusBar/index.ts create mode 100644 web/src/components/utils/EllipsisText.css create mode 100644 web/src/components/utils/EllipsisText.tsx diff --git a/web/src/components/core/StatusBar/StatusBar.css b/web/src/components/core/StatusBar/StatusBar.css new file mode 100644 index 00000000..b4492c59 --- /dev/null +++ b/web/src/components/core/StatusBar/StatusBar.css @@ -0,0 +1,27 @@ +:root { + --color-idle: #3a96dd; + --color-busy: #cc6633; +} + +.StatusBar { + display: flex; + flex-direction: row; + color: #fff; + background-color: var(--color-idle); + padding: 0 7px; + justify-content: space-between; + height: 22px; +} + +.StatusBar.StatusBar--busy { + background-color: var(--color-busy); +} + +.StatusBar__side-left, +.StatusBar__side-right { + display: flex; + flex-direction: row; +} + +.StatusBar__side-right { +} diff --git a/web/src/components/core/StatusBar/StatusBar.tsx b/web/src/components/core/StatusBar/StatusBar.tsx new file mode 100644 index 00000000..415a20e4 --- /dev/null +++ b/web/src/components/core/StatusBar/StatusBar.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import EllipsisText from '~/components/utils/EllipsisText'; +import StatusBarButton from '~/components/core/StatusBar/StatusBarButton'; +import './StatusBar.css'; + +interface Props { + busy?: boolean +} + +const StatusBar: React.FC = () => { + return ( +
+
+ + 0 Errors + + + Build failed + + + + Building program + + +
+
+ {/**/} + {/* 0 Errors*/} + {/**/} +
+
+ ); +}; + +export default StatusBar; diff --git a/web/src/components/core/StatusBar/StatusBarButton.css b/web/src/components/core/StatusBar/StatusBarButton.css new file mode 100644 index 00000000..15ff68c4 --- /dev/null +++ b/web/src/components/core/StatusBar/StatusBarButton.css @@ -0,0 +1,35 @@ +.StatusBarButton { + color: #fff; + border: 0; + background: transparent; + font-family: inherit; + font-size: 14px; + font-weight: 400; + cursor: pointer; + display: flex; + height: 100%; + padding: 0 5px; + white-space: pre; + align-items: center; + text-overflow: ellipsis; + overflow: hidden; + outline-width: 0; + margin: 0 3px; +} + +.StatusBarButton__label { + margin-left: 0.3em; + font-size: 12px; +} + +.StatusBarButton__icon { + font-size: 12px; +} + +.StatusBarButton:hover { + background: rgba(255, 255, 255, 0.1); +} + +.StatusBarButton:active { + background: rgba(255, 255, 255, 0.2); +} diff --git a/web/src/components/core/StatusBar/StatusBarButton.tsx b/web/src/components/core/StatusBar/StatusBarButton.tsx new file mode 100644 index 00000000..d45c382a --- /dev/null +++ b/web/src/components/core/StatusBar/StatusBarButton.tsx @@ -0,0 +1,25 @@ +import React, {CSSProperties, MouseEventHandler} from 'react'; +import { FontIcon } from '@fluentui/react/lib/Icon'; +import './StatusBarButton.css'; + +interface Props { + iconName?: string + disabled?: boolean + onClick?: MouseEventHandler + style?: CSSProperties +} + +const StatusBarButton: React.FC = ({iconName, children, ...props}) => ( + +); + +export default StatusBarButton; diff --git a/web/src/components/core/StatusBar/index.ts b/web/src/components/core/StatusBar/index.ts new file mode 100644 index 00000000..38f630f4 --- /dev/null +++ b/web/src/components/core/StatusBar/index.ts @@ -0,0 +1,2 @@ +import StatusBar from './StatusBar'; +export default StatusBar; diff --git a/web/src/components/pages/Playground.tsx b/web/src/components/pages/Playground.tsx index 0878dd7b..146ac6aa 100644 --- a/web/src/components/pages/Playground.tsx +++ b/web/src/components/pages/Playground.tsx @@ -7,6 +7,7 @@ import { Header } from '~/components/core/Header'; import CodeEditor from '~/components/editor/CodeEditor'; import FlexContainer from '~/components/editor/FlexContainer'; import ResizablePreview from '~/components/preview/ResizablePreview'; +import StatusBar from '~/components/core/StatusBar'; import './Playground.css'; @@ -20,6 +21,7 @@ const Playground = connect()(function (props: any) { + ; }); diff --git a/web/src/components/utils/EllipsisText.css b/web/src/components/utils/EllipsisText.css new file mode 100644 index 00000000..aed3b9c3 --- /dev/null +++ b/web/src/components/utils/EllipsisText.css @@ -0,0 +1,15 @@ +@keyframes ellipsis-text { + 0% { content: ''; } + 25% { content: '.'; } + 50% { content: '..'; } + 75% { content: '...'; } + 100% { content: ''; } +} + +.EllipsisText {} + +.EllipsisText::after { + display: inline-block; + animation: ellipsis-text steps(1, end) 2s infinite; + content: ''; +} diff --git a/web/src/components/utils/EllipsisText.tsx b/web/src/components/utils/EllipsisText.tsx new file mode 100644 index 00000000..b0151dd1 --- /dev/null +++ b/web/src/components/utils/EllipsisText.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import './EllipsisText.css'; + +interface Props {} + +const EllipsisText: React.FC = ({children, ...props}) => ( + + {children} + +); + +export default EllipsisText; From 0b26e088ab224637aebf0a72a47f7a9912c3f406 Mon Sep 17 00:00:00 2001 From: x1unix Date: Sun, 27 Mar 2022 21:21:21 +0200 Subject: [PATCH 02/10] web: add StatusBarItem --- .../components/core/StatusBar/StatusBar.tsx | 14 +++--- .../core/StatusBar/StatusBarButton.tsx | 25 ----------- ...{StatusBarButton.css => StatusBarItem.css} | 26 ++++++++--- .../core/StatusBar/StatusBarItem.tsx | 44 +++++++++++++++++++ 4 files changed, 71 insertions(+), 38 deletions(-) delete mode 100644 web/src/components/core/StatusBar/StatusBarButton.tsx rename web/src/components/core/StatusBar/{StatusBarButton.css => StatusBarItem.css} (51%) create mode 100644 web/src/components/core/StatusBar/StatusBarItem.tsx diff --git a/web/src/components/core/StatusBar/StatusBar.tsx b/web/src/components/core/StatusBar/StatusBar.tsx index 415a20e4..0951c2c2 100644 --- a/web/src/components/core/StatusBar/StatusBar.tsx +++ b/web/src/components/core/StatusBar/StatusBar.tsx @@ -1,6 +1,6 @@ import React from 'react'; import EllipsisText from '~/components/utils/EllipsisText'; -import StatusBarButton from '~/components/core/StatusBar/StatusBarButton'; +import StatusBarItem from '~/components/core/StatusBar/StatusBarItem'; import './StatusBar.css'; interface Props { @@ -11,17 +11,17 @@ const StatusBar: React.FC = () => { return (
- + 0 Errors - - + + Build failed - - + + Building program - +
{/**/} diff --git a/web/src/components/core/StatusBar/StatusBarButton.tsx b/web/src/components/core/StatusBar/StatusBarButton.tsx deleted file mode 100644 index d45c382a..00000000 --- a/web/src/components/core/StatusBar/StatusBarButton.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, {CSSProperties, MouseEventHandler} from 'react'; -import { FontIcon } from '@fluentui/react/lib/Icon'; -import './StatusBarButton.css'; - -interface Props { - iconName?: string - disabled?: boolean - onClick?: MouseEventHandler - style?: CSSProperties -} - -const StatusBarButton: React.FC = ({iconName, children, ...props}) => ( - -); - -export default StatusBarButton; diff --git a/web/src/components/core/StatusBar/StatusBarButton.css b/web/src/components/core/StatusBar/StatusBarItem.css similarity index 51% rename from web/src/components/core/StatusBar/StatusBarButton.css rename to web/src/components/core/StatusBar/StatusBarItem.css index 15ff68c4..0c00d9e6 100644 --- a/web/src/components/core/StatusBar/StatusBarButton.css +++ b/web/src/components/core/StatusBar/StatusBarItem.css @@ -1,11 +1,10 @@ -.StatusBarButton { +.StatusBarItem { color: #fff; border: 0; background: transparent; font-family: inherit; font-size: 14px; font-weight: 400; - cursor: pointer; display: flex; height: 100%; padding: 0 5px; @@ -17,19 +16,34 @@ margin: 0 3px; } -.StatusBarButton__label { +.StatusBarItem.StatusBarItem--button { + cursor: pointer; +} + +.StatusBarItem.StatusBarItem--text { + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; +} + +.StatusBarItem__label { margin-left: 0.3em; font-size: 12px; } -.StatusBarButton__icon { +.StatusBarItem__icon { font-size: 12px; } -.StatusBarButton:hover { +.StatusBarItem.StatusBarItem--button:not([disabled]):hover { background: rgba(255, 255, 255, 0.1); } -.StatusBarButton:active { +.StatusBarItem.StatusBarItem--button:not([disabled]):active { background: rgba(255, 255, 255, 0.2); } + +.StatusBarItem.StatusBarItem--button[disabled] { + cursor: not-allowed; + opacity: 0.3; +} diff --git a/web/src/components/core/StatusBar/StatusBarItem.tsx b/web/src/components/core/StatusBar/StatusBarItem.tsx new file mode 100644 index 00000000..aadd7652 --- /dev/null +++ b/web/src/components/core/StatusBar/StatusBarItem.tsx @@ -0,0 +1,44 @@ +import React, {CSSProperties, MouseEventHandler} from 'react'; +import { FontIcon } from '@fluentui/react/lib/Icon'; +import './StatusBarItem.css'; + +interface Props { + iconName?: string + button?: boolean + disabled?: boolean + onClick?: MouseEventHandler + style?: CSSProperties +} + +const StatusBarItem: React.FC = ({iconName, button, children, ...props}) => { + if (button) { + return ( + + ) + } + + const { style } = props; + return ( +
+ { + iconName && ( + + ) + } + + {children} + +
+ ); +}; + +export default StatusBarItem; From f23afb9eb55a6761bdee7f40c80b2d49270eb013 Mon Sep 17 00:00:00 2001 From: x1unix Date: Sun, 27 Mar 2022 21:51:53 +0200 Subject: [PATCH 03/10] web: add link and button behaviors to StatusBarItem --- .../components/core/StatusBar/StatusBar.tsx | 20 ++++-- .../core/StatusBar/StatusBarItem.css | 9 +-- .../core/StatusBar/StatusBarItem.tsx | 67 +++++++++++++------ 3 files changed, 68 insertions(+), 28 deletions(-) diff --git a/web/src/components/core/StatusBar/StatusBar.tsx b/web/src/components/core/StatusBar/StatusBar.tsx index 0951c2c2..e26c94f9 100644 --- a/web/src/components/core/StatusBar/StatusBar.tsx +++ b/web/src/components/core/StatusBar/StatusBar.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import config from '~/services/config'; import EllipsisText from '~/components/utils/EllipsisText'; import StatusBarItem from '~/components/core/StatusBar/StatusBarItem'; import './StatusBar.css'; @@ -11,10 +12,16 @@ const StatusBar: React.FC = () => { return (
- + 0 Errors - + Build failed @@ -24,9 +31,12 @@ const StatusBar: React.FC = () => {
- {/**/} - {/* 0 Errors*/} - {/**/} +
); diff --git a/web/src/components/core/StatusBar/StatusBarItem.css b/web/src/components/core/StatusBar/StatusBarItem.css index 0c00d9e6..e0500368 100644 --- a/web/src/components/core/StatusBar/StatusBarItem.css +++ b/web/src/components/core/StatusBar/StatusBarItem.css @@ -14,9 +14,10 @@ overflow: hidden; outline-width: 0; margin: 0 3px; + text-decoration: none; } -.StatusBarItem.StatusBarItem--button { +.StatusBarItem.StatusBarItem--action { cursor: pointer; } @@ -35,15 +36,15 @@ font-size: 12px; } -.StatusBarItem.StatusBarItem--button:not([disabled]):hover { +.StatusBarItem.StatusBarItem--action:not([disabled]):hover { background: rgba(255, 255, 255, 0.1); } -.StatusBarItem.StatusBarItem--button:not([disabled]):active { +.StatusBarItem.StatusBarItem--action:not([disabled]):active { background: rgba(255, 255, 255, 0.2); } -.StatusBarItem.StatusBarItem--button[disabled] { +.StatusBarItem.StatusBarItem--action[disabled] { cursor: not-allowed; opacity: 0.3; } diff --git a/web/src/components/core/StatusBar/StatusBarItem.tsx b/web/src/components/core/StatusBar/StatusBarItem.tsx index aadd7652..1458c4a1 100644 --- a/web/src/components/core/StatusBar/StatusBarItem.tsx +++ b/web/src/components/core/StatusBar/StatusBarItem.tsx @@ -1,42 +1,71 @@ import React, {CSSProperties, MouseEventHandler} from 'react'; import { FontIcon } from '@fluentui/react/lib/Icon'; +import {Link} from 'react-router-dom'; import './StatusBarItem.css'; interface Props { iconName?: string + iconOnly?: boolean button?: boolean disabled?: boolean + href?: string + title?: string onClick?: MouseEventHandler style?: CSSProperties } -const StatusBarItem: React.FC = ({iconName, button, children, ...props}) => { - if (button) { - return ( - ) } - const { style } = props; + if (href) { + return ( + + { content } + + ) + } + + const { style, title } = props; return ( -
- { - iconName && ( - - ) - } - - {children} - +
+ { content }
); }; From 26c788b1026885046bb07538cacf10486cb2770e Mon Sep 17 00:00:00 2001 From: x1unix Date: Sun, 27 Mar 2022 23:40:07 +0200 Subject: [PATCH 04/10] web: add GitHub link --- web/public/github-mark-light-32px.png | Bin 0 -> 1571 bytes .../components/core/StatusBar/StatusBar.tsx | 28 ++++++++++++++---- .../core/StatusBar/StatusBarItem.css | 13 +++++++- .../core/StatusBar/StatusBarItem.tsx | 26 +++++++++++----- 4 files changed, 53 insertions(+), 14 deletions(-) create mode 100644 web/public/github-mark-light-32px.png diff --git a/web/public/github-mark-light-32px.png b/web/public/github-mark-light-32px.png new file mode 100644 index 0000000000000000000000000000000000000000..628da97c70890c73e59204f5b140c4e67671e92d GIT binary patch literal 1571 zcmaJ>c~BE~6izDPQq)#Nu*KOf(n^(VHY9;fiINM65``pc+9*v(mL$bwfCjbc%v9V{8r9iX|O%>Nr%pLD2qT{mty}c=LVleeamv znz3SOSm@kP8jThvOOq(56Yzh*fz(booe!uZij=BJC6+_lbvQ~B8nA2>kXdv_RDtRY z`5QXWWEySCe6vbTs^#f?J!WC*{1~RgVx!nJTJjQyO{dRANgx|FnymtGbD9%JmCh9^y)##j7{Dcqfn*1ta$rG89pJF6w-S7Z037$rr|y0;1Onp_ zGFJdT6Q!1C0AdVB0WOmpuV=AgAQ550Tn+-mivTtYPJmz*#75#_n9oV%!#rSOfmAfy zki%C~=fTp1{O#BLpJ|0jj#m6#|LRWit-vq3PE1z9ZqyvET4sX$-Icqy7t z<=aq5ff86AuBZBu6EjJsYWM0uejufWFTwPA7Su}0Bm$7KFb!q{Um_8~A{LUG#1l(l zSehUda@kU8LIRg9fkk2tZ;~ss5~R+mM<==F7hLHpxqLB>>PQS%Vc7b~?q!%T5+h8Q z4G=4Nzyi5WZ?^gkasJ{?Xhm`JC#WG6$1K2jb@=9&D3EgD#3UhGh#*21rJjulVXjCF zvp76q62jt0zzMG5C7DlfMgPl%C^3+~wf|}Lq=}jz|MmIcQjh1Ok6NjD$Em^Iv26D> z8tt_TnM9~^Tt8mflRGPOrrX|HtT3gG4LEuuk{g2Rn}QgJIa?gZo))!!=o_l9bvD%A zZ`aHajl8#~u?!4f7F#*b*->A=R2L)6!>saz?h>#wTXT-I(XmQ zx{84skS>k=i~i`(6k4C7;Zpfx%dCPVjPayMf8pugtGM=~s=Id1l#8MZJ1-73wV#Q3 zR3>v3%}jbQs1f_Z0xo;%=LILlA+nTpKI4ha%xWW}uqHrNao~&T4AY6m`P$_n-6h*g zhoX+e4n%~gl_lhe#s+AMb7d{5WzvYTa%6Q~si@@4{;s(0zU|H&P3fE+t{7X`S#Cj@ zC#vd}^4pcBD*77Ny5=j$h8EL2_t$O38$SQiJ6fPjJMimypr~MB2(&P0aI|h}$64<0 z>_~duqNjaT=DM^6+N{&B_lED;F2wrl?!4Lk*2((x!fmrcsw+=cI^qttuZ9C}-m~5E z-ryYVpL%^xR#&(0YI5hz<(}F7-p)?FPcyJO-zVO>%9ZDXJH8pnY;GJYFDQ>vd#j_* zRrd}L(r=!g+1#nQwsO?kpS`Qq8`NxE+Zy{gf7*_7J*U2V_|NpLo{iasj7VCg_V9&| ShohtYzipXxh2)4xTk = () => {
0 Errors - - Build failed - + {/**/} + {/* Build failed*/} + {/**/} Building program @@ -31,12 +33,26 @@ const StatusBar: React.FC = () => {
+ + WebAssembly + +
); diff --git a/web/src/components/core/StatusBar/StatusBarItem.css b/web/src/components/core/StatusBar/StatusBarItem.css index e0500368..ce5f57ec 100644 --- a/web/src/components/core/StatusBar/StatusBarItem.css +++ b/web/src/components/core/StatusBar/StatusBarItem.css @@ -28,7 +28,7 @@ } .StatusBarItem__label { - margin-left: 0.3em; + margin-left: 0.4em; font-size: 12px; } @@ -36,6 +36,10 @@ font-size: 12px; } +.StatusBarItem__icon--image { + height: 12px; +} + .StatusBarItem.StatusBarItem--action:not([disabled]):hover { background: rgba(255, 255, 255, 0.1); } @@ -48,3 +52,10 @@ cursor: not-allowed; opacity: 0.3; } + +@media (max-width: 640px) { + .StatusBarItem.StatusBarItem--hideOnMobile + .StatusBarItem__label { + display: none; + } +} diff --git a/web/src/components/core/StatusBar/StatusBarItem.tsx b/web/src/components/core/StatusBar/StatusBarItem.tsx index 1458c4a1..d7a8060b 100644 --- a/web/src/components/core/StatusBar/StatusBarItem.tsx +++ b/web/src/components/core/StatusBar/StatusBarItem.tsx @@ -6,21 +6,28 @@ import './StatusBarItem.css'; interface Props { iconName?: string iconOnly?: boolean + imageSrc?: string button?: boolean disabled?: boolean + hideTextOnMobile?: boolean href?: string title?: string onClick?: MouseEventHandler style?: CSSProperties } -const getItemContents = (iconName?: string, iconOnly?: boolean, children?) => ( +const getItemContents = ({iconName, iconOnly, imageSrc, children}) => ( <> { iconName && ( ) } + { + imageSrc && ( + + ) + } { !iconOnly && ( @@ -31,13 +38,18 @@ const getItemContents = (iconName?: string, iconOnly?: boolean, children?) => ( ) -const StatusBarItem: React.FC = ({iconName, iconOnly, href, button, children, ...props}) => { - const content = getItemContents(iconName, iconOnly, children); - +const StatusBarItem: React.FC = ({ + iconName, iconOnly, imageSrc, hideTextOnMobile, + href, button, children, ...props +}) => { + const content = getItemContents({iconName, iconOnly, children, imageSrc}); + const className = hideTextOnMobile ? ( + 'StatusBarItem StatusBarItem--hideOnMobile' + ) : 'StatusBarItem'; if (button) { return (