Add UI to choose oekaki background color. #555

src/General/css/style.css

@@ -1444,6 +1444,31 @@ input#qr-filename {
   width: 0;
   height: 100%;
 }
+#qr .oekaki-bg {
+  position: relative;
+  display: inline-block;
+  height: 100%;
+  width: 10%;
+  margin-left: 3px;
+}
+#qr .oekaki-bg > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+}
+#qr .oekaki-bg > :not([name="oekaki-bgcolor"]) {
+  z-index: 1;
+}
+#qr [name="oekaki-bgcolor"] {
+  height: 100%;
+  width: 100%;
+  border: none;
+  padding: 0;
+}
+#qr [name="oekaki-bg"]:not(:checked) ~ [name="oekaki-bgcolor"] {
+  visibility: hidden;
+}
 #qr input[type="file"] {
   visibility: hidden;
   position: absolute;

src/General/html/Features/QuickReply.html

@@ -29,6 +29,7 @@
     <input type="button" id="qr-draw-button" value="Draw">
     <label><span>Width:</span><input name="oekaki-width" value="400" type="number" class="field" size="1"></label>
     <label><span>Height:</span><input name="oekaki-height" value="400" type="number" class="field" size="1"></label>
+    <span class="oekaki-bg" title="Background Color"><input name="oekaki-bg" type="checkbox" checked><input name="oekaki-bgcolor" type="color" value="#ffffff"></span>
   </div>
   <div id="file-n-submit">
     <input type="button" id="qr-file-button" value="Files">

src/Posting/QR.oekaki.coffee

@@ -82,10 +82,14 @@ QR.oekaki =
       FCX.oekakiName = 'tegaki.png'
       Tegaki.open
         onDone: FCX.oekakiCB
-        onCancel: ->
+        onCancel: -> Tegaki.bgColor = '#ffffff'
         width:  +document.querySelector('#qr [name=oekaki-width]').value
         height: +document.querySelector('#qr [name=oekaki-height]').value
-        bgColor: '#ffffff'
+        bgColor:
+          if document.querySelector('#qr [name=oekaki-bg]').checked
+            document.querySelector('#qr [name=oekaki-bgcolor]').value
+          else
+            'transparent'
 
   button: ->
     if QR.selected.file