Native dialog windows (#455)

* added optional parameter to all windows

* Refactor Modals for electron, iframe and browser

* moved to calling symbols instead of events. Adapted a few boxes

* minor bug fixes. First test worked

* moved all modals to new API

* notifications improved

* native dropdown menu

* native sidebar menu

* added context menu option for messagebox

* changed windows top menu to context-like

* fixed windows bugs menu

* added accelerators

* added accelerators

* added expert mode for inspect context menu

* "Client" removed

* minor fix debugger

* fix unicode characters in json (fuck wolfram)

* pass cached clients to top bar extensions

* url decode, unicode fixes

* minor changes

* context menu

* version up

* fix settings issue on windows

* removed radio styling and checkboxes

* system colors

* provided system color

* system color customization

* fine icon & rendering api

* default accent color

* dragging regions

* Upgrade electron version to ^39.0.0

* provide modals channel to windows

* bg-sys-25

* iframeQ bug fix

* fixed icon

* mr-auto

* autotests fix

* color fix

* added licenses

* clean up

* added license text to stating sequence

* style fixes

* licenses

* Linux UI fixes

* avoid black

* added min height

* added flatpack

* fix flatpack

* qfix for arm

* switched to snap

* snapcraft

* Remove 'sudo' from snapcraft installation command

* Add Snapcraft installation to build-linux.yml

Added installation steps for Snapcraft in the build workflow.

* Remove 'sudo' from Snapcraft installation commands

* Fix installation steps for Snapcraft in workflow

* autoselect kernel

* switched to apimage

* fix border styles for Linux

* update borders

* dark mode polished

* fixed win11

* material for launcher win11

* update builder

* added picture

---------

Co-authored-by: [email protected] <[email protected]>

Author: JerryI

.github/workflows/build-linux.yml

@@ -162,4 +162,4 @@ jobs:
       - name: Build electron
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}       
-        run: npm run dist-linux
+        run: npm run dist-linux

Assets/Fonts/DejaVuSansCode.ttf

@@ -126,7 +126,7 @@ input::selection {
 
 @media (min-width: 768px) {
   .md\:-ml-70 {
-    margin-left: -16rem !important;
+    margin-left: calc(-1 * var(--system-main-padding-left)) !important;
   }
 
 }
@@ -217,14 +217,17 @@ input::selection {
 
 .h-titlebar {
   height: env(titlebar-area-height) !important;
+  min-height: 32px;
 }
 
 [os="Windows"] .win\:h-titlebar {
   height: env(titlebar-area-height) !important;
+  min-height: 32px;
 }
 
 [os="WindowsLegacy"] .owin\:h-titlebar {
   height: env(titlebar-area-height) !important;
+  min-height: 32px;
 }
 
 [os="Windows"] .win\:sc-b {
@@ -321,6 +324,7 @@ input::selection {
 
 [os="Unix"] .linux\:h-titlebar {
   height: env(titlebar-area-height) !important;
+  min-height: 38px;
 }
 
 [os="Windows"] .win\:pt-fix {
@@ -396,18 +400,89 @@ input::selection {
   display:none
 }
 
+[os="Unix"] .linux\:autohide {
+  display:none
+}
+
+[os="Unix"] .osx\:border-b {
+  border-bottom-width: 1px;
+}
+
+[os="WindowsLegacy"] .osx\:border-b {
+  border-bottom-width: 1px;
+}
+
+[os="Unix"] .osx\:border-r {
+  border-right-width: 1px;
+}
+
+[os="WindowsLegacy"] .osx\:border-r {
+  border-right-width: 1px;
+}
+
 [os="Windows"] .win\:barfix {
   padding-top:0 !important;
   margin-top: 0.25rem !important;
 }
 
+[os="Unix"] .linux\:barfix {
+  padding-top: 0.5rem !important;
+}
+
 [os="WindowsLegacy"] .owin\:barfix {
-  padding-top:0 !important;
-  margin-top: 0.25rem !important;
+  padding-top: 0.25rem !important;
+}
+
+[os="Unix"] .owin\:border {
+  border-width: 1px;
+}
+
+[os="Unix"] .owin\:border-slate-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
 
 @media (min-width: 768px) {
   [os="Windows"] .win\:autohide {
     display:inline-block
   }
+  
+  [os="Unix"] .linux\:autohide {
+    display:inline-block
+  }
+}
+
+.native {
+  all: revert;
+  appearance: auto;
+}
+
+
+.bg-sys {
+  background: var(--system-accent-color);
+}
+
+.bg-sys-25 {
+  background-color: var(--system-accent-color-25);
+}
+
+.hover\:bg-sys:hover {
+  background: var(--system-accent-color);
+}
+
+.text-sys {
+  color: var(--system-accent-color);
+}
+
+.fill-sys {
+  fill: var(--system-accent-color);
+}
+
+.focus\:ring-sys:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: var(--system-accent-color);
+}
+
+.focus\:bg-sys-25:focus {
+  background-color: var(--system-accent-color-25);
 }

Assets/Fonts/Monoid Regular.ttf

@@ -524,108 +524,6 @@ select {
           print-color-adjust: unset;
 }
 
-[type='checkbox'],[type='radio'] {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  padding: 0;
-  -webkit-print-color-adjust: exact;
-          print-color-adjust: exact;
-  display: inline-block;
-  vertical-align: middle;
-  background-origin: border-box;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  flex-shrink: 0;
-  height: 1rem;
-  width: 1rem;
-  color: #2563eb;
-  background-color: #fff;
-  border-color: #6b7280;
-  border-width: 1px;
-  --tw-shadow: 0 0 #0000;
-}
-
-[type='checkbox'] {
-  border-radius: 0px;
-}
-
-[type='radio'] {
-  border-radius: 100%;
-}
-
-[type='checkbox']:focus,[type='radio']:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
-  --tw-ring-offset-width: 2px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: #2563eb;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-}
-
-[type='checkbox']:checked,[type='radio']:checked {
-  border-color: transparent;
-  background-color: currentColor;
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-[type='checkbox']:checked {
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-}
-
-@media (forced-colors: active)  {
-  [type='checkbox']:checked {
-    -webkit-appearance: auto;
-       -moz-appearance: auto;
-            appearance: auto;
-  }
-}
-
-[type='radio']:checked {
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-}
-
-@media (forced-colors: active)  {
-  [type='radio']:checked {
-    -webkit-appearance: auto;
-       -moz-appearance: auto;
-            appearance: auto;
-  }
-}
-
-[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
-  border-color: transparent;
-  background-color: currentColor;
-}
-
-[type='checkbox']:indeterminate {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
-  border-color: transparent;
-  background-color: currentColor;
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-@media (forced-colors: active)  {
-  [type='checkbox']:indeterminate {
-    -webkit-appearance: auto;
-       -moz-appearance: auto;
-            appearance: auto;
-  }
-}
-
-[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
-  border-color: transparent;
-  background-color: currentColor;
-}
-
 [type='file'] {
   background: unset;
   border-color: inherit;