feat: mixins for information (info, warning etc), make popup for share manager

webui-src/app/files/files_downloads.js

@@ -139,6 +139,9 @@ const NewFileDialog = () => {
 };
 
 const Component = () => {
+  function clearFileCompleted() {
+    rs.rsJsonApiRequest('/rsFiles/FileClearCompleted');
+  }
   return {
     oninit: () => {
       Downloads.loadStrategy();
@@ -150,11 +153,7 @@ const Component = () => {
         m('h3', `Downloads (${Downloads.hashes ? Downloads.hashes.length : 0} files)`),
         m('.action', [
           m('button', { onclick: () => widget.popupMessage(m(NewFileDialog)) }, 'Add new file'),
-          m(
-            'button',
-            { onclick: () => rs.rsJsonApiRequest('/rsFiles/FileClearCompleted') },
-            'Clear completed'
-          ),
+          m('button', { onclick: clearFileCompleted }, 'Clear completed'),
         ]),
       ]),
       m('.widget__body-content', [

webui-src/app/files/files_manager.js

@@ -0,0 +1,22 @@
+const m = require('mithril');
+const rs = require('rswebui');
+
+const shareManagerInfo = `
+    This is a list of shared folders. You can add and remove folders using the buttons at the bottom.
+    When you add a new folder, initially all files in that folder are shared. You can separately
+    share flags for each shared directory.
+  `;
+
+const ShareManager = () => {
+  return {
+    oninit: () => console.log('share manager'),
+    view: () => {
+      return m('.widget', [
+        m('.widget__heading', m('h3', 'ShareManager')),
+        m('.widget__body', m('blockquote.info', shareManagerInfo)),
+      ]);
+    },
+  };
+};
+
+module.exports = ShareManager;

webui-src/app/files/my_files.js

@@ -1,8 +1,10 @@
 const m = require('mithril');
 const rs = require('rswebui');
+const widget = require('widgets');
 const util = require('files/files_util');
+const manager = require('files/files_manager');
 
-function displayfiles() {
+const DisplayFiles = () => {
   const childrenList = []; // stores children details
   let loaded = false; // checks whether we have loaded the children details or not.
   let parStruct; // stores current struct(details, showChild)
@@ -18,8 +20,8 @@ function displayfiles() {
           ? m(
               'td',
               m('i.fas.fa-angle-right', {
-                class: 'fa-rotate-' + (parStruct.showChild ? '90' : '0'),
-                style: 'margin-top:12px',
+                class: `fa-rotate-${parStruct.showChild ? '90' : '0'}`,
+                style: 'margin-top: 0.5rem',
                 onclick: () => {
                   if (!loaded) {
                     // if it is not already retrieved
@@ -43,7 +45,7 @@ function displayfiles() {
             style: {
               position: 'relative',
               '--replyDepth': v.attrs.replyDepth,
-              left: `calc(30px*${v.attrs.replyDepth})`,
+              left: `calc(1.5rem*${v.attrs.replyDepth})`,
             },
           },
           parStruct.details.name
@@ -52,7 +54,7 @@ function displayfiles() {
       ]),
       parStruct.showChild &&
         childrenList.map((child) =>
-          m(displayfiles, {
+          m(DisplayFiles, {
             // recursive call
             par_directory: { details: child, showChild: false },
             replyDepth: v.attrs.replyDepth + 1,
@@ -60,29 +62,48 @@ function displayfiles() {
         ),
     ],
   };
-}
+};
+
+const ShareManagerPopup = () => {};
 
 const Layout = () => {
   //  let root_handle;
   let parent;
+  let showShareManager = false;
   return {
     oninit: () => {
       rs.rsJsonApiRequest('/rsfiles/requestDirDetails', {}).then((res) => (parent = res));
     },
     view: () => [
-      m('.widget__heading', [m('h3', 'My Files')]),
+      m('.widget__heading', [
+        m('h3', 'My Files'),
+        m('button', { onclick: () => (showShareManager = true) }, 'Configure shared directories'),
+      ]),
       m('.widget__body', [
         m(
           util.MyFilesTable,
           m(
             'tbody',
             parent &&
-              m(displayfiles, {
+              m(DisplayFiles, {
                 par_directory: { details: parent.body.details, showChild: false },
                 replyDepth: 0,
               })
           )
         ),
+        m(
+          '.shareManagerPopupOverlay#shareManagerPopup',
+          { style: { display: showShareManager ? 'block' : 'none' } },
+          m(
+            '.shareManagerPopup',
+            m(manager),
+            m(
+              'button.red.close-btn',
+              { onclick: () => (showShareManager = false) },
+              m('i.fas.fa-times')
+            )
+          )
+        ),
       ]),
     ],
   };

webui-src/app/scss/abstracts/_mixins.scss

@@ -1,6 +1,7 @@
 // -----------------------------------------------------------------------------
 // This file contains all application-wide Sass mixins.
 // -----------------------------------------------------------------------------
+@use './colors' as *;
 
 /// Button Mixin
 @mixin button($bg-color) {
@@ -20,3 +21,44 @@
     box-shadow: inset 3px 3px 0 darken($color: $bg-color, $amount: 20);
   }
 }
+
+/// Overlay Mixin
+@mixin popupOverlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+/// Blockquote Mixin
+@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);
+  } @else if ($type == 'warning') {
+    border: 1px solid transparentize($golden-yellow-color, 0.2);
+  } @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;
+    } @else if ($type == 'warning') {
+      content: '\f071';
+      color: $golden-yellow-color;
+    } @else if ($type == 'danger') {
+      content: '\f05a';
+      color: $red-color;
+    }
+  }
+}

webui-src/app/scss/base/_base.scss

@@ -1,7 +1,7 @@
 /******************************
 General site-wide rules
 ******************************/
-@use '../abstracts/colors' as *;
+@use '../abstracts' as *;
 
 #main {
   height: 100vh;
@@ -135,6 +135,15 @@ hr {
   animation: fadein 0.5s;
 }
 
+blockquote {
+  color: $dark-color;
+  padding: 0.75rem 1rem 0.75rem 2rem;
+  border-radius: 0.25rem;
+  &.info {
+    @include blockquote('info');
+  }
+}
+
 /******************************
 Animations
 ******************************/

webui-src/app/scss/pages/_files.scss

@@ -1,4 +1,4 @@
-@use '../abstracts/colors' as *;
+@use '../abstracts/' as *;
 
 .file-view {
   width: 100%;
@@ -178,3 +178,22 @@ table.friendsfiles td:nth-child(2) {
     margin-left: 0.5rem;
   }
 }
+
+.shareManagerPopupOverlay {
+  @include popupOverlay;
+  .shareManagerPopup {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: 80%;
+    height: 90%;
+    & > .widget {
+      padding: 2rem;
+    }
+    & .close-btn {
+      position: absolute;
+      top: 1.5rem;
+      right: 1.5rem;
+    }
+  }
+}

webui-src/app/scss/pages/_mail.scss

@@ -1,4 +1,4 @@
-@use '../abstracts/colors' as *;
+@use '../abstracts/' as *;
 
 .side-bar {
   display: flex;
@@ -374,13 +374,7 @@ table.attachment-container {
 }
 
 .composePopupOverlay {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  background-color: rgba(0, 0, 0, 0.2);
+  @include popupOverlay;
   .composePopup {
     position: absolute;
     inset: 0;