Fix Scripts, separate specific scripts/styles for components

fruithost · Oct 2, 2024 · 2a1b168 · 2a1b168
1 parent 31f4b9c
commit 2a1b168
Show file tree

Hide file tree

Showing 27 changed files with 1,080 additions and 1,022 deletions.
diff --git a/classes/Templating/Template.class.php b/classes/Templating/Template.class.php
@@ -51,11 +51,53 @@ public function __construct(Core $core) {
 			$this->core->getHooks()->addAction('html_head', [ $this, 'favicon' ], 10, false);
 			$this->core->getHooks()->addAction('html_foot', [ $this, 'foot_modals' ], 10, false);
 			$this->core->getHooks()->addAction('html_foot', [ $this, 'foot_scripts' ], 10, false);
-
-			$this->files->addStylesheet('bootstrap', $this->url('css/bootstrap/bootstrap.min.css'), '5.3.2');
-            $this->files->addStylesheet('bootstrap-icons', $this->url('fonts/bootstrap-icons/bootstrap-icons.css'), '1.11.1', [ 'bootstrap' ]);
-            $this->files->addStylesheet('cascadia-mono', $this->url('fonts/cascadia-mono/cascadia-mono.css'), '2111.01', [ 'bootstrap' ]);
-            $this->files->addJavascript('bootstrap', $this->url('js/bootstrap/bootstrap.bundle.min.js'), '5.3.2', [], TemplateFiles::FOOTER);
+
+            $this->getFiles()->addStylesheet('global', $this->url('css/global.css'), '1.0.0', [ 'bootstrap' ]);
+			$this->getFiles()->addStylesheet('bootstrap', $this->url('css/bootstrap/bootstrap.min.css'), '5.3.2');
+            $this->getFiles()->addStylesheet('bootstrap-icons', $this->url('fonts/bootstrap-icons/bootstrap-icons.css'), '1.11.1', [ 'bootstrap' ]);
+            $this->getFiles()->addStylesheet('cascadia-mono', $this->url('fonts/cascadia-mono/cascadia-mono.css'), '2111.01', [ 'bootstrap' ]);
+            $this->getFiles()->addJavascript('ajax', $this->url('js/ajax.js'), '1.0.0', [ 'bootstrap' ], TemplateFiles::FOOTER);
+            $this->getFiles()->addJavascript('bootstrap', $this->url('js/bootstrap/bootstrap.bundle.min.js'), '5.3.2', [], TemplateFiles::FOOTER);
+
+            if(defined('DEBUG' && DEBUG)) {
+                 $this->getFiles()->addStylesheet('debug', $this->url('css/components/debug.css'), '1.0.0', [ 'bootstrap' ]);
+            }
+
+            foreach([
+                'themes',
+                'tooltip',
+                'popover',
+                'ajax',
+                'modal'
+            ] AS $component) {
+                if(file_exists(sprintf('default/css/components/%s.css', $component))) {
+                    $this->getFiles()->addStylesheet(sprintf('component-%s', $component), $this->url(sprintf('css/components/%s.css', $component)), '1.0.0', [ 'bootstrap' ]);
+                }
+
+                if(file_exists(sprintf('default/js/components/%s.js', $component))) {
+                    $this->getFiles()->addJavascript(sprintf('component-%s', $component), $this->url(sprintf('js/components/%s.js', $component)), '1.0.0', [ 'bootstrap' ], TemplateFiles::FOOTER);
+                }
+            }
+
+            if(Auth::isLoggedIn()) {
+                $this->getFiles()->addJavascript('codemirror', $this->url('js/codemirror/build/bundle.min.js'), '6.0.0', [ 'bootstrap' ], TemplateFiles::FOOTER);
+
+                foreach([
+                    'confirmation',
+                    'loading',
+                    'module-info',
+                    'console',
+                    'file-tree'
+                ] AS $component) {
+                    if(file_exists(sprintf('default/css/components/%s.css', $component))) {
+                        $this->getFiles()->addStylesheet(sprintf('component-%s', $component), $this->url(sprintf('css/components/%s.css', $component)), '1.0.0', [ 'bootstrap' ]);
+                    }
+
+                    if(file_exists(sprintf('default/js/components/%s.js', $component))) {
+                        $this->getFiles()->addJavascript(sprintf('component-%s', $component), $this->url(sprintf('js/components/%s.js', $component)), '1.0.0', [ 'bootstrap' ], TemplateFiles::FOOTER);
+                    }
+                }
+            }
 
 			$this->navigation->addCategory('account', I18N::get('Account'));
 			$this->navigation->addCategory('database', I18N::get('Databases'));

diff --git a/classes/UI/Modal.class.php b/classes/UI/Modal.class.php
@@ -72,7 +72,7 @@ public function getContent(Template $template) : mixed {
 
 			// @ToDo check if is template file
 			if(!empty($this->content)) {
-				$template->display($this->content, $this->variables, false, false);
+				$template->display($this->content, $this->variables, true, false);
 				return null;
 			}
 

diff --git a/default/css/components/console.css b/default/css/components/console.css
@@ -0,0 +1,42 @@
+/*
+ * fruithost | OpenSource Hosting
+ *
+ * @author Adrian Preuß
+ * @version 1.0.0
+ * @license MIT
+*/
+
+div.terminal {
+    position: relative;
+    margin: 0 -1.5rem !important;
+    width: calc(100% + 3rem);
+    background: #282c34;
+    color: #dcdfe4;
+    box-shadow: inset 0px 2px 10px rgba(0, 0, 0, .25);
+}
+
+div.terminal div.output {
+    height: calc(100% - 35px);
+    overflow: auto;
+    padding: 15px;
+    line-height: 14px;
+    font-size: 12px;
+    font-family: 'Cascadia Mono';
+}
+
+div.terminal div.output span[data-color="0;32"] {
+    color: #9bc67c;
+}
+
+div.terminal div.output span[data-color="38;5;202"] {
+    color: #e5c07b;
+}
+
+div.terminal input[name="command"] {
+    height: 35px;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.2);
+    border: 0;
+    padding: 10px;
+    color: #FFFFFF;
+}
diff --git a/default/css/components/debug.css b/default/css/components/debug.css
@@ -0,0 +1,19 @@
+/*
+ * fruithost | OpenSource Hosting
+ *
+ * @author Adrian Preuß
+ * @version 1.0.0
+ * @license MIT
+*/
+
+.xdebug-error, .xdebug-var-dump {
+    z-index: 9999999999;
+    position: relative;
+    overflow: visible !important;
+    background: #FEFEFE;
+    color: #000000;
+}
+
+[data-bs-theme="dark"] .xdebug-error, [data-bs-theme="dark"] .xdebug-var-dump {
+    background: #444444;
+}
diff --git a/default/css/components/file-tree.css b/default/css/components/file-tree.css
@@ -0,0 +1,47 @@
+/*
+ * fruithost | OpenSource Hosting
+ *
+ * @author Adrian Preuß
+ * @version 1.0.0
+ * @license MIT
+*/
+.tree {
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    padding: 0;
+    overflow: hidden;
+}
+
+.tree .list-group {
+    margin-bottom: 0;
+}
+
+.tree .list-group-item {
+    border-radius: 0;
+    border-width: 1px 0 0 0;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    cursor: pointer;
+}
+
+.tree [data-type="directory"]::before {
+    content: "\F3D9";
+    position: relative;
+    display: inline-block;
+    font-family: 'bootstrap-icons';
+    font-size: 20px;
+    color: #f3c36b;
+}
+
+.tree .list-group-item:hover {
+    background-color: #dee2e6;
+}
+
+.tree > .list-group-item:first-child {
+    border-top-width: 0;
+}
diff --git a/default/css/components/module-info.css b/default/css/components/module-info.css
@@ -0,0 +1,48 @@
+/*
+ * fruithost | OpenSource Hosting
+ *
+ * @author Adrian Preuß
+ * @version 1.0.0
+ * @license MIT
+*/
+div#module_info .module-icon {
+    font-size: 100px;
+}
+
+div#module_info .carousel-caption {
+    right: 0;
+    bottom: 0;
+    left: 0;
+    color: #fff !important;
+    background: rgba(0, 0, 0, 0.5);
+}
+
+div#module_info div.markdown {
+    background: var(--bs-modal-footer-border-color);
+    padding: 20px;
+    font-size: 16px;
+}
+
+div#module_info div.markdown h1 {
+    font-size: 1.4rem;
+}
+
+div#module_info div.markdown h2 {
+    font-size: 1.3rem;
+}
+
+div#module_info div.markdown h3 {
+    font-size: 1.2rem;
+}
+
+div#module_info div.markdown h4 {
+    font-size: 1.1rem;
+}
+
+div#module_info div.markdown h5 {
+    font-size: 1.0rem;
+}
+
+div#module_info div.markdown h6 {
+    font-size: 0.9rem;
+}
diff --git a/default/css/components/themes.css b/default/css/components/themes.css
@@ -0,0 +1,32 @@
+/*
+ * fruithost | OpenSource Hosting
+ *
+ * @author Adrian Preuß
+ * @version 1.0.0
+ * @license MIT
+*/
+
+.theme-switch {
+    z-index: 99999;
+    border-radius: 35%;
+    color: var(--bs-emphasis-color);
+    background-color: var(--bs-secondary-bg-subtle);
+}
+
+.theme-switch .bi {
+    vertical-align: -.125em;
+    fill: currentColor;
+}
+
+.theme-switch .btn-bd-primary:active,
+.theme-switch .btn-bd-primary:focus {
+    --bs-btn-active-border-color: transparent;
+}
+
+.theme-switch .bd-mode-toggle {
+    z-index: 1500;
+}
+
+.theme-switch .bd-mode-toggle .dropdown-menu .active .bi {
+    display: block !important;
+}
diff --git a/default/css/global.css b/default/css/global.css
@@ -17,14 +17,6 @@ input:focus {
     box-shadow: none !important;
 }
 
-/* Theme Switch */
-.theme-switch {
-    z-index: 99999;
-    border-radius: 35%;
-    color: var(--bs-emphasis-color);
-    background-color: var(--bs-secondary-bg-subtle);
-}
-
 /* Dropdown */
 .dropdown-scroll {
     max-height: 145px;
@@ -77,9 +69,4 @@ span[data-dots="true"]::after {
     content: "";
     width: 5px;
     animation: dots 3s linear infinite;
-}
-
-/* XDebug */
-.xdebug-error {
-    color: #000000;
 }
diff --git a/default/css/login.css b/default/css/login.css
@@ -27,23 +27,4 @@
     margin-bottom: 10px;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
-}
-
-/* Theme Switch */
-.bi {
-    vertical-align: -.125em;
-    fill: currentColor;
-}
-
-.btn-bd-primary:active,
-.btn-bd-primary:focus {
-    --bs-btn-active-border-color: transparent;
-}
-
-.bd-mode-toggle {
-    z-index: 1500;
-}
-
-.bd-mode-toggle .dropdown-menu .active .bi {
-    display: block !important;
 }