feat: feature to add shared directory with default options

webui-src/app/files/files_manager.js

@@ -1,5 +1,6 @@
 const m = require('mithril');
 const rs = require('rswebui');
+const widget = require('widgets');
 const futil = require('files/files_util');
 const cutil = require('config/config_util');
 
@@ -9,6 +10,40 @@ const shareManagerInfo = `
     share flags for each shared directory.
   `;
 
+const SharedDirectoryForm = () => {
+  let newDirPath = '';
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    rs.rsJsonApiRequest('/rsFiles/addSharedDirectory', {
+      dir: {
+        filename: newDirPath,
+        virtualname: '',
+        shareflags: futil.DIR_FLAGS_ANONYMOUS_SEARCH | futil.DIR_FLAGS_ANONYMOUS_DOWNLOAD,
+        parent_groups: [],
+      },
+    }).then((res) => console.log(res));
+    console.log(newDirPath);
+  }
+
+  return {
+    view: () =>
+      m('.widget', [
+        m('.widget__heading', m('h3', 'Add New Directory')),
+        m('form.widget__body.share-manager__form', { onsubmit: handleSubmit }, [
+          m('.share-manager__form_input', [
+            m('label', 'Enter absolute directory path :'),
+            m('input[type=text]', {
+              value: newDirPath,
+              oninput: (e) => (newDirPath = e.target.value),
+            }),
+          ]),
+          m('button[type=submit]', 'Add Directory'),
+        ]),
+      ]),
+  };
+};
+
 const ShareManager = () => {
   let sharedDirArr = [];
   let isEditDisabled = true;
@@ -21,11 +56,11 @@ const ShareManager = () => {
     view: () => {
       return m('.widget', [
         m('.widget__heading', m('h3', 'ShareManager')),
-        m('.widget__body.shareManager', [
+        m('.widget__body.share-manager', [
           m('blockquote.info', shareManagerInfo),
-          m('table.shareManager__table', [
+          m('table.share-manager__table', [
             m(
-              'thead.shareManager__table_heading',
+              'thead.share-manager__table_heading',
               m('tr', [
                 m('td', 'Shared Directories'),
                 m('td', 'Visible Name'),
@@ -41,7 +76,7 @@ const ShareManager = () => {
               ])
             ),
             m(
-              'tbody.shareManager__table_body',
+              'tbody.share-manager__table_body',
               sharedDirArr &&
                 sharedDirArr.map((sharedDirItem) => {
                   const sharedFlags = futil.calcShareFlags(sharedDirItem.shareflags);
@@ -85,9 +120,12 @@ const ShareManager = () => {
             ),
           ]),
           m(
-            '.shareManager__actions',
-            m('.shareManager__actions-add', m('button', 'Add New')),
-            m('.shareManager__actions-edit', [
+            '.share-manager__actions',
+            m(
+              '.share-manager__actions-add',
+              m('button', { onclick: () => widget.popupMessage(m(SharedDirectoryForm)) }, 'Add New')
+            ),
+            m('.share-manager__actions-edit', [
               isEditDisabled && m('button', { onclick: () => (isEditDisabled = false) }, 'Edit'),
               !isEditDisabled &&
                 m('button', { onclick: () => (isEditDisabled = true) }, 'Apply and Close'),

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

@@ -34,8 +34,8 @@ textarea {
   font-size: 1rem;
   font-weight: 400;
   border: 1px solid #ccc;
-  border-radius: 5px;
-  padding: 0.4rem 0.8rem;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
   /* Disable chromium's focused element hinting*/
   outline: transparent;
 }
@@ -128,7 +128,7 @@ hr {
   background-color: #333;
   font-size: 0.875rem;
   text-align: center;
-  padding: 0.25rem 0;
+  padding: 0.25rem;
   border-radius: 0.5rem;
 }
 .tooltip:hover .tooltiptext {

webui-src/app/scss/layouts/_modal-container.scss

@@ -19,7 +19,7 @@
   inset: 0;
   margin: auto;
   background-color: white;
-  border-radius: 1rem;
+  border-radius: 0.5rem;
   animation: fadein 0.5s;
   display: flex;
   flex-direction: column;

webui-src/app/scss/layouts/_widget.scss

@@ -5,14 +5,13 @@
   flex-direction: column;
   gap: 0.5rem;
   background-color: white;
-  border-radius: 6px;
+  border-radius: 0.5rem;
   overflow: auto;
   & .top-heading {
     display: flex;
     justify-content: space-between;
   }
   &__heading {
-    padding-bottom: 0.25rem;
     display: flex;
     justify-content: space-between;
     align-items: center;

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

@@ -188,7 +188,7 @@ table.friendsfiles td:nth-child(2) {
     width: 80%;
     height: 90%;
     & > .widget {
-      padding: 2rem;
+      padding: 1.5rem;
     }
     & .close-btn {
       position: absolute;
@@ -198,7 +198,7 @@ table.friendsfiles td:nth-child(2) {
   }
 }
 
-.shareManager {
+.share-manager {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -206,9 +206,12 @@ table.friendsfiles td:nth-child(2) {
     margin-bottom: auto;
     thead {
       font-weight: bold;
-      td:nth-child(3) .tooltip {
-        font-weight: normal;
-        font-size: 1rem;
+      td:nth-child(3) {
+        text-align: left;
+        & .tooltip {
+          font-weight: normal;
+          font-size: 1rem;
+        }
       }
     }
     tbody {
@@ -229,7 +232,6 @@ table.friendsfiles td:nth-child(2) {
       }
       &:nth-child(3) {
         width: 15%;
-        text-align: center;
       }
       &:nth-child(4) {
         width: 20%;
@@ -240,4 +242,14 @@ table.friendsfiles td:nth-child(2) {
     display: flex;
     justify-content: space-between;
   }
+  &__form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    &_input {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+  }
 }