Doodle palette, options, fill tool (#172)

2 files changed, 72 insertions, 6 deletions

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 7056e2208..7ef3dcc43 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -3874,7 +3874,6 @@ button.icon-button.active i.fa-retweet {
 }
 
 .boost-modal,
-.doodle-modal,
 .confirmation-modal,
 .report-modal,
 .actions-modal,
@@ -3893,10 +3892,6 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-.doodle-modal {
-  width: unset;
-}
-
 .actions-modal {
   .status {
     background: $white;
@@ -3920,7 +3915,6 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-.doodle-modal__action-bar,
 .boost-modal__action-bar,
 .confirmation-modal__action-bar,
 .mute-modal__action-bar,
@@ -4785,3 +4779,5 @@ noscript {
     }
   }
 }
+
+@import 'doodle';
diff --git a/app/javascript/styles/doodle.scss b/app/javascript/styles/doodle.scss
new file mode 100644
index 000000000..cc785a8ad
--- /dev/null
+++ b/app/javascript/styles/doodle.scss
@@ -0,0 +1,70 @@
+.doodle-modal {
+  @extend .boost-modal;
+  width: unset;
+}
+
+.doodle-modal__container {
+  line-height: 0; // remove weird gap under canvas
+  canvas {
+    border: 5px solid #d9e1e8;
+  }
+}
+
+.doodle-modal__action-bar {
+  @extend .boost-modal__action-bar;
+
+  .filler {
+    flex-grow: 1;
+  }
+
+  .doodle-toolbar {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 0;
+    justify-content: space-around;
+
+    &.with-inputs {
+      label {
+        display: inline-block;
+        width: 70px;
+        text-align: right;
+        margin-right: 2px;
+      }
+
+      input[type="number"],input[type="text"] {
+        width: 40px;
+      }
+      span.val {
+        display: inline-block;
+        text-align: left;
+        width: 50px;
+      }
+    }
+  }
+
+  .doodle-palette {
+    padding-right: 0 !important;
+    border: 1px solid black;
+    line-height: .2rem;
+    flex-grow: 0;
+    background: white;
+
+    button {
+      appearance: none;
+      width: 1rem;
+      height: 1rem;
+      margin: 0; padding: 0;
+      text-align: center;
+      color: black;
+      text-shadow: 0 0 1px white;
+      cursor: pointer;
+      box-shadow: inset 0 0 1px rgba(white, .5);
+      border: 1px solid black;
+
+      &.selected {
+        outline-offset:-1px;
+        outline: 1px dotted white;
+      }
+    }
+  }
+}