Merge pull request #86 from zelfroster/fix-issues

Fix WebUI issues
RetroShare · Jan 15, 2024 · edfc638 · edfc638
2 parents ba0de17 + e6e85a0
commit edfc638
Show file tree

Hide file tree

Showing 57 changed files with 285 additions and 216 deletions.
diff --git a/webui-src/.editorconfig b/webui-src/.editorconfig
@@ -8,7 +8,7 @@ root = true
 
 # Change these settings to your own preference
 indent_style = space
-indent_size  = 4
+indent_size  = 2
 
 # We recommend you to keep these unchanged
 end_of_line              = lf

diff --git a/webui-src/app/config/config_network.js b/webui-src/app/config/config_network.js
@@ -1,7 +1,7 @@
 const m = require('mithril');
 const rs = require('rswebui');
 
-const util = require('config/config_util'); // for future use
+const util = require('config/config_util');
 
 const SetNwMode = () => {
   const networkModes = [
@@ -124,11 +124,14 @@ const SetNAT = () => {
         'select',
         {
           value: netMode,
-          oninput: (e) => (netMode = e.target.value),
-          onchange: () => {
+          onchange: (e) => {
             rs.rsJsonApiRequest('/rsPeers/setNetworkMode', {
               sslId,
               netMode,
+            }).then((res) => {
+              if (res.body.retval) {
+                netMode = e.target.value;
+              }
             });
           },
         },

diff --git a/webui-src/app/home.js b/webui-src/app/home.js
@@ -84,7 +84,7 @@ const retroshareId = () => {
               document.getElementById('retroId').select();
             },
           },
-          v.attrs.ownCert.substring(31)
+          v.attrs.ownCert
         ),
         m('i.fas.fa-copy', {
           onclick: () => {
@@ -262,7 +262,7 @@ const Certificate = () => {
     rs.rsJsonApiRequest(
       '/rsPeers/GetShortInvite',
       { formatRadix: true },
-      (data) => (ownCert = data.invite)
+      (data) => (ownCert = decodeURIComponent(data.invite).substring(34))
     );
   }
 

diff --git a/webui-src/app/login.js b/webui-src/app/login.js
@@ -84,7 +84,6 @@ function loginComponent() {
 
   const textError = () => m('p.error[id=error]');
   return {
-    oninit: () => verifyLogin(uname, passwd, url, false),
     view: () => {
       return m(
         'form.login-page',

diff --git a/webui-src/app/scss/abstracts/_mixins.scss b/webui-src/app/scss/abstracts/_mixins.scss
@@ -37,6 +37,7 @@
 @mixin blockquote($type) {
   position: relative;
   line-height: 1.2;
+
   @if ($type == 'info') {
     color: transparentize($dark-color, 0.2);
     border: 1px solid transparentize($primary-retro-color, 0.2);
@@ -45,11 +46,13 @@
   } @else if ($type == 'danger') {
     border: 1px solid transparentize($red-color, 0.2);
   }
+
   &::before {
     font-family: 'Font Awesome 5 Free';
     position: absolute;
     top: 0.5rem;
     left: 0.5rem;
+
     @if ($type == 'info') {
       content: '\f05a';
       color: $primary-color;
@@ -62,3 +65,31 @@
     }
   }
 }
+
+@mixin flex($direction: '', $justify: '', $align: '', $gap: 0) {
+  display: flex;
+
+  @if ($direction != '') {
+    flex-direction: $direction;
+  }
+
+  @if ($justify != '') {
+    justify-content: $justify;
+  }
+
+  @if ($align != '') {
+    align-items: $align;
+  }
+
+  @if ($gap !=0) {
+    gap: $gap;
+  }
+}
+
+// Font
+@mixin fontdef-woff($FontPath, $FontName, $FontVersion: '1.0.0', $FontType: 'Regular') {
+  src:
+    url('#{$FontPath}/#{$FontName}-#{$FontType}.woff2') format('woff2'),
+    url('#{$FontPath}/#{$FontName}-#{$FontType}.woff') format('woff'),
+    url('#{$FontPath}/#{$FontName}-#{$FontType}.ttf') format('truetype');
+}
diff --git a/webui-src/app/scss/abstracts/_variables.scss b/webui-src/app/scss/abstracts/_variables.scss
@@ -1,3 +1,6 @@
 // -----------------------------------------------------------------------------
 // This file contains all application-wide Sass variables.
 // -----------------------------------------------------------------------------
+$FontPath: './webfonts' !default;
+$FontName: 'Roboto' !default;
+$FontVersion: '3.008' !default;
diff --git a/webui-src/app/scss/base/_base.scss b/webui-src/app/scss/base/_base.scss
@@ -9,16 +9,16 @@ General site-wide rules
 
 /* Main base div for tabs used by m.route */
 .content {
+  @include flex;
   height: 100%;
-  display: flex;
   overflow: hidden;
 }
 
 /* Main tab content */
 .tab-content {
+  @include flex;
   height: 100%;
   width: 100%;
-  display: flex;
   background-color: $light-color;
   animation: fadein 0.3s;
   overflow: auto;

diff --git a/webui-src/app/scss/base/_reset.scss b/webui-src/app/scss/base/_reset.scss
@@ -42,7 +42,8 @@ html:focus-within {
 body {
   text-rendering: optimizeSpeed;
   line-height: 1.5;
-  font-family: Arial, Helvetica, sans-serif !important;
+  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
+  letter-spacing: -0.025ch;
 }
 
 /* A elements that don't have a class get default styles */
@@ -70,6 +71,7 @@ select {
   html:focus-within {
     scroll-behavior: auto;
   }
+
   *,
   *::before,
   *::after {

diff --git a/webui-src/app/scss/components/_media.scss b/webui-src/app/scss/components/_media.scss
@@ -1,4 +1,4 @@
-@use '../abstracts/colors' as *;
+@use '../abstracts' as *;
 
 .media-item {
   display: flex;
@@ -8,9 +8,7 @@
   border-radius: 4px;
   &__details {
     flex-basis: 40%;
-    display: flex;
-    align-items: start;
-    gap: 0.5rem;
+    @include flex($align: start, $gap: 0.5rem);
     & img {
       width: 6rem;
       object-fit: contain;

diff --git a/webui-src/app/scss/components/_navbar.scss b/webui-src/app/scss/components/_navbar.scss
@@ -1,21 +1,17 @@
-@use '../abstracts/colors' as *;
+@use '../abstracts' as *;
 
 /* Navbar */
 .nav-menu {
   background-color: $dark-color;
   box-shadow: 0 5px 5px #222;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  @include flex(column, $align: center);
   height: 100%;
   padding: 0.5rem 0.25rem;
   margin-right: 0rem;
 
   &__logo {
     padding: 1.2rem 0;
-    display: flex;
-    gap: 0.3rem;
-    align-items: center;
+    @include flex($align: center, $gap: 0.3rem);
 
     img {
       width: 1.6rem;
@@ -29,17 +25,14 @@
 
   &__box {
     padding: 2rem 0.125rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+    @include flex(column, $gap: 0.5rem);
     position: relative;
 
     .item {
       margin: 0;
       padding: 0.675rem 0.5rem;
       width: 10rem;
-      display: flex;
-      align-items: center;
+      @include flex($align: center);
       line-height: 1;
       border-radius: 0.5rem;
       text-decoration: none;
@@ -88,17 +81,20 @@
         display: none;
       }
     }
+
     .nav-menu__box {
       .item {
         padding: 0.675rem 0;
         width: 2.5rem;
         justify-content: center;
         transition: 300ms;
+
         & p {
           display: none;
         }
       }
     }
+
     button i {
       rotate: 180deg;
     }
@@ -113,46 +109,53 @@
 .sidebar {
   width: 13rem;
   background-color: white;
-  display: flex;
-  flex-direction: column;
+  @include flex(column);
+
   & a {
     text-decoration: none;
     text-transform: capitalize;
     padding: 1rem;
     cursor: pointer;
     color: #999;
+
     &:hover {
       color: #222;
     }
   }
+
   & .selected-sidebar-link {
     font-weight: bold;
     color: #222;
     border-left: 5px solid #3ba4d7;
     animation: expand-left-border 0.1s;
   }
 }
+
 .sidebarquickview {
   & > h6 {
     padding: 0.5rem;
   }
+
   & a {
     text-decoration: none;
     text-transform: capitalize;
     padding: 0.5rem 1rem;
     display: block;
     color: #999;
+
     & a:hover {
       color: #222;
     }
   }
+
   & .selected-sidebarquickview-link {
     font-weight: bold;
     color: #222;
     border-left: 5px solid #3ba4d7;
     animation: expand-left-border 0.1s;
   }
 }
+
 /* Content adjacent to sidebar */
 .node-panel {
   width: 100%;
@@ -164,6 +167,7 @@
   from {
     border-left: 0;
   }
+
   to {
     border-left: 5px solid #3ba4d7;
   }

diff --git a/webui-src/app/scss/components/_posts.scss b/webui-src/app/scss/components/_posts.scss
@@ -1,13 +1,12 @@
-@use '../abstracts/colors' as *;
+@use '../abstracts' as *;
 
 .posts {
   height: 100%;
   margin-top: 1rem;
   flex-direction: column;
   overflow: auto;
   &__heading {
-    display: flex;
-    justify-content: space-between;
+    @include flex(column, $justify: space-between);
   }
   &-container {
     height: 100%;

diff --git a/webui-src/app/scss/fontface/_Bold.scss b/webui-src/app/scss/fontface/_Bold.scss
@@ -0,0 +1,18 @@
+@use '../abstracts' as *;
+
+/* BEGIN Bold */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Bold');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Bold');
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* END Bold */
diff --git a/webui-src/app/scss/fontface/_BoldItalic.scss b/webui-src/app/scss/fontface/_BoldItalic.scss
@@ -0,0 +1,18 @@
+@use '../abstracts' as *;
+
+/* BEGIN Bold Italic */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'BoldItalic');
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'BoldItalic');
+  font-weight: bold;
+  font-style: italic;
+}
+
+/* END Bold Italic */
diff --git a/webui-src/app/scss/fontface/_Italic.scss b/webui-src/app/scss/fontface/_Italic.scss
@@ -0,0 +1,18 @@
+@use '../abstracts' as *;
+
+/* BEGIN Italic */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Italic');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Italic');
+  font-weight: normal;
+  font-style: italic;
+}
+
+/* END Italic */
diff --git a/webui-src/app/scss/fontface/_Light.scss b/webui-src/app/scss/fontface/_Light.scss
@@ -0,0 +1,11 @@
+@use '../abstracts' as *;
+
+/* BEGIN Light */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Light');
+  font-weight: 300;
+  font-style: normal;
+}
+
+/* END Light */