Merge pull request #1176 from ssbc/feature/content-warning-creation

Create Content Warnings (WIP)

Author: cinnamon-bun

lib/depject/message/html/compose.js

@@ -1,6 +1,5 @@
 const h = require('mutant/h')
 const when = require('mutant/when')
-const send = require('mutant/send')
 const resolve = require('mutant/resolve')
 const Value = require('mutant/value')
 const computed = require('mutant/computed')
@@ -46,14 +45,17 @@ exports.create = function (api) {
       'ev-dragover': onDragOver,
       'ev-drop': onDrop,
       'ev-input': function () {
-        hasContent.set(!!textArea.value)
+        refreshHasContent()
         queueSave()
       },
       'ev-blur': () => {
         clearTimeout(blurTimeout)
         blurTimeout = setTimeout(() => focused.set(false), 200)
       },
-      'ev-focus': send(focused.set, true),
+      'ev-focus': () => {
+        clearTimeout(blurTimeout)
+        focused.set(true)
+      },
       'ev-paste': ev => {
         const files = ev.clipboardData && ev.clipboardData.files
         if (!files || !files.length) return
@@ -69,12 +71,32 @@ exports.create = function (api) {
       placeholder
     })
 
+    const contentWarningInput = h('input.contentWarning', {
+      placeholder: 'Write a content warning (optional)',
+      'ev-input': function () {
+        refreshHasContent()
+        queueSave()
+      },
+      'ev-blur': () => {
+        clearTimeout(blurTimeout)
+        blurTimeout = setTimeout(() => focused.set(false), 200)
+      },
+      'ev-focus': () => {
+        clearTimeout(blurTimeout)
+        focused.set(true)
+      }
+    })
+
     if (draftKey) {
       const draft = window.localStorage[`patchwork.drafts.${draftKey}`]
       if (draft) {
         textArea.value = draft
-        hasContent.set(!!textArea.value)
       }
+      const draftCW = window.localStorage[`patchwork.drafts.contentWarning.${draftKey}`]
+      if (draftCW) {
+        contentWarningInput.value = draftCW
+      }
+      refreshHasContent()
     }
 
     const warningMessage = Value(null)
@@ -113,6 +135,7 @@ exports.create = function (api) {
 
     const actions = h('section.actions', [
       fileInput,
+      contentWarningInput,
       h('div', [
         when(hasContent, clearButton),
         publishBtn
@@ -136,7 +159,7 @@ exports.create = function (api) {
 
     composer.setText = function (value) {
       textArea.value = value
-      hasContent.set(!!textArea.value)
+      refreshHasContent()
     }
 
     return composer
@@ -148,10 +171,15 @@ exports.create = function (api) {
         return
       }
       textArea.value = ''
-      hasContent.set(!!textArea.value)
+      contentWarningInput.value = ''
+      refreshHasContent()
       save()
     }
 
+    function refreshHasContent () {
+      hasContent.set(!!textArea.value || !!contentWarningInput.value)
+    }
+
     function queueSave () {
       saveTimer = setTimeout(save, 1000)
     }
@@ -164,6 +192,11 @@ exports.create = function (api) {
         } else {
           window.localStorage[`patchwork.drafts.${draftKey}`] = textArea.value
         }
+        if (!contentWarningInput.value) {
+          delete window.localStorage[`patchwork.drafts.contentWarning.${draftKey}`]
+        } else {
+          window.localStorage[`patchwork.drafts.contentWarning.${draftKey}`] = contentWarningInput.value
+        }
       }
     }
 
@@ -245,6 +278,10 @@ exports.create = function (api) {
         })
       })
 
+      if (contentWarningInput.value) {
+        content.contentWarning = contentWarningInput.value
+      }
+
       try {
         if (typeof prepublish === 'function') {
           content = prepublish(content)
@@ -271,7 +308,8 @@ exports.create = function (api) {
         } else {
           if (msg) {
             textArea.value = ''
-            hasContent.set(!!textArea.value)
+            contentWarningInput.value = ''
+            refreshHasContent()
             save()
           }
           if (cb) cb(null, msg)

styles/base/compose.mcss

@@ -60,7 +60,16 @@ Compose {
         box-shadow: none
       }
     }
-
+    input.contentWarning {
+      border: 2px solid #ddd;
+      border-radius: 3px;
+      flex: 1;
+      font-size: 120%
+      margin-left: 5px;
+      margin-right: 5px;
+      min-width: 0;
+      padding: 5px 6px;
+    }
     (button) {
       -clear {
         margin-right: 5px

styles/dark/compose.mcss

@@ -41,6 +41,20 @@ Compose {
         content: "<path d="M13 14c0 2.21-1.79 4-4 4s-4-1.79-4-4V3c0-1.66 1.34-3 3-3s3 1.34 3 3v9c0 1.1-.9 2-2 2s-2-.9-2-2V4h1v8c0 .55.45 1 1 1s1-.45 1-1V3c0-1.1-.9-2-2-2s-2 .9-2 2v11c0 1.66 1.34 3 3 3s3-1.34 3-3V4h1v10z"/>"
       }
     }
+    input.contentWarning {
+      background-color: #2d2c2c;
+      border: 2px solid #2d2c2c;
+      color: #ccc
+      [disabled] {
+        opacity: 0.5
+      }
+      :focus {
+        outline: 0
+      }
+      ::-webkit-input-placeholder {
+        color: #757474
+      }
+    }
     (button) {
       :hover {
         background: #6a9fba

styles/light/compose.mcss

@@ -49,6 +49,9 @@ Compose {
         content: '📎 Attach File'
       }
     }
+    input.contentWarning {
+      border: 2px solid #dedede8c;
+    }
   }
   -expanded {
     textarea {