From c48abdc4632701954f3290bfa216b6bb4728b29d Mon Sep 17 00:00:00 2001 From: Hossein Moradi Davijani Date: Fri, 23 Oct 2020 20:04:09 +0330 Subject: [PATCH 1/5] Removed CSS files --- index.scss | 47 -------- package.json | 10 +- src/styles/_box.scss | 46 -------- src/styles/_button.scss | 61 ----------- src/styles/_common.scss | 64 ----------- src/styles/_expander.scss | 67 ------------ src/styles/_iconview.scss | 98 ----------------- src/styles/_iframe.scss | 43 -------- src/styles/_input.scss | 201 ----------------------------------- src/styles/_listview.scss | 91 ---------------- src/styles/_media.scss | 45 -------- src/styles/_menu.scss | 162 ---------------------------- src/styles/_panes.scss | 82 -------------- src/styles/_progressbar.scss | 68 ------------ src/styles/_statusbar.scss | 33 ------ src/styles/_tabs.scss | 74 ------------- src/styles/_toolbar.scss | 67 ------------ src/umd.js | 1 - webpack.config.js | 39 ------- 19 files changed, 3 insertions(+), 1296 deletions(-) delete mode 100644 index.scss delete mode 100644 src/styles/_box.scss delete mode 100644 src/styles/_button.scss delete mode 100644 src/styles/_common.scss delete mode 100644 src/styles/_expander.scss delete mode 100644 src/styles/_iconview.scss delete mode 100644 src/styles/_iframe.scss delete mode 100644 src/styles/_input.scss delete mode 100644 src/styles/_listview.scss delete mode 100644 src/styles/_media.scss delete mode 100644 src/styles/_menu.scss delete mode 100644 src/styles/_panes.scss delete mode 100644 src/styles/_progressbar.scss delete mode 100644 src/styles/_statusbar.scss delete mode 100644 src/styles/_tabs.scss delete mode 100644 src/styles/_toolbar.scss diff --git a/index.scss b/index.scss deleted file mode 100644 index 89604cb..0000000 --- a/index.scss +++ /dev/null @@ -1,47 +0,0 @@ -/*! - * OS.js - JavaScript Cloud/Web Desktop Platform - * - * Copyright (c) 2011-2020, Anders Evenrud - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions are met: - * - * 1. Redistributions of source code must retain the above copyright notice, this - * list of conditions and the following disclaimer - * 2. Redistributions in binary form must reproduce the above copyright notice, - * this list of conditions and the following disclaimer in the documentation - * and/or other materials provided with the distribution - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND - * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR - * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS - * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - * @author Anders Evenrud - * @licence Simplified BSD License - */ - -$base-margin: 1em; - -@import "./src/styles/_common.scss"; -@import "./src/styles/_box.scss"; -@import "./src/styles/_button.scss"; -@import "./src/styles/_input.scss"; -@import "./src/styles/_listview.scss"; -@import "./src/styles/_iconview.scss"; -@import "./src/styles/_media.scss"; -@import "./src/styles/_menu.scss"; -@import "./src/styles/_panes.scss"; -@import "./src/styles/_progressbar.scss"; -@import "./src/styles/_statusbar.scss"; -@import "./src/styles/_tabs.scss"; -@import "./src/styles/_toolbar.scss"; -@import "./src/styles/_iframe.scss"; -@import "./src/styles/_expander.scss"; diff --git a/package.json b/package.json index c3e06f7..ad012d1 100644 --- a/package.json +++ b/package.json @@ -4,15 +4,13 @@ "description": "OS.js GUI", "module": "dist/esm.js", "main": "dist/main.js", - "style": "dist/main.css", "scripts": { - "test": "npm run eslint && npm run stylelint", + "test": "npm run eslint", "eslint": "eslint index.js 'src/**/*.js'", "build": "webpack", "build:esm": "rollup -c", "watch": "webpack --watch", "watch:esm": "rollup -c --watch", - "stylelint": "stylelint index.scss src/**/*.scss", "prepublishOnly": "npm run test && rm ./dist/* && NODE_ENV=production npm run build && npm run build:esm" }, "repository": { @@ -27,15 +25,13 @@ "dist/esm.js.map", "dist/main.js", "dist/main.js.map", - "dist/main.css", - "dist/main.css.map", "CHANGELOG.md", "README.md", "LICENSE" ], "dependencies": { - "hyperapp": "^1.2.10", - "hyperapp-nestable": "^1.0.0" + "react": "^17.0.1", + "react-dom": "^17.0.1" }, "devDependencies": { "@osjs/dev-meta": "^1.0.2", diff --git a/src/styles/_box.scss b/src/styles/_box.scss deleted file mode 100644 index 60b7a1d..0000000 --- a/src/styles/_box.scss +++ /dev/null @@ -1,46 +0,0 @@ -/* - * OS.js - JavaScript Cloud/Web Desktop Platform - * - * Copyright (c) 2011-2020, Anders Evenrud - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions are met: - * - * 1. Redistributions of source code must retain the above copyright notice, this - * list of conditions and the following disclaimer - * 2. Redistributions in binary form must reproduce the above copyright notice, - * this list of conditions and the following disclaimer in the documentation - * and/or other materials provided with the distribution - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND - * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR - * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS - * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - * @author Anders Evenrud - * @licence Simplified BSD License - */ - -.osjs-gui-box { - display: flex; - overflow: hidden; - - & > .osjs-gui-menubar, - & > .osjs-gui-toolbar, - & > .osjs-gui-statusbar { - flex-shrink: 0; - } -} - -.osjs-gui-box > .osjs-gui, -.osjs-gui-box-container { - margin: $base-margin / 2; - flex-shrink: 0; -} diff --git a/src/styles/_button.scss b/src/styles/_button.scss deleted file mode 100644 index 25f0286..0000000 --- a/src/styles/_button.scss +++ /dev/null @@ -1,61 +0,0 @@ -/* - * OS.js - JavaScript Cloud/Web Desktop Platform - * - * Copyright (c) 2011-2020, Anders Evenrud - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions are met: - * - * 1. Redistributions of source code must retain the above copyright notice, this - * list of conditions and the following disclaimer - * 2. Redistributions in binary form must reproduce the above copyright notice, - * this list of conditions and the following disclaimer in the documentation - * and/or other materials provided with the distribution - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND - * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR - * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS - * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - * @author Anders Evenrud - * @licence Simplified BSD License - */ - -.osjs-gui-button { - & > button { - cursor: pointer; - display: block; - margin: 0; - padding: $base-margin / 2; - outline: 0 none; - width: 100%; - height: 100%; - overflow: hidden; - border: 0 none; - background: transparent; - box-sizing: border-box; - font-family: inherit; - font-size: inherit; - white-space: nowrap; - - &::-moz-focus-inner { - border: 0; - padding: 0; - } - - & > .osjs-icon + .osjs-label { - margin-left: $base-margin / 2; - } - - & > span { - vertical-align: middle; - } - } -} diff --git a/src/styles/_common.scss b/src/styles/_common.scss deleted file mode 100644 index 9a053a1..0000000 --- a/src/styles/_common.scss +++ /dev/null @@ -1,64 +0,0 @@ -/* - * OS.js - JavaScript Cloud/Web Desktop Platform - * - * Copyright (c) 2011-2020, Anders Evenrud - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions are met: - * - * 1. Redistributions of source code must retain the above copyright notice, this - * list of conditions and the following disclaimer - * 2. Redistributions in binary form must reproduce the above copyright notice, - * this list of conditions and the following disclaimer in the documentation - * and/or other materials provided with the distribution - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND - * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR - * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS - * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - * @author Anders Evenrud - * @licence Simplified BSD License - */ - -.osjs-gui { - display: flex; - position: relative; - min-width: 1em; - min-height: 1em; - box-sizing: border-box; -} - -.osjs-window-content > .osjs-gui-box:only-child { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; -} - -.osjs-gui-horizontal { - flex-direction: column; -} - -.osjs-gui-vertical { - flex-direction: row; -} - -.osjs-icon { - background-repeat: no-repeat; - background-position: 50% 50%; - background-color: transparent; - background-size: 100%; - min-width: 1rem; - min-height: 1rem; - display: inline-block; - vertical-align: middle; -} diff --git a/src/styles/_expander.scss b/src/styles/_expander.scss deleted file mode 100644 index 6047799..0000000 --- a/src/styles/_expander.scss +++ /dev/null @@ -1,67 +0,0 @@ -/* - * OS.js - JavaScript Cloud/Web Desktop Platform - * - * Copyright (c) 2011-2020, Anders Evenrud - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions are met: - * - * 1. Redistributions of source code must retain the above copyright notice, this - * list of conditions and the following disclaimer - * 2. Redistributions in binary form must reproduce the above copyright notice, - * this list of conditions and the following disclaimer in the documentation - * and/or other materials provided with the distribution - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND - * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR - * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS - * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - * @author Anders Evenrud - * @licence Simplified BSD License - */ - -.osjs-gui-expander { - display: block; - - &-wrapper { - display: flex; - flex-direction: column; - } - - &-header { - flex: 1 1; - display: flex; - padding: $base-margin / 2; - cursor: pointer; - - &-icon { - flex: 0 0; - min-width: 1em; - margin-right: $base-margin / 2; - - &::after { - content: '\25BC'; - } - - &[data-active="true"]::after { - content: '\25B2'; - } - } - - &-label { - flex: 1 1; - } - } - - &-content { - margin-top: $base-margin; - } -} diff --git a/src/styles/_iconview.scss b/src/styles/_iconview.scss deleted file mode 100644 index 62ca47d..0000000 --- a/src/styles/_iconview.scss +++ /dev/null @@ -1,98 +0,0 @@ -/* - * OS.js - JavaScript Cloud/Web Desktop Platform - * - * Copyright (c) 2011-2020, Anders Evenrud - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions are met: - * - * 1. Redistributions of source code must retain the above copyright notice, this - * list of conditions and the following disclaimer - * 2. Redistributions in binary form must reproduce the above copyright notice, - * this list of conditions and the following disclaimer in the documentation - * and/or other materials provided with the distribution - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND - * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR - * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS - * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - * @author Anders Evenrud - * @licence Simplified BSD License - */ - -//.osjs-gui-icon-view {} - -.osjs-gui-icon-view-wrapper { - flex-basis: 100%; - flex-wrap: wrap; - overflow: auto; -} - -.osjs-gui-icon-view-entry { - position: relative; - display: inline-block; - width: 6em; - height: 7em; - text-align: center; - overflow: visible; - z-index: 1; - - &.osjs__active { - z-index: 2; - - .osjs__label { - overflow: visible !important; - height: auto !important; - } - } - - * { - pointer-events: none; - } - - & > .osjs__container { - box-sizing: border-box; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - - & > .osjs__image { - padding: $base-margin / 2; - - & > .osjs-icon { - width: 3em; - height: 3em; - } - } - - & > .osjs__label { - padding: $base-margin / 2; - height: 2em; - line-height: 1.2; - overflow: hidden; - word-break: break-all; - - & > span { - display: block; - } - } - } - - /* - &:not(.osjs__active) .osjs__label { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - */ -} diff --git a/src/styles/_iframe.scss b/src/styles/_iframe.scss deleted file mode 100644 index 1bee8b5..0000000 --- a/src/styles/_iframe.scss +++ /dev/null @@ -1,43 +0,0 @@ -/* - * OS.js - JavaScript Cloud/Web Desktop Platform - * - * Copyright (c) 2011-2020, Anders Evenrud - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions are met: - * - * 1. Redistributions of source code must retain the above copyright notice, this - * list of conditions and the following disclaimer - * 2. Redistributions in binary form must reproduce the above copyright notice, - * this list of conditions and the following disclaimer in the documentation - * and/or other materials provided with the distribution - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND - * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR - * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS - * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - * @author Anders Evenrud - * @licence Simplified BSD License - */ - -.osjs-gui-iframe { - & > iframe { - display: block; - border: 0 none; - background-color: #fff; - position: absolute; - top: 0; - left: 0; - box-sizing: border-box; - width: 100%; - height: 100%; - } -} diff --git a/src/styles/_input.scss b/src/styles/_input.scss deleted file mode 100644 index 7b9b1e8..0000000 --- a/src/styles/_input.scss +++ /dev/null @@ -1,201 +0,0 @@ -/* - * OS.js - JavaScript Cloud/Web Desktop Platform - * - * Copyright (c) 2011-2020, Anders Evenrud - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions are met: - * - * 1. Redistributions of source code must retain the above copyright notice, this - * list of conditions and the following disclaimer - * 2. Redistributions in binary form must reproduce the above copyright notice, - * this list of conditions and the following disclaimer in the documentation - * and/or other materials provided with the distribution - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND - * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR - * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS - * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - * @author Anders Evenrud - * @licence Simplified BSD License - */ - -.osjs-gui-field { - position: relative; - - select, - textarea, - input { - display: block; - width: 100%; - height: 100%; - outline: none; - padding: $base-margin / 2; - margin: 0; - background: transparent; - border: 0 none; - box-sizing: border-box; - resize: none; - font-family: inherit; - font-size: inherit; - border-radius: 0; - - /* NOTE: Why did I add this ?! (#18) - user-select: auto; - */ - } -} - -.osjs-gui-textarea-field { - flex-direction: column; - - & > textarea { - flex-grow: 1; - } -} - -.osjs-gui-select-field { - & > div { - position: relative; - flex-basis: 100%; - - & > select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - } - - &::after { - content: '\21B4'; - position: absolute; - top: 50%; - transform: translateY(-50%); - display: inline-block; - width: 1em; - height: 1em; - right: $base-margin / 2; - } - } -} - -.osjs-gui-toggle-field { - & > label { - position: relative; - user-select: none !important; - display: flex; - - & > input { - display: block; - position: absolute; - visibility: hidden; - top: 0; - left: 0; - width: 100%; - height: 100%; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - - &:checked + span::after { - display: block; - } - } - - & > .osjs-toggle-input { - position: relative; - display: inline-block; - width: 1em; - height: 1em; - - &::after, - &::before { - content: ''; - position: absolute; - width: 1em; - height: 1em; - box-sizing: border-box; - } - - &::before { - z-index: 10; - } - - &::after { - content: '\274C'; - display: none; - font-size: 80%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 20; - } - } - - & > .osjs-toggle-label { - display: block; - flex-grow: 1; - position: relative; - padding-left: $base-margin / 2; - } - } -} - -.osjs-gui-field-label { - $half-margin: $base-margin / 2; - - display: flex; - flex-wrap: nowrap; - justify-content: left; - - & > label { - display: block; - } - - & > .osjs-gui { - margin: 0; - } - - &.osjs-gui-field-label-on-top { - flex-direction: column; - - & > label { - margin-bottom: $half-margin; - } - } - - &.osjs-gui-field-label-on-bottom { - flex-direction: column-reverse; - - & > label { - margin-top: $half-margin; - } - } - - &.osjs-gui-field-label-on-left { - flex-direction: row; - align-items: center; - - & > label { - margin-right: $half-margin; - } - - & > .osjs-gui { - flex: 1 1; - } - } -} - -.osjs-root[data-dir="rtl"] { - .osjs-gui-select-field > div::after { - right: auto; - left: $base-margin / 2; - } -} diff --git a/src/styles/_listview.scss b/src/styles/_listview.scss deleted file mode 100644 index 6c57153..0000000 --- a/src/styles/_listview.scss +++ /dev/null @@ -1,91 +0,0 @@ -/* - * OS.js - JavaScript Cloud/Web Desktop Platform - * - * Copyright (c) 2011-2020, Anders Evenrud - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions are met: - * - * 1. Redistributions of source code must retain the above copyright notice, this - * list of conditions and the following disclaimer - * 2. Redistributions in binary form must reproduce the above copyright notice, - * this list of conditions and the following disclaimer in the documentation - * and/or other materials provided with the distribution - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND - * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR - * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS - * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - * @author Anders Evenrud - * @licence Simplified BSD License - */ - -.osjs-gui-list-view { - overflow: hidden; - - .osjs-icon { - margin-right: $base-margin / 2; - } -} - -.osjs-gui-list-view-wrapper { - min-height: 4em; - display: flex; - flex-basis: 100%; - overflow: auto; - align-items: flex-start; - position: relative; -} - -.osjs-gui-list-view-pane { - min-width: 1em; - min-height: 1em; - position: relative; - flex: 1 1; - - &:last-child { - flex-grow: 1; - } -} - -.osjs-gui-list-view-cell, -.osjs-gui-list-view-header { - position: relative; - padding: $base-margin / 2; - flex-shrink: 0; - z-index: 1; - min-height: 1em; - display: flex; - - & > span { - min-height: 1rem; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - flex: 1 1; - line-height: 1; - } -} - -.osjs-gui-list-view-header { - z-index: 10; - position: sticky; - top: 0; -} - -.osjs-root[data-dir="rtl"] { - .osjs-gui-list-view { - .osjs-icon { - margin-right: 0; - margin-left: $base-margin / 2; - } - } -} diff --git a/src/styles/_media.scss b/src/styles/_media.scss deleted file mode 100644 index 5467d8a..0000000 --- a/src/styles/_media.scss +++ /dev/null @@ -1,45 +0,0 @@ -/* - * OS.js - JavaScript Cloud/Web Desktop Platform - * - * Copyright (c) 2011-2020, Anders Evenrud - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions are met: - * - * 1. Redistributions of source code must retain the above copyright notice, this - * list of conditions and the following disclaimer - * 2. Redistributions in binary form must reproduce the above copyright notice, - * this list of conditions and the following disclaimer in the documentation - * and/or other materials provided with the distribution - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND - * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR - * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS - * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - * @author Anders Evenrud - * @licence Simplified BSD License - */ - -.osjs-gui-image { - display: block; -} - -.osjs-gui-video { - display: block; - background-color: #000; - flex-basis: 100%; - - & > video { - background-color: #000; - width: 100%; - height: 100%; - } -} diff --git a/src/styles/_menu.scss b/src/styles/_menu.scss deleted file mode 100644 index c348c34..0000000 --- a/src/styles/_menu.scss +++ /dev/null @@ -1,162 +0,0 @@ -/* - * OS.js - JavaScript Cloud/Web Desktop Platform - * - * Copyright (c) 2011-2020, Anders Evenrud - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions are met: - * - * 1. Redistributions of source code must retain the above copyright notice, this - * list of conditions and the following disclaimer - * 2. Redistributions in binary form must reproduce the above copyright notice, - * this list of conditions and the following disclaimer in the documentation - * and/or other materials provided with the distribution - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND - * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR - * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS - * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - * @author Anders Evenrud - * @licence Simplified BSD License - */ - -.osjs-gui-menubar { - margin: 0 !important; - - & > div { - box-sizing: border-box; - - & > span { - margin: $base-margin / 2; - display: block; - pointer-events: none; - } - } -} - -.osjs-gui-menu { - position: absolute; - z-index: 9999999999; - - ul { - list-style-type: none; - margin: 0; - padding: 0; - - & > li { - margin: 0; - padding: 0; - - & > div { - position: relative; - cursor: pointer; - - & > ul { - display: none; - position: absolute; - z-index: 10; - left: 100%; - top: 0; - - &.clamp-right { - left: auto; - right: 100%; - } - } - - &:hover > ul { - display: block; - } - } - } - } -} - -.osjs-gui-menu-separator { - height: 1px; - display: block; - padding: $base-margin / 2; - box-sizing: border-box; - - &::after { - content: ''; - display: block; - background: rgba(#fff, 0.5); - height: 1px; - } -} - -.osjs-gui-menu-label { - display: flex; - padding: $base-margin / 2; - padding-right: 1.5em; - box-sizing: border-box; - position: relative; - pointer-events: none; - white-space: nowrap; - min-height: 1rem; - align-items: center; - - & > .osjs-icon { - margin-right: $base-margin / 2; - } - - & > .osjs-gui-menu-checkbox { - margin-right: $base-margin / 2; - - &::after { - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - content: '\2713'; - text-align: center; - display: none; - } - - &.active::after { - display: inline; - } - } -} - -.osjs-gui-menu-container { - &[data-has-children] > .osjs-gui-menu-label { - &::after { - content: '\25B6'; - position: absolute; - right: $base-margin / 2; - top: 50%; - transform: translateY(-50%); - } - } -} - -.osjs-root[data-dir="rtl"] { - .osjs-gui-menu-label { - padding-right: $base-margin / 2; - padding-left: 1.5em; - - & > .osjs-icon, - & > .osjs-gui-menu-checkbox { - margin-right: 0; - margin-left: $base-margin / 2; - } - } - - .osjs-gui-menu-container { - &[data-has-children] > .osjs-gui-menu-label { - &::after { - right: auto; - left: $base-margin / 2; - } - } - } -} diff --git a/src/styles/_panes.scss b/src/styles/_panes.scss deleted file mode 100644 index d2a6d9b..0000000 --- a/src/styles/_panes.scss +++ /dev/null @@ -1,82 +0,0 @@ -/* - * OS.js - JavaScript Cloud/Web Desktop Platform - * - * Copyright (c) 2011-2020, Anders Evenrud - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions are met: - * - * 1. Redistributions of source code must retain the above copyright notice, this - * list of conditions and the following disclaimer - * 2. Redistributions in binary form must reproduce the above copyright notice, - * this list of conditions and the following disclaimer in the documentation - * and/or other materials provided with the distribution - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND - * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR - * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS - * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - * @author Anders Evenrud - * @licence Simplified BSD License - */ - -.osjs-gui-panes { - height: 100%; - overflow: hidden; - position: relative; -} - -.osjs-gui-panes-inner { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: flex; - - &.osjs-gui-vertical { - & > .osjs-gui-panes-pane > .osjs-gui { - width: 100%; - } - - & > .osjs-gui-panes-spacer { - height: 100%; - width: $base-margin / 2; - min-width: $base-margin / 2; - cursor: ew-resize; - } - } - - &.osjs-gui-horizontal { - & > .osjs-gui-panes-pane > .osjs-gui { - height: 100%; - } - - & > .osjs-gui-panes-spacer { - width: 100%; - height: $base-margin / 2; - min-height: $base-margin / 2; - cursor: ns-resize; - } - } -} - -.osjs-gui-panes-pane { - position: relative; - margin: $base-margin / 2; - box-sizing: border-box; - overflow: hidden; - display: flex; - - &:last-of-type { - flex-grow: 1; - } -} diff --git a/src/styles/_progressbar.scss b/src/styles/_progressbar.scss deleted file mode 100644 index 97ade71..0000000 --- a/src/styles/_progressbar.scss +++ /dev/null @@ -1,68 +0,0 @@ -/* - * OS.js - JavaScript Cloud/Web Desktop Platform - * - * Copyright (c) 2011-2020, Anders Evenrud - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions are met: - * - * 1. Redistributions of source code must retain the above copyright notice, this - * list of conditions and the following disclaimer - * 2. Redistributions in binary form must reproduce the above copyright notice, - * this list of conditions and the following disclaimer in the documentation - * and/or other materials provided with the distribution - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND - * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR - * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS - * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - * @author Anders Evenrud - * @licence Simplified BSD License - */ - -.osjs-gui-progressbar-wrapper { - display: flex; - z-index: 1; - width: 100%; - line-height: 2; - padding: $base-margin / 2; - text-align: center; - min-height: $base-margin * 2; - position: relative; - box-sizing: border-box; - flex-grow: 1; -} - -.osjs-gui-progressbar-value { - position: absolute; - top: 0; - left: 0; - width: 0; - height: 100%; - z-index: 2; -} - -.osjs-gui-progressbar-label { - z-index: 3; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - - & > span { - display: inline-block; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } -} diff --git a/src/styles/_statusbar.scss b/src/styles/_statusbar.scss deleted file mode 100644 index 3685256..0000000 --- a/src/styles/_statusbar.scss +++ /dev/null @@ -1,33 +0,0 @@ -/* - * OS.js - JavaScript Cloud/Web Desktop Platform - * - * Copyright (c) 2011-2020, Anders Evenrud - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions are met: - * - * 1. Redistributions of source code must retain the above copyright notice, this - * list of conditions and the following disclaimer - * 2. Redistributions in binary form must reproduce the above copyright notice, - * this list of conditions and the following disclaimer in the documentation - * and/or other materials provided with the distribution - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND - * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR - * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS - * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - * @author Anders Evenrud - * @licence Simplified BSD License - */ - -.osjs-gui-statusbar { - white-space: nowrap; -} diff --git a/src/styles/_tabs.scss b/src/styles/_tabs.scss deleted file mode 100644 index a0a176a..0000000 --- a/src/styles/_tabs.scss +++ /dev/null @@ -1,74 +0,0 @@ -/* - * OS.js - JavaScript Cloud/Web Desktop Platform - * - * Copyright (c) 2011-2020, Anders Evenrud - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions are met: - * - * 1. Redistributions of source code must retain the above copyright notice, this - * list of conditions and the following disclaimer - * 2. Redistributions in binary form must reproduce the above copyright notice, - * this list of conditions and the following disclaimer in the documentation - * and/or other materials provided with the distribution - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND - * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR - * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS - * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - * @author Anders Evenrud - * @licence Simplified BSD License - */ - -.osjs-gui-tabs { - display: flex; - flex: 1 1; -} - -.osjs-gui-tabs-wrapper { - display: flex; - flex-grow: 1; - flex-direction: column; -} - -.osjs-gui-tabs-header { - display: flex; - flex-shrink: 0; - - & > div { - padding: $base-margin / 2; - cursor: pointer; - position: relative; - z-index: 2; - white-space: nowrap; - } -} - -.osjs-gui-tabs-panes { - position: relative; - z-index: 1; - flex-grow: 1; - display: flex; - overflow: hidden; - - & > div { - display: none; - padding: $base-margin / 2; - width: 100%; - overflow: auto; - - &.osjs__active { - display: flex; - flex-grow: 1; - flex-shrink: 1; - } - } -} diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss deleted file mode 100644 index 7665ea2..0000000 --- a/src/styles/_toolbar.scss +++ /dev/null @@ -1,67 +0,0 @@ -/* - * OS.js - JavaScript Cloud/Web Desktop Platform - * - * Copyright (c) 2011-2020, Anders Evenrud - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions are met: - * - * 1. Redistributions of source code must retain the above copyright notice, this - * list of conditions and the following disclaimer - * 2. Redistributions in binary form must reproduce the above copyright notice, - * this list of conditions and the following disclaimer in the documentation - * and/or other materials provided with the distribution - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND - * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR - * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS - * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - * @author Anders Evenrud - * @licence Simplified BSD License - */ - -.osjs-gui-toolbar { - display: flex; - - & > .osjs-gui { - flex-shrink: 0; - } - - &.osjs-gui-vertical { - & > .osjs-gui:not(:last-child) { - margin-right: $base-margin; - } - } - - &.osjs-gui-horizontal { - & > .osjs-gui:not(:last-child) { - margin-bottom: $base-margin; - } - } -} - -.osjs-root[data-dir="rtl"] { - .osjs-gui-toolbar { - &.osjs-gui-vertical { - & > .osjs-gui:not(:last-child) { - margin-right: 0; - margin-left: $base-margin; - } - } - - &.osjs-gui-horizontal { - & > .osjs-gui:not(:last-child) { - margin-bottom: 0; - margin-top: $base-margin; - } - } - } -} diff --git a/src/umd.js b/src/umd.js index 910bd05..1d0acb1 100644 --- a/src/umd.js +++ b/src/umd.js @@ -28,5 +28,4 @@ * @licence Simplified BSD License */ -import '../index.scss'; export * from '../index.js'; diff --git a/webpack.config.js b/webpack.config.js index ead4fba..949ad6e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,21 +1,7 @@ const path = require('path'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const mode = process.env.NODE_ENV || 'development'; const minimize = mode === 'production'; -const plugins = []; - -if (mode === 'production') { - plugins.push(new OptimizeCSSAssetsPlugin({ - cssProcessorOptions: { - discardComments: true, - map: { - inline: false - } - } - })); -} module.exports = { mode, @@ -33,33 +19,8 @@ module.exports = { optimization: { minimize, }, - plugins: [ - new MiniCssExtractPlugin({ - filename: '[name].css', - chunkFilename: '[id].css' - }), - ...plugins - ], module: { rules: [ - { - test: /\.(sa|sc|c)ss$/, - use: [ - MiniCssExtractPlugin.loader, - { - loader: 'css-loader', - options: { - sourceMap: true - } - }, - { - loader: 'sass-loader', - options: { - sourceMap: true - } - } - ] - }, { test: /\.js$/, use: { From 5e6d27f669839ff2a2079eb3428d875d8fccbddd Mon Sep 17 00:00:00 2001 From: Hossein Moradi Davijani Date: Sat, 31 Oct 2020 00:13:02 +0330 Subject: [PATCH 2/5] Rewrite components with React --- index.js | 1 - src/components/Box.js | 17 ++- src/components/BoxContainer.js | 11 +- src/components/BoxStyled.js | 11 +- src/components/Button.js | 33 ++--- src/components/Element.js | 59 ++++----- src/components/Expander.js | 85 +++++------- src/components/Icon.js | 29 ++-- src/components/IconView.js | 140 +++++++++----------- src/components/Iframe.js | 21 ++- src/components/Image.js | 25 ++-- src/components/Label.js | 2 - src/components/ListView.js | 180 +++++++++++++------------ src/components/Menu.js | 137 ++++++++++--------- src/components/Menubar.js | 53 ++++---- src/components/Panes.js | 111 +++++++--------- src/components/Progressbar.js | 53 ++++---- src/components/RangeField.js | 17 ++- src/components/SelectField.js | 56 ++++---- src/components/Statusbar.js | 13 +- src/components/Tabs.js | 78 ++++++----- src/components/TextField.js | 6 +- src/components/TextareaField.js | 17 ++- src/components/ToggleField.js | 48 +++---- src/components/Toolbar.js | 18 +-- src/components/Video.js | 52 ++++---- src/contextmenu.js | 225 -------------------------------- src/element.js | 34 ++--- src/provider.js | 108 --------------- 29 files changed, 630 insertions(+), 1010 deletions(-) delete mode 100644 src/contextmenu.js delete mode 100644 src/provider.js diff --git a/index.js b/index.js index 002b0b8..62dd175 100644 --- a/index.js +++ b/index.js @@ -53,4 +53,3 @@ export * from './src/components/RangeField'; export * from './src/components/Icon'; export * from './src/components/Expander'; export * from './src/components/Label'; -export * from './src/provider'; diff --git a/src/components/Box.js b/src/components/Box.js index 83749f5..390a48f 100644 --- a/src/components/Box.js +++ b/src/components/Box.js @@ -28,18 +28,17 @@ * @licence Simplified BSD License */ -import {h} from 'hyperapp'; -import {Element} from './Element'; +import { Element } from './Element'; /** * A flexbox * @param {BoxProperties} props Properties * @param {string} [props.orientation='horizontal'] Box orientation - * @param {h[]} children Children */ -export const Box = (props, children) => - h(Element, Object.assign({ - orientation: 'horizontal' - }, props, { - class: ['osjs-gui-box', props.class], - }), children); +export const Box = props => ( + +); diff --git a/src/components/BoxContainer.js b/src/components/BoxContainer.js index 3f42e8d..0d5ccfd 100644 --- a/src/components/BoxContainer.js +++ b/src/components/BoxContainer.js @@ -28,16 +28,13 @@ * @licence Simplified BSD License */ -import {h} from 'hyperapp'; -import {Element} from './Element'; +import { Element } from './Element'; /** * A flexbox container * @param {BoxProperties} props Properties * @param {string} [props.orientation='vertical'] Box orientation - * @param {h[]} children Children */ -export const BoxContainer = (props, children) => - h(Element, Object.assign({}, props, { - class: ['osjs-gui-box-container', props.class] - }), children); +export const BoxContainer = props => ( + +); diff --git a/src/components/BoxStyled.js b/src/components/BoxStyled.js index 312dea5..c728972 100644 --- a/src/components/BoxStyled.js +++ b/src/components/BoxStyled.js @@ -28,15 +28,12 @@ * @licence Simplified BSD License */ -import {h} from 'hyperapp'; -import {Element} from './Element'; +import { Element } from './Element'; /** * A styled flexbox container * @param {BoxProperties} props Properties - * @param {h[]} children Children */ -export const BoxStyled = (props, children) => - h(Element, Object.assign({}, props, { - class: ['osjs-gui-box-styled', props.class] - }), children); +export const BoxStyled = props => ( + +); diff --git a/src/components/Button.js b/src/components/Button.js index 5fae7f0..e1bd023 100644 --- a/src/components/Button.js +++ b/src/components/Button.js @@ -28,9 +28,8 @@ * @licence Simplified BSD License */ -import {h} from 'hyperapp'; -import {Icon} from './Icon'; -import {createField} from '../element'; +import { Icon } from './Icon'; +import { createField } from '../element'; /** * A button @@ -38,22 +37,16 @@ import {createField} from '../element'; * @param {string} [props.icon] Icon source * @param {string} [props.label] Use this as label instead of children * @param {BoxProperties} [props.box] Box Properties - * @param {h[]} children Children */ -export const Button = (props = {}, children = []) => - createField('button', props, { - }, (fieldProps) => { - const inner = []; - if (props.icon) { - inner.push(h(Icon, props.icon)); - } - - if (typeof props.label === 'string') { - inner.push(h('span', {class: 'osjs-label'}, props.label)); - } - - return h('button', fieldProps, [ - ...inner, - ...children - ]); +export const Button = ({ children, ...props }) => + createField('button', props, {}, fieldProps => { + return ( + + ); }); diff --git a/src/components/Element.js b/src/components/Element.js index 5df4f4f..8750586 100644 --- a/src/components/Element.js +++ b/src/components/Element.js @@ -28,11 +28,9 @@ * @licence Simplified BSD License */ -import {h} from 'hyperapp'; - /** * Elemet Box definition - * @property {string} [class] Container class name + * @property {string} [className] Container class name * @property {number} [grow] Flexbox grow value * @property {number} [shrink] Flexbox shrink value * @property {number|string} [basis] Flexbox basis value @@ -40,49 +38,39 @@ import {h} from 'hyperapp'; * @property {string} [justify] Flexbox justifyContent value * @property {number|string} [padding] Margin * @property {number|string} [margin] Margin - * @property {string} [key] Hyperapp element key - * @property {Function} [oncreate] Hyperapp oncreate function - * @property {Function} [onupdate] Hyperapp onupdate function - * @property {Function} [ondestroy] Hyperapp ondestroy function + * @property {string} [key] element key * @typedef BoxProperties */ -const unitValue = (value, unset) => typeof value === 'number' - ? `${value}px` - : (value === false ? unset : value); +const unitValue = (value, unset) => + typeof value === 'number' ? `${value}px` : value === false ? unset : value; const boxPropNames = { - grow: value => ({flexGrow: value}), - shrink: value => ({flexShrink: value}), - basis: value => ({flexBasis: unitValue(value, 'auto')}), - align: value => ({alignItems: value}), - justify: value => ({justifyContent: value}), - padding: value => ({margin: unitValue(value, '0')}), - margin: value => ({margin: unitValue(value, '0')}) + grow: value => ({ flexGrow: value }), + shrink: value => ({ flexShrink: value }), + basis: value => ({ flexBasis: unitValue(value, 'auto') }), + align: value => ({ alignItems: value }), + justify: value => ({ justifyContent: value }), + padding: value => ({ margin: unitValue(value, '0') }), + margin: value => ({ margin: unitValue(value, '0') }), }; /** * A generic OS.js GUI container * @param {Object} props Properties - * @param {h[]} children Children */ -export const Element = (props, children = []) => { - const givenClassNames = props.class instanceof Array - ? props.class - : [props.class]; +export const Element = ({children, ...props}) => { + const givenClassNames = + props.className instanceof Array ? props.className : [props.className]; - const classNames = [ - 'osjs-gui', - ...givenClassNames - ]; + const classNames = ['osjs-gui', ...givenClassNames]; if (props.orientation) { classNames.push('osjs-gui-' + props.orientation); } - const defaultStyle = typeof props.style === 'string' - ? {} - : Object.assign({}, props.style || {}); + const defaultStyle = + typeof props.style === 'string' ? {} : Object.assign({}, props.style || {}); const style = Object.keys(props).reduce((result, prop) => { const value = boxPropNames[prop] @@ -92,10 +80,11 @@ export const Element = (props, children = []) => { return Object.assign({}, result, value); }, defaultStyle); - return h('div', { - oncreate: props.oncreate, - ondestroy: props.ondestroy, - class: classNames.filter(s => !!s).join(' '), - style - }, children); + return ( +
!!s).join(' ')} + style={style}> + {children} +
+ ); }; diff --git a/src/components/Expander.js b/src/components/Expander.js index 1922596..a465d48 100644 --- a/src/components/Expander.js +++ b/src/components/Expander.js @@ -28,61 +28,44 @@ * @licence Simplified BSD License */ -import {h} from 'hyperapp'; -import {Element} from './Element'; -import nestable from 'hyperapp-nestable'; - -const view = (state, actions) => (props, children) => { - return h(Element, Object.assign({}, props.box || {}, { - class: ['osjs-gui-expander-wrapper'] - }), [ - h('div', { - class: 'osjs-gui-expander-header', - onclick: ev => actions.ontoggle({ - ev, - active: !state.active, - ontoggle: props.ontoggle - }) - }, [ - h('div', { - class: 'osjs-gui-expander-header-icon', - 'data-active': String(state.active) - }), - h('div', { - class: 'osjs-gui-expander-header-label' - }, props.label) - ]), - h('div', { - class: 'osjs-gui-expander-content', - style: { - display: state.active === false ? 'none' : undefined - } - }, children) - ]); -}; - -const inner = nestable({ - active: true -}, { - init: props => ({ - ative: props.active !== false - }), - ontoggle: ({ev, active, ontoggle}) => { - const cb = ontoggle || function() {}; - cb(ev, active); - return {active}; - } -}, view, 'div'); +import React from 'react'; +import { Element } from './Element'; /** * A status bar * @param {Object} props Properties * @param {boolean} [props.active] Active state - * @param {Function} [props.ontoggle] Toggle callback => (ev, active) + * @param {Function} [props.onToggle] Toggle callback => (ev, active) * @param {BoxProperties} [props.box] Box Properties - * @param {h[]} children Children */ -export const Expander = (props, children) => - h(inner, Object.assign({}, props, { - class: 'osjs-gui osjs-gui-expander' - }), children); +export const Expander = ({ children, ...props }) => { + const [active, setActive] = React.useState(Boolean(props.active)); + + const onToggle = ev => { + if (props.onToggle) { + props.onToggle(ev, !active); + } + + setActive(!active); + }; + + return ( +
+ +
+
+
{props.label}
+
+
+ {children} +
+ +
+ ); +}; diff --git a/src/components/Icon.js b/src/components/Icon.js index ce992b9..583c270 100644 --- a/src/components/Icon.js +++ b/src/components/Icon.js @@ -28,29 +28,24 @@ * @licence Simplified BSD License */ -import {h} from 'hyperapp'; - /** * An icon * @param {Object} props Properties * @param {string} props.src Icon src * @param {string} [props.name] Icon name - * @param {h[]} children Children */ -export const Icon = (props, children) => { - const i = props && typeof props === 'object' - ? props.src - : props; +export const Icon = props => { + const i = props && typeof props === 'object' ? props.src : props; - const n = props && typeof props === 'object' - ? props.name - : undefined; + const n = props && typeof props === 'object' ? props.name : undefined; - return h('i', { - 'data-icon': n, - class: 'osjs-icon', - style: { - backgroundImage: typeof props === 'string' ? `url(${i})` : undefined - } - }); + return ( + + ); }; diff --git a/src/components/IconView.js b/src/components/IconView.js index 86f7952..9808f45 100644 --- a/src/components/IconView.js +++ b/src/components/IconView.js @@ -28,91 +28,81 @@ * @licence Simplified BSD License */ -import {h} from 'hyperapp'; -import {doubleTap} from '../utils'; -import {Element} from './Element'; -import {Icon} from './Icon'; +import React from 'react'; +import { doubleTap } from '../utils'; +import { Element } from './Element'; +import { Icon } from './Icon'; const tapper = doubleTap(); -export const IconViewEntry = (entry, index, props) => () => { - const icon = entry.icon || {name: 'application-x-executable'}; +export const IconViewEntry = ({ entry, index, ...props }) => { + const elementRef = React.useRef(); + + const icon = entry.icon || { name: 'application-x-executable' }; const selected = props.selectedIndex === index; - return h('div', { - class: 'osjs-gui-icon-view-entry' + (selected ? ' osjs__active' : ''), - ontouchstart: (ev) => tapper(ev, () => props.onactivate({data: entry.data, index, ev})), - ondblclick: (ev) => props.onactivate({data: entry.data, index, ev}), - onclick: (ev) => props.onselect({data: entry.data, index, ev}), - oncontextmenu: (ev) => props.oncontextmenu({data: entry.data, index, ev}), - oncreate: (el) => props.oncreate({data: entry.data, index, el}) - }, [ - h('div', {class: 'osjs__container'}, [ - h('div', {class: 'osjs__image'}, [ - h(Icon, icon) - ]), - h('div', {class: 'osjs__label'}, [ - h('span', {}, entry.label) - ]) - ]) - ]); -}; + React.useEffect(() => { + props.onCreate({ data: entry.data, index, el: elementRef.current }); + }, []); -export const IconView = (props) => { - const inner = h('div', { - class: 'osjs-gui-icon-view-wrapper', - oncreate: el => (el.scrollTop = props.scrollTop), - onupdate: el => { - if (props.selectedIndex < 0) { - el.scrollTop = props.scrollTop; + return ( +
+ tapper(ev, () => props.onactivate({ data: entry.data, index, ev })) } - } - }, props.entries.map((entry, index) => { - return h(IconViewEntry(entry, index, props)); - })); + onDoubleClick={ev => props.onactivate({ data: entry.data, index, ev })} + onClick={ev => props.onselect({ data: entry.data, index, ev })} + onContextMenu={ev => + props.oncontextmenu({ data: entry.data, index, ev }) + }> +
+
+ +
+
+ {entry.label} +
+
+
+ ); +}; + +const defaultHandler = () => {}; - return h(Element, Object.assign({ - class: 'osjs-gui-icon-view' - }, props.box || {}), inner); +const defaultProps = { + selectedIndex: -1, + scrollTop: 0, + entries: [], + onSelect: defaultHandler, + onActivate: defaultHandler, + onContextMenu: defaultHandler, + onCreate: defaultHandler, }; -export const iconView = ({ - component: (state, actions) => { - const newProps = Object.assign({ - entries: [], - onselect: ({data, index, ev}) => { - actions.select({data, index, ev}); - actions.setSelectedIndex(index); - }, - onactivate: ({data, index, ev}) => { - actions.activate({data, index, ev}); - actions.setSelectedIndex(-1); - }, - oncontextmenu: ({data, index, ev}) => { - actions.select({data, index, ev}); - actions.contextmenu({data, index, ev}); - actions.setSelectedIndex(index); - }, - oncreate: (args) => { - actions.created(args); - } - }, state); +export const IconView = props => { + const elementRef = React.useRef(); + + const newProps = { ...defaultProps, ...props }; - return (props = {}) => IconView(Object.assign(newProps, props)); - }, + React.useEffect(() => { + elementRef.current.scrollTop = newProps.scrollTop; + }, []); - state: state => Object.assign({ - selectedIndex: -1, - scrollTop: 0 - }, state), + React.useEffect(() => { + if (newProps.selectedIndex < 0) { + elementRef.current.scrollTop = newProps.scrollTop; + } + }); - actions: actions => Object.assign({ - select: () => () => ({}), - activate: () => () => ({}), - contextmenu: () => () => ({}), - created: () => () => ({}), - setEntries: entries => () => ({entries}), - setScrollTop: scrollTop => state => ({scrollTop}), - setSelectedIndex: selectedIndex => state => ({selectedIndex}), - }, actions || {}) -}); + return ( + +
+ {newProps.entries.map((entry, index) => ( + + ))} +
+ + ); +}; diff --git a/src/components/Iframe.js b/src/components/Iframe.js index b3f7ab7..ae99a71 100644 --- a/src/components/Iframe.js +++ b/src/components/Iframe.js @@ -28,22 +28,17 @@ * @licence Simplified BSD License */ -import {h} from 'hyperapp'; -import {filteredProps} from '../utils'; -import {Element} from './Element'; +import { filteredProps } from '../utils'; +import { Element } from './Element'; /** * A iframe * @param {Object} props Properties * @param {BoxProperties} [props.box] Box Properties - * @param {h[]} children Children */ -export const Iframe = (props, children = []) => - h(Element, Object.assign({}, props.box || {}, { - class: ['osjs-gui-iframe', props.class] - }), [ - h('iframe', Object.assign({ - frameborder: 0 - }, filteredProps(props, ['box']))), - ...children - ]); +export const Iframe = ({ children, ...props }) => ( + +