From 803e13b32cf0ff8b496649fb0a4d6e32400e98a4 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 14 Jul 2021 22:23:40 +0200 Subject: feat(ui): Migrate to PatternFly 4 design framework This change is a rewrite of the existing OpenDC frontend in order to migrate to the PatternFly 4 design framework. PatternFly is used by Red Hat for various computing related services such as OpenShift, Red Hat Virtualization and Cockpit. Since their design requirements are very similar to those of OpenDC (modeling computing services), migrating to PatternFly 4 allows us to re-use design choices from these services. See https://www.patternfly.org/v4/ for more information about PatternFly. --- .../src/components/not-found/BlinkingCursor.js | 6 --- .../not-found/BlinkingCursor.module.scss | 13 ----- .../src/components/not-found/CodeBlock.js | 28 ---------- .../src/components/not-found/CodeBlock.module.scss | 4 -- .../src/components/not-found/TerminalWindow.js | 37 ------------- .../not-found/TerminalWindow.module.scss | 61 ---------------------- 6 files changed, 149 deletions(-) delete mode 100644 opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js delete mode 100644 opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.module.scss delete mode 100644 opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js delete mode 100644 opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.module.scss delete mode 100644 opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js delete mode 100644 opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.module.scss (limited to 'opendc-web/opendc-web-ui/src/components/not-found') diff --git a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js b/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js deleted file mode 100644 index 03a4894b..00000000 --- a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react' -import { blinkingCursor } from './BlinkingCursor.module.scss' - -const BlinkingCursor = () => _ - -export default BlinkingCursor diff --git a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.module.scss b/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.module.scss deleted file mode 100644 index aba0c604..00000000 --- a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.module.scss +++ /dev/null @@ -1,13 +0,0 @@ -.blinkingCursor { - animation: blink 1s step-end infinite; -} - -@keyframes blink { - from, - to { - color: #eeeeee; - } - 50% { - color: #333333; - } -} diff --git a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js b/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js deleted file mode 100644 index 6ded4350..00000000 --- a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react' -import { codeBlock } from './CodeBlock.module.scss' - -const CodeBlock = () => { - const textBlock = - ' oo oooo oo
' + - ' oo oo oo oo
' + - ' oo oo oo oo
' + - ' oooooo oo oo oooooo
' + - ' oo oo oo oo
' + - ' oo oooo oo
' - const charList = textBlock.split('') - - // Binary representation of the string "OpenDC!" ;) - const binaryString = '01001111011100000110010101101110010001000100001100100001' - - let binaryIndex = 0 - for (let i = 0; i < charList.length; i++) { - if (charList[i] === 'o') { - charList[i] = binaryString[binaryIndex] - binaryIndex++ - } - } - - return
-} - -export default CodeBlock diff --git a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.module.scss b/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.module.scss deleted file mode 100644 index 8af3ee6d..00000000 --- a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.module.scss +++ /dev/null @@ -1,4 +0,0 @@ -.codeBlock { - white-space: pre-wrap; - margin-top: 60px; -} diff --git a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js deleted file mode 100644 index e6200b10..00000000 --- a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import Link from 'next/link' -import BlinkingCursor from './BlinkingCursor' -import CodeBlock from './CodeBlock' -import { terminalWindow, terminalHeader, terminalBody, segfault, subTitle, homeBtn } from './TerminalWindow.module.scss' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faHome } from '@fortawesome/free-solid-svg-icons' - -const TerminalWindow = () => ( -
-
Terminal -- bash
-
-
- $ status -
- opendc[4264]: segfault at 0000051497be459d1 err 12 in libopendc.9.0.4 -
- opendc[4269]: segfault at 000004234855fc2db err 3 in libopendc.9.0.4 -
- opendc[4270]: STDERR Page does not exist -
-
- -
- Got lost? - -
- - - GET ME BACK TO OPENDC - - -
-
-) - -export default TerminalWindow diff --git a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.module.scss b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.module.scss deleted file mode 100644 index 614852d3..00000000 --- a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.module.scss +++ /dev/null @@ -1,61 +0,0 @@ -.terminalWindow { - display: block; - align-self: center; - - margin: auto; - - user-select: none; - cursor: default; - - overflow: hidden; - - box-shadow: 5px 5px 20px #444444; -} - -.terminalHeader { - font-family: monospace; - background: #cccccc; - color: #444444; - height: 30px; - line-height: 30px; - padding-left: 10px; - - border-top-left-radius: 7px; - border-top-right-radius: 7px; -} - -.terminalBody { - font-family: monospace; - text-align: center; - background-color: #333333; - color: #eeeeee; - padding: 10px; - - height: 100%; -} - -.segfault { - text-align: left; -} - -.subTitle { - margin-top: 20px; -} - -.homeBtn { - margin-top: 10px; - padding: 5px; - display: inline-block; - border: 1px solid #eeeeee; - color: #eeeeee; - text-decoration: none; - cursor: pointer; - - transition: all 200ms; - - &:hover, - &:active { - background: #eeeeee; - color: #333333; - } -} -- cgit v1.2.3