charles texts

3 files changed, 28 insertions, 9 deletions

diff --git a/frontend/app/views/tile/forms/tile.constants.js b/frontend/app/views/tile/forms/tile.constants.js
index d7dea31..273085c 100644
--- a/frontend/app/views/tile/forms/tile.constants.js
+++ b/frontend/app/views/tile/forms/tile.constants.js
@@ -64,6 +64,8 @@ export const CURSORS = [
 export const MARQUEE_DIRECTIONS = [
   { name: 'left', label: 'Left', },
   { name: 'right', label: 'Right', },
+  // { name: 'up', label: 'Up', },
+  // { name: 'down', label: 'Down', },
 ]
 
 export const UNITS = [
diff --git a/frontend/app/views/tile/forms/tile.form.hyperlink.js b/frontend/app/views/tile/forms/tile.form.hyperlink.js
index b9fb038..b536e1c 100644
--- a/frontend/app/views/tile/forms/tile.form.hyperlink.js
+++ b/frontend/app/views/tile/forms/tile.form.hyperlink.js
@@ -21,10 +21,10 @@ export default function TileHyperlinkForm({ tile, pageList, popupList, cursors,
   //   tile.target_page_id === CLOSE_POPUP_LINK
   // )
   let cursor
-  console.log(tile.settings.cursor, tile.settings.custom_cursor_id)
+  // console.log(tile.settings.cursor, tile.settings.custom_cursor_id)
   if (tile.settings.cursor === 'custom' && tile.settings.custom_cursor_id) {
     cursor = cursors[tile.settings.custom_cursor_id]
-    console.log(cursor)
+    // console.log(cursor)
   }
   return (
     <div>
diff --git a/frontend/app/views/tile/handles/tile.text.js b/frontend/app/views/tile/handles/tile.text.js
index cfd4b30..373dca0 100644
--- a/frontend/app/views/tile/handles/tile.text.js
+++ b/frontend/app/views/tile/handles/tile.text.js
@@ -2,6 +2,11 @@ import React from 'react'
 import { generateTransform, unitsDimension, hexToRgb, pickCursor } from 'app/views/tile/tile.utils'
 import Marquee from "react-fast-marquee"
 
+const VERTICAL_MARQUEE_DIRECTION = {
+  up: "left",
+  down: "right",
+}
+
 export default function TileText({ tile, box, bounds, videoBounds, cursors, viewing, onMouseDown, onDoubleClick, onMouseEnter }) {
   if (!tile.settings.content) {
     return null
@@ -37,20 +42,32 @@ export default function TileText({ tile, box, bounds, videoBounds, cursors, view
   style.color = tile.settings.font_color || '#dddddd!important'
 
   if (tile.settings.is_marquee) {
+    const verticalDirection = VERTICAL_MARQUEE_DIRECTION[tile.settings.marquee_direction]
+    const direction = verticalDirection || tile.settings.marquee_direction || "left"
     const gradientColor = hexToRgb(tile.settings.marquee_gradient_color)
-    style.width = "100vw"
-    style.height = style.fontSize + "px"
+    let contentStyle = {}
+    if (verticalDirection) {
+      // style.top = 0
+      style.width = "100vh"
+      style.height = tile.settings.marquee_content_width + "px"
+      style.transform += " rotate(90deg)"
+      contentStyle.transform = "rotate(-90deg)"
+      contentStyle.width = tile.settings.marquee_content_width + "px"
+      // contentStyle.height = "100vh"
+    } else {
+      style.width = "100vw"
+      style.height = style.fontSize + "px"
+      contentStyle.width = (tile.settings.marquee_content_width || 200) + "px"
+      contentStyle.height = (tile.settings.marquee_content_height || (parseInt(tile.settings.font_size) + 20)) + "px"
+    }
     content = (
       <Marquee
-        direction={tile.settings.marquee_direction || "left"}
+        direction={direction}
         speed={tile.settings.marquee_speed || 1}
         gradient={!!tile.settings.marquee_gradient}
         gradientColor={gradientColor ? [gradientColor.r, gradientColor.g, gradientColor.b] : [0,0,0]}
       >
-        <div style={{
-          width: (tile.settings.marquee_content_width || 200) + "px",
-          height: (tile.settings.marquee_content_height || (parseInt(tile.settings.font_size) + 20)) + "px",
-        }}>
+        <div style={contentStyle}>
           {content}
         </div>
       </Marquee>