Made input styling shared

src/snek/static/base.css

@@ -1,3 +1,5 @@
+@import "shared.css";
+
 * {
   margin: 0;
   box-sizing: border-box;
@@ -20,7 +22,7 @@
 
 body {
   font-family: Arial, sans-serif;
-  background-color: #000000;
+  background-color: #1a1a1a;
   color: #e6e6e6;
   line-height: 1.5;
   display: flex;
@@ -36,7 +38,7 @@ main {
 }
 
 header {
-  background-color: #000000;
+  background-color: #0f0f0f;
   padding: 10px 20px;
   display: flex;
   justify-content: space-between;
@@ -78,13 +80,14 @@ a {
   flex: 1;
   display: flex;
   flex-direction: column;
-  background-color: #000000;
+  background-color: #1a1a1a;
   overflow: hidden;
 }
 
 .chat-header {
   padding: 10px 20px;
-  background-color: #000000;
+  background-color: #0f0f0f;
+  border-bottom: 1px solid #333;
   user-select: none;
 }
 
@@ -108,7 +111,7 @@ a {
   -ms-overflow-style: none;
   padding: 10px;
   height: 200px;
-  background: #000000;
+  background: #1a1a1a;
 }
 
 .container {
@@ -204,14 +207,15 @@ a {
 
 .chat-input {
   padding: 15px;
-  background-color: #000000;
+  background-color: #121212;
   display: flex;
   align-items: center;
+  border-top: 1px solid #333;
 }
 
 input[type="text"], .chat-input textarea {
   flex: 1;
-  background-color: #000000;
+  background-color: #1a1a1a;
   color: white;
   border: none;
   padding: 10px;
@@ -310,11 +314,10 @@ a {
 
 .sidebar {
   width: 250px;
-  background-color: #000000;
+  background-color: #121212;
-  padding-left: 20px;
+  padding: 20px;
-  padding-right: 20px;
-  padding-top: 10px;
   overflow-y: auto;
+  border-right: 1px solid #333;
 }
 
 .sidebar h2 {
@@ -341,4 +344,3 @@ a {
 .sidebar ul li a:hover {
   color: #fff;
 }
-

src/snek/static/generic-form.js

@@ -21,6 +21,24 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+const getAdoptionStyles = () => {
+  return Array.from(document.styleSheets)
+      .filter((styleSheet) => styleSheet.href?.endsWith("shared.css"))
+      .map(x => {
+      const sheet = new CSSStyleSheet();
+
+      sheet.replaceSync(Array.from(x.cssRules).flatMap(rule => {
+        if (rule instanceof CSSImportRule) {
+          return Array.from(rule.styleSheet.cssRules).map(rule => rule.cssText);
+        } else {
+          return rule.cssText;
+        }
+      }).join(' '));
+
+      return sheet;
+    });
+}
+
 class GenericField extends HTMLElement {
   form = null;
   field = null;
@@ -83,18 +101,6 @@ class GenericField extends HTMLElement {
         background-color: #1a1a1a;
         color: #e6e6e6;
         font-size: 1em;
-        
-        &:focus {
-          outline: 2px solid #f05a28 !important;
-        }
-        
-        &::placeholder {
-          transition: opacity 0.3s;
-        }
-        
-        &:focus::placeholder {
-          opacity: 0.4;
-        }
       }
       
       button {
@@ -155,6 +161,9 @@ class GenericField extends HTMLElement {
     this.container.appendChild(this.styleElement);
 
     this.shadowRoot.appendChild(this.container);
+
+
+    this.shadowRoot.adoptedStyleSheets = getAdoptionStyles();
   }
 
   connectedCallback() {

src/snek/static/shared.css

@@ -0,0 +1,15 @@
+
+
+input, textarea {
+  &:focus {
+    outline: 2px solid #f05a28 !important;
+  }
+
+  &::placeholder {
+    transition: opacity 0.3s;
+  }
+
+  &:focus::placeholder {
+    opacity: 0.4;
+  }
+}

src/snek/static/style.css

@@ -1,55 +1,57 @@
+@import "shared.css";
 
 * {
-  
+  box-sizing: border-box;
-    box-sizing: border-box;
+}
+
+.dialog {
+  background-color: #0f0f0f;
+  border-radius: 10px;
+  padding: 30px;
+  width: 800px;
+  margin: 30px;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+}
+
+@media screen and (max-width: 500px) {
+  .center {
+    width: 100%;
+    left: 0px;
   }
 
   .dialog {
-
+    width: 100%;
-    background-color:  #0f0f0f;
+    left: 0px;
-    border-radius: 10px;
-    padding: 30px;
-    width: 800px;
-    margin: 30px;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-}
-
-  @media screen and (max-width: 500px) {
-    .center {
-        width: 100%;
-        left: 0px;
-    }
-    .dialog {
-        width: 100%;
-        left: 0px;
-    }
-    
   }
 
+}
+
 h1 {
-    font-size: 2em;
+  font-size: 2em;
-    color: #f05a28;
+  color: #f05a28;
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 
 h2 {
-    font-size: 1.4em;
+  font-size: 1.4em;
-    color: #f05a28;
+  color: #f05a28;
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
+
 body {
-    font-family: Arial, sans-serif;
+  font-family: Arial, sans-serif;
-    background-color: #1a1a1a;
+  background-color: #1a1a1a;
-    color: #e6e6e6;
+  color: #e6e6e6;
-    line-height: 1.5;
+  line-height: 1.5;
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    justify-content: center;
+  justify-content: center;
-    align-items: center;
+  align-items: center;
-    min-height: 100vh;
+  min-height: 100vh;
 
 }
+
 div {
-    text-align: left;
+  text-align: left;
 
 }

src/snek/templates/base.html

@@ -20,6 +20,7 @@
     <script src="/html-frame.js"></script>
     <script src="/generic-form.js"></script>
     <link rel="stylesheet" href="/html-frame.css">
+    <link rel="stylesheet" href="/shared.css">
 
     {% block head %}
     {% endblock %}

src/snek/templates/search_user.html

@@ -8,7 +8,7 @@
     <div class="chat-header">
         <h2>Search user</h2>
     </div>
-    <div class="container chat-area">
+    <div class="container">
         <form method="get" action="/search-user.html">
             <input type="text" placeholder="Username" name="query" value="{{query}}" REQUIRED></input>
             <fancy-button size="auto" text="Search" url="submit"></fancy-button>

src/snek/templates/web.html

@@ -22,10 +22,6 @@
 <script>
     const channelUid = "{{ channel.uid.value }}";
 
-    function getInputField(){
-        return document.querySelector("textarea")
-    }
-        
     function initInputField(textBox) {
         textBox.addEventListener('change', (e) => {
             e.preventDefault();
@@ -45,29 +41,9 @@
         textBox.focus();
     }
 
-    function replyMessage(message) {
-        const field = getInputField() 
-        field.value = "```markdown\n> " + (message || '') + "\n```\n";
-        field.focus();
-    }
-
     function updateTimes() {
-        document.querySelectorAll(".time").forEach((container) => {
+        document.querySelectorAll(".time").forEach((time) => {
-            const messageDiv = container.closest('.message');
+            time.innerText = app.timeDescription(time.dataset.created_at);
-            const userNick = messageDiv.dataset.user_nick;
-            const text = messageDiv.querySelector(".text").innerText;
-            const time = document.createElement("span");
-            time.innerText = app.timeDescription(container.dataset.created_at);
-            
-            container.replaceChildren(time);
-            const reply = document.createElement("a");
-            reply.innerText = " reply";
-            reply.href = "#reply";
-            container.appendChild(reply);
-            reply.addEventListener('click', (e) => {
-                e.preventDefault();
-                replyMessage(text);
-            })
         });
     }
 
@@ -183,7 +159,7 @@
         }, 1000);
     });
 
-    initInputField(getInputField());
+    initInputField(document.querySelector("textarea"));
     updateLayout(true);
 </script>
 {% endblock %}

src/snek/view/threads.py

@@ -28,6 +28,6 @@ class ThreadsView(BaseView):
             thread['last_message_user_color'] = user_last_message['color']  
             threads.append(thread)
             
-        threads.sort(key=lambda x: x['last_message_on'] or '', reverse=True)
+        threads.sort(key=lambda x: x['last_message_on'], reverse=True)
 
         return await self.render_template("threads.html", dict(threads=threads,user=user))

src/snek/view/upload.py

@@ -25,7 +25,6 @@ class UploadView(BaseView):
         drive_item = await self.services.drive_item.get(uid)
         response = web.FileResponse(drive_item["path"])
         response.headers['Cache-Control'] = f'public, max-age={1337*420}'
-        response.headers['Content-Disposition'] = f'attachment; filename="{drive_item["name"]}"'
         return response
 
     async def post(self):
@@ -58,10 +57,8 @@ class UploadView(BaseView):
             filename = field.filename
             if not filename:
                 continue
-            
-            name = str(uuid.uuid4()) + pathlib.Path(filename).suffix
 
-            file_path = pathlib.Path(UPLOAD_DIR).joinpath(name)
+            file_path = pathlib.Path(UPLOAD_DIR).joinpath(filename.strip("/").strip("."))
             files.append(file_path)
 
             async with aiofiles.open(str(file_path.absolute()), 'wb') as f: