Merge pull request #472 from eyra/consent

Consent

core/assets/css/app.css

@@ -2,6 +2,274 @@
 
 @tailwind components;
 
+trix-toolbar {
+  @apply mb-4 drop-shadow-lg h-8; 
+}
+
+trix-toolbar .trix-button-row {
+  height: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  overflow-x: auto; 
+}
+
+trix-toolbar .trix-button-group {
+  @apply flex rounded-lg overflow-hidden h-full; 
+  }
+  trix-toolbar .trix-button-group:not(:first-child) {
+    margin-left: 1.5vw; }
+    @media (max-width: 768px) {
+      trix-toolbar .trix-button-group:not(:first-child) {
+        margin-left: 0; } }
+
+trix-toolbar .trix-button-group-spacer {
+  flex-grow: 1; }
+  @media (max-width: 768px) {
+    trix-toolbar .trix-button-group-spacer {
+      display: none; } }
+
+trix-toolbar .trix-button {
+  height: 100%;
+  padding: 4px 4px 4px 4px;
+  position: relative;
+  float: left;
+  font-size: 0.75em;
+  font-weight: 600;
+  white-space: nowrap;
+  outline: none;
+  border: none;
+  padding: 4px;
+  border-radius: 0;
+  background: #fff; }
+  trix-toolbar .trix-button:not(:first-child) {
+    border-left: 1px solid #eee; }
+  trix-toolbar .trix-button.trix-active {
+    @apply bg-primarylight;
+  }
+  trix-toolbar .trix-button:not(:disabled) {
+    cursor: pointer; }
+  trix-toolbar .trix-button:disabled {
+    color: rgba(0, 0, 0, 0.3); }
+  @media (max-width: 768px) {
+    trix-toolbar .trix-button {
+      letter-spacing: -0.01em;
+      padding: 0 0.3em; } }
+
+trix-toolbar .trix-button--icon {  
+  font-size: inherit;
+  width: 2.6em;
+  max-width: calc(0.8em + 4vw);
+  text-indent: -9999px; }
+  @media (max-width: 768px) {
+    trix-toolbar .trix-button--icon {
+      height: 100%;
+      max-width: calc(0.8em + 3.5vw); } }
+  trix-toolbar .trix-button--icon::before {
+    display: inline-block;
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    bottom: 4px;
+    left: 4px;
+    content: "";
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain; }
+    @media (max-width: 768px) {
+      trix-toolbar .trix-button--icon::before {
+        right: 6%;
+        left: 6%; } }
+  trix-toolbar .trix-button--icon:disabled::before {
+    opacity: 0.3; }
+
+.trix-button-group--file-tools {
+  border: 0 !important;
+}  
+
+.trix-button--icon-attach,
+.trix-button--icon-decrease-nesting-level,
+.trix-button--icon-increase-nesting-level {
+  display :none;
+}
+
+trix-toolbar .trix-button--icon-attach::before {
+  @apply bg-wysiwyg-attach
+}
+
+trix-toolbar .trix-button--icon-bold::before {
+  @apply bg-wysiwyg-bold  
+}
+
+trix-toolbar .trix-button--icon-italic::before {
+  @apply bg-wysiwyg-italic  
+}
+
+trix-toolbar .trix-button--icon-link::before {
+  @apply bg-wysiwyg-link  
+}
+
+trix-toolbar .trix-button--icon-strike::before {
+  @apply bg-wysiwyg-strike  
+}
+
+trix-toolbar .trix-button--icon-quote::before {
+  @apply bg-wysiwyg-quote  
+}
+
+trix-toolbar .trix-button--icon-heading-1::before {
+  @apply bg-wysiwyg-heading  
+}
+
+trix-toolbar .trix-button--icon-code::before {
+  @apply bg-wysiwyg-code  
+}
+
+trix-toolbar .trix-button--icon-bullet-list::before {
+  @apply bg-wysiwyg-list-bullet  
+}
+
+trix-toolbar .trix-button--icon-number-list::before {
+  @apply bg-wysiwyg-list-number  
+}
+
+trix-toolbar .trix-button--icon-undo::before {
+  @apply bg-wysiwyg-history-undo  
+}
+
+trix-toolbar .trix-button--icon-redo::before {
+  @apply bg-wysiwyg-history-redo  
+}
+
+trix-toolbar .trix-button--icon-decrease-nesting-level::before {
+  @apply bg-wysiwyg-nesting-level-decrease  
+}
+
+trix-toolbar .trix-button--icon-increase-nesting-level::before {
+  @apply bg-wysiwyg-nesting-level-increase  
+}
+
+trix-toolbar .trix-dialogs {
+  @apply relative;
+}
+
+trix-toolbar .trix-dialog {
+  @apply absolute left-0 right-0 top-4 bg-white rounded-lg drop-shadow-lg p-4 z-10;
+}
+
+trix-toolbar .trix-input--dialog {
+  @apply h-12 rounded bg-white outline-none pl-4 font-body text-bodymedium placeholder-grey2 text-grey1 border-2 border-grey3 focus:border-primary;
+}
+trix-toolbar .trix-input--dialog.validate:invalid {
+  @apply border-warning bg-white
+}
+
+trix-toolbar [data-trix-dialog] [data-trix-validate]:invalid {
+  @apply border-warning bg-white
+}
+
+trix-toolbar .trix-button--dialog {
+  @apply text-button font-button text-primary;
+}
+
+trix-toolbar .trix-dialog__link-fields .trix-button-group {
+  @apply pl-4;
+}
+
+trix-toolbar .trix-dialog__link-fields .trix-button {
+  border-left: 0px; 
+}
+
+trix-toolbar .trix-dialog--link {
+  max-width: 600px; }
+
+trix-toolbar .trix-dialog__link-fields {
+  display: flex;
+  align-items: baseline; }
+  trix-toolbar .trix-dialog__link-fields .trix-input {
+    flex: 1; }
+  trix-toolbar .trix-dialog__link-fields .trix-button-group {
+    flex: 0 0 content;
+    margin: 0; }
+
+
+trix-editor, .wysiwig {
+  @apply text-bodylarge font-body text-grey1 w-full outline-none;
+}
+
+trix-editor h1, .wysiwig h1 {
+  @apply text-title2 font-title2 mb-8;
+}
+
+trix-editor strong, .wysiwig strong {
+  @apply font-bold;
+}
+
+trix-editor h1 strong, .wysiwig h1 strong {
+  @apply font-title1;
+}
+
+trix-editor strong, .wysiwig strong {
+  @apply font-bold;
+}
+
+trix-editor a:not(.no-underline), .wysiwig a:not(.no-underline) {
+  @apply text-primary underline cursor-pointer;
+}
+
+trix-editor a:visited, .wysiwig a:visited {
+  @apply text-primary;
+} 
+
+trix-editor ul, .wysiwig ul {
+  @apply mb-8 list-none;
+}
+
+trix-editor ul li::before, .wysiwig ul li::before {
+  @apply bg-wysiwyg-bullet text-primary;
+  vertical-align: center;
+  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
+  display: inline-block; /* Needed to add space between the bullet and the text */
+  width: 30px; /* Also needed for space (tweak if needed) */
+  margin-left: 6px; /* Also needed for space (tweak if needed) */
+  background-size:     10px 10px;
+  background-repeat:   no-repeat;
+  background-position: left center;    
+}  
+
+trix-editor ol, .wysiwig ol {
+  @apply mb-8 list-none;
+  counter-reset: li;
+}
+
+trix-editor ol li::before, .wysiwig ol li::before {
+  @apply text-primary font-label text-title5;
+  content: counter(li) "."; color: theme('colors.primary');
+  display: inline-block;
+  width: 30px; /* Also needed for space (tweak if needed) */
+  margin-left: 6px; /* Also needed for space (tweak if needed) */
+}
+
+trix-editor ol li, .wysiwig ol li {
+  counter-increment: li
+}  
+
+trix-editor pre, .wysiwig pre {    
+  @apply text-mono font-mono text-grey2 mb-8 p-8 bg-grey5 rounded-lg relative w-full whitespace-pre-wrap;
+  vertical-align: top;
+}
+
+trix-editor blockquote, .wysiwig blockquote {
+  @apply pl-11 pr-11 mb-8 relative font-quote text-quote;
+}
+
+trix-editor blockquote::before, .wysiwig blockquote::before {
+  @apply text-title0 font-title0 text-primary absolute -left-2px top-6px;
+  vertical-align: center;
+  content: "”";
+  width: 0px;
+}  
+
 @tailwind utilities;
 
 @layer utilities {

core/assets/js/app.js

@@ -31,6 +31,7 @@ import { LiveContent, LiveField } from "./live_content";
 import { Tabbar, TabbarItem, TabbarFooterItem } from "./tabbar";
 import { Clipboard } from "./clipboard";
 import { FeldsparApp } from "./feldspar_app";
+import { Wysiwyg } from "./wysiwyg";
 
 window.registerAPNSDeviceToken = registerAPNSDeviceToken;
 
@@ -103,6 +104,7 @@ let Hooks = {
   TabbarFooterItem,
   NativeWrapper,
   FeldsparApp,
+  Wysiwyg
 };
 
 let liveSocket = new LiveSocket("/live", Socket, {

core/assets/js/wysiwyg.js

@@ -0,0 +1,10 @@
+import Trix from "trix";
+
+export const Wysiwyg = {
+  mounted() {
+    const element = document.querySelector("trix-editor");  
+    element.editor.element.addEventListener("trix-change", (e) => {
+      element.dispatchEvent(new Event("input", {bubbles: true}))
+    });
+  },
+};

core/assets/package.json

@@ -19,6 +19,7 @@
     "phoenix_live_view": "file:../deps/phoenix_live_view",
     "stringify": "^5.2.0",
     "topbar": "^0.1.4",
+    "trix": "^2.0.7",
     "workbox-precaching": "^6.1.5",
     "workbox-routing": "^6.1.5",
     "workbox-strategies": "^6.1.5"

core/assets/postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
-    plugins: [
-      require("tailwindcss"),
-      require("autoprefixer"),
-    ],
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
 };