diff options
Diffstat (limited to 'frontend/app/views/tile')
| -rw-r--r-- | frontend/app/views/tile/forms/tile.constants.js | 2 | ||||
| -rw-r--r-- | frontend/app/views/tile/forms/tile.form.hyperlink.js | 4 | ||||
| -rw-r--r-- | frontend/app/views/tile/handles/tile.text.js | 31 |
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> |