mirror of
https://github.com/balzack/databag.git
synced 2025-02-12 03:29:16 +00:00
support message styling
This commit is contained in:
Roland Osborne
parent
5c663e9c6e
commit
226d5e5f0b
@ -9,6 +9,7 @@
|
||||
"antd": "^4.19.1",
|
||||
"base-64": "^1.0.0",
|
||||
"react": "^17.0.2",
|
||||
"react-color": "^2.19.3",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-easy-crop": "^4.1.4",
|
||||
"react-player": "^2.10.0",
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import ReactPlayer from 'react-player'
|
||||
import { SketchPicker } from "react-color";
|
||||
import { Button, Dropdown, Input, Tooltip, Menu } from 'antd';
|
||||
import { AddTopicWrapper, BusySpin } from './AddTopic.styled';
|
||||
import { Carousel } from '../../../Carousel/Carousel';
|
||||
@ -52,6 +53,24 @@ export function AddTopic() {
|
||||
</Menu>
|
||||
);
|
||||
|
||||
const picker = (
|
||||
<Menu style={{ backgroundColor: 'unset', boxShadow: 'unset' }}>
|
||||
<SketchPicker disableAlpha={true}
|
||||
color={state.textColor}
|
||||
onChange={(color) => {
|
||||
actions.setTextColor(color.hex);
|
||||
}} />
|
||||
</Menu>
|
||||
);
|
||||
|
||||
const sizer = (
|
||||
<Menu>
|
||||
<Menu.Item key={8}><div onClick={() => actions.setTextSize(8)}>Small</div></Menu.Item>
|
||||
<Menu.Item key={14}><div onClick={() => actions.setTextSize(14)}>Medium</div></Menu.Item>
|
||||
<Menu.Item key={20}><div onClick={() => actions.setTextSize(20)}>Large</div></Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
const onSend = () => {
|
||||
if (state.messageText || state.assets.length) {
|
||||
actions.addTopic();
|
||||
@ -92,6 +111,7 @@ export function AddTopic() {
|
||||
</div>
|
||||
<div class="input">
|
||||
<Input.TextArea placeholder="Message" autoSize={{ minRows: 2, maxRows: 6 }} onKeyPress={onKey}
|
||||
style={{ color: state.textColor, fontSize: state.textSize }}
|
||||
onChange={(e) => actions.setMessageText(e.target.value)} value={state.messageText} />
|
||||
</div>
|
||||
<div class="buttons">
|
||||
@ -101,10 +121,14 @@ export function AddTopic() {
|
||||
</Dropdown>
|
||||
</div>
|
||||
<div class="option">
|
||||
<Dropdown overlay={sizer} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="topRight">
|
||||
<Button icon={<FontSizeOutlined />} size="large" />
|
||||
</Dropdown>
|
||||
</div>
|
||||
<div class="option">
|
||||
<Dropdown overlay={picker} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="topRight">
|
||||
<Button icon={<FontColorsOutlined />} size="large" />
|
||||
</Dropdown>
|
||||
</div>
|
||||
<div class="send">
|
||||
<Button icon={<SendOutlined />} onClick={onSend} size="large" />
|
||||
|
||||
@ -8,9 +8,10 @@ export function useAddTopic() {
|
||||
const [state, setState] = useState({
|
||||
assets: [],
|
||||
messageText: null,
|
||||
messageColor: null,
|
||||
messageSize: null,
|
||||
backgroundColor: null,
|
||||
textColor: '#444444',
|
||||
textColorSet: false,
|
||||
textSize: 14,
|
||||
textSizeSet: false,
|
||||
busy: false,
|
||||
});
|
||||
|
||||
@ -64,34 +65,31 @@ export function useAddTopic() {
|
||||
updateAsset(index, { position });
|
||||
},
|
||||
removeAsset: (idx) => { removeAsset(idx) },
|
||||
setTextColor: (value) => {
|
||||
updateState({ textColorSet: true, textColor: value });
|
||||
},
|
||||
setMessageText: (value) => {
|
||||
updateState({ messageText: value });
|
||||
},
|
||||
setMessageColor: (value) => {
|
||||
updateState({ messageColor: value });
|
||||
},
|
||||
setMessageWeight: (value) => {
|
||||
updateState({ messageWeight: value });
|
||||
},
|
||||
setMessageSize: (value) => {
|
||||
updateState({ messageSize: value });
|
||||
},
|
||||
setBackgroundColor: (value) => {
|
||||
updateState({ backgroundColor: value });
|
||||
setTextSize: (value) => {
|
||||
updateState({ textSizeSet: true, textSize: value });
|
||||
},
|
||||
addTopic: async () => {
|
||||
if (!state.busy) {
|
||||
updateState({ busy: true });
|
||||
try {
|
||||
let message = { text: state.messageText, textColor: state.messageColor,
|
||||
textSize: state.messageSize, backgroundColor: state.backgroundColor };
|
||||
let message = {
|
||||
text: state.messageText,
|
||||
textColor: state.textColorSet ? state.textColor : null,
|
||||
textSize: state.textSizeSet ? state.textSize : null,
|
||||
};
|
||||
if (cardId) {
|
||||
await card.actions.addChannelTopic(cardId, channelId, message, state.assets);
|
||||
}
|
||||
else {
|
||||
await channel.actions.addChannelTopic(channelId, message, state.assets);
|
||||
}
|
||||
updateState({ messageText: null, messageColor: null, messageSize: null, backgroundColor: null, assets: [] });
|
||||
updateState({ messageText: null, textColor: '#444444', textColorSet: false, textSize: 12, textSizeSet: false, assets: [] });
|
||||
}
|
||||
catch(err) {
|
||||
window.alert(err);
|
||||
|
||||
@ -72,6 +72,7 @@ export function TopicItem({ host, topic }) {
|
||||
return (
|
||||
<div class="editing">
|
||||
<Input.TextArea style={{ resize: 'none' }} defaultValue={state.message?.text} placeholder="message"
|
||||
style={{ color: state.textColor, fontSize: state.textSize }}
|
||||
onChange={(e) => actions.setEdit(e.target.value)} rows={3} bordered={false}/>
|
||||
<div class="controls">
|
||||
<Space>
|
||||
@ -82,7 +83,7 @@ export function TopicItem({ host, topic }) {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <div>{ state.message?.text }</div>
|
||||
return <div style={{ color: state.textColor, fontSize: state.textSize }}>{ state.message?.text }</div>
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -18,6 +18,8 @@ export function useTopicItem(topic) {
|
||||
assets: [],
|
||||
editing: false,
|
||||
busy: false,
|
||||
textColor: '#444444',
|
||||
textSize: 14,
|
||||
});
|
||||
|
||||
const profile = useContext(ProfileContext);
|
||||
@ -35,6 +37,9 @@ export function useTopicItem(topic) {
|
||||
owner = true;
|
||||
}
|
||||
|
||||
let textColor = '#444444';
|
||||
let textSize = 14;
|
||||
|
||||
if (!topic?.data) {
|
||||
console.log("invalid topic:", topic);
|
||||
return;
|
||||
@ -47,6 +52,12 @@ export function useTopicItem(topic) {
|
||||
if (status === 'confirmed') {
|
||||
try {
|
||||
message = JSON.parse(data);
|
||||
if (message.textColor != null) {
|
||||
textColor = message.textColor;
|
||||
}
|
||||
if (message.textSize != null) {
|
||||
textSize = message.textSize;
|
||||
}
|
||||
if (message.assets) {
|
||||
assets = message.assets;
|
||||
delete message.assets;
|
||||
@ -64,11 +75,11 @@ export function useTopicItem(topic) {
|
||||
const { guid, created } = topic.data.topicDetail;
|
||||
if (profile.state.profile.guid == guid) {
|
||||
const { name, handle, imageUrl } = profile.actions.getProfile();
|
||||
updateState({ name, handle, imageUrl, status, message, transform, assets, ready, created, owner });
|
||||
updateState({ name, handle, imageUrl, status, message, transform, assets, ready, created, owner, textColor, textSize });
|
||||
}
|
||||
else {
|
||||
const { name, handle, imageUrl } = card.actions.getCardProfileByGuid(guid);
|
||||
updateState({ name, handle, imageUrl, status, message, transform, assets, ready, created, owner });
|
||||
updateState({ name, handle, imageUrl, status, message, transform, assets, ready, created, owner, textColor, textSize });
|
||||
}
|
||||
}
|
||||
}, [profile, card, conversation, topic]);
|
||||
|
||||
@ -1237,6 +1237,11 @@
|
||||
resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
|
||||
integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
|
||||
|
||||
"@icons/material@^0.2.4":
|
||||
version "0.2.4"
|
||||
resolved "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz"
|
||||
integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
|
||||
|
||||
"@istanbuljs/load-nyc-config@^1.0.0":
|
||||
version "1.1.0"
|
||||
resolved "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz"
|
||||
@ -1933,11 +1938,6 @@
|
||||
"@types/scheduler" "*"
|
||||
csstype "^3.0.2"
|
||||
|
||||
"@types/resize-observer-browser@^0.1.6":
|
||||
version "0.1.7"
|
||||
resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.7.tgz#294aaadf24ac6580b8fbd1fe3ab7b59fe85f9ef3"
|
||||
integrity sha512-G9eN0Sn0ii9PWQ3Vl72jDPgeJwRWhv2Qk/nQkJuWmRmOB4HX3/BhD5SE1dZs/hzPZL/WKnvF0RHdTSG54QJFyg==
|
||||
|
||||
"@types/resolve@1.17.1":
|
||||
version "1.17.1"
|
||||
resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz"
|
||||
@ -5863,7 +5863,7 @@ lines-and-columns@^1.1.6:
|
||||
|
||||
load-script@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
|
||||
resolved "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz"
|
||||
integrity sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=
|
||||
|
||||
loader-runner@^4.2.0:
|
||||
@ -5924,6 +5924,11 @@ locate-path@^6.0.0:
|
||||
dependencies:
|
||||
p-locate "^5.0.0"
|
||||
|
||||
lodash-es@^4.17.15:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz"
|
||||
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
|
||||
|
||||
lodash.debounce@^4.0.8:
|
||||
version "4.0.8"
|
||||
resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
|
||||
@ -5949,7 +5954,7 @@ lodash.uniq@^4.5.0:
|
||||
resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
|
||||
integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
|
||||
|
||||
lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
|
||||
lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
|
||||
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
|
||||
@ -6001,6 +6006,11 @@ makeerror@1.0.12:
|
||||
dependencies:
|
||||
tmpl "1.0.5"
|
||||
|
||||
material-colors@^1.2.1:
|
||||
version "1.2.6"
|
||||
resolved "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz"
|
||||
integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
|
||||
|
||||
mdn-data@2.0.14:
|
||||
version "2.0.14"
|
||||
resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz"
|
||||
@ -6025,7 +6035,7 @@ memfs@^3.1.2, memfs@^3.4.1:
|
||||
|
||||
memoize-one@^5.1.1:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
|
||||
resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz"
|
||||
integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
|
||||
|
||||
memoize-one@^6.0.0:
|
||||
@ -7174,7 +7184,7 @@ prompts@^2.0.1, prompts@^2.4.2:
|
||||
kleur "^3.0.3"
|
||||
sisteransi "^1.0.5"
|
||||
|
||||
prop-types@^15.7.2, prop-types@^15.8.1:
|
||||
prop-types@^15.5.10, prop-types@^15.7.2, prop-types@^15.8.1:
|
||||
version "15.8.1"
|
||||
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
|
||||
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
|
||||
@ -7631,6 +7641,19 @@ react-app-polyfill@^3.0.0:
|
||||
regenerator-runtime "^0.13.9"
|
||||
whatwg-fetch "^3.6.2"
|
||||
|
||||
react-color@^2.19.3:
|
||||
version "2.19.3"
|
||||
resolved "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz"
|
||||
integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
|
||||
dependencies:
|
||||
"@icons/material" "^0.2.4"
|
||||
lodash "^4.17.15"
|
||||
lodash-es "^4.17.15"
|
||||
material-colors "^1.2.1"
|
||||
prop-types "^15.5.10"
|
||||
reactcss "^1.2.0"
|
||||
tinycolor2 "^1.4.1"
|
||||
|
||||
react-dev-utils@^12.0.0:
|
||||
version "12.0.0"
|
||||
resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz"
|
||||
@ -7685,7 +7708,7 @@ react-error-overlay@^6.0.10:
|
||||
|
||||
react-fast-compare@^3.0.1:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
|
||||
resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz"
|
||||
integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
|
||||
|
||||
react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0:
|
||||
@ -7704,9 +7727,9 @@ react-lifecycles-compat@^3.0.4:
|
||||
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
|
||||
|
||||
react-player@^2.10.0:
|
||||
version "2.10.0"
|
||||
resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.10.0.tgz#bd3e0f10ae756cc644efb14177a515d455d97e20"
|
||||
integrity sha512-PccIqea9nxSHAdai6R+Yj9lp6tb2lyXWbaF6YVHi5uO4FiXYMKKr9rMXJrivwV5vXwQa65rYKBmwebsBmRTT3w==
|
||||
version "2.10.1"
|
||||
resolved "https://registry.npmjs.org/react-player/-/react-player-2.10.1.tgz"
|
||||
integrity sha512-ova0jY1Y1lqLYxOehkzbNEju4rFXYVkr5rdGD71nsiG4UKPzRXQPTd3xjoDssheoMNjZ51mjT5ysTrdQ2tEvsg==
|
||||
dependencies:
|
||||
deepmerge "^4.0.0"
|
||||
load-script "^1.0.0"
|
||||
@ -7720,11 +7743,10 @@ react-refresh@^0.11.0:
|
||||
integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
|
||||
|
||||
react-resize-detector@^7.0.0:
|
||||
version "7.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-7.0.0.tgz#fbd46917ee905b7796c797aa6b301b454a6b9229"
|
||||
integrity sha512-Xd1POfpVzH9O3F/xB/0xYy2ijtKjE/z7y4c/aJP593YSzhPy2vDhsNPjes+uQbgL1RezxJajQ679qPs8K5LAFw==
|
||||
version "7.1.1"
|
||||
resolved "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-7.1.1.tgz"
|
||||
integrity sha512-rU54VTstNzFLZAmMNHqt8xINjDWP7SQR05A2HUW0OGvl4vcrXzgaxrrqAY5tZMfkLkoYm5u0i0qGqCjdc2jyAA==
|
||||
dependencies:
|
||||
"@types/resize-observer-browser" "^0.1.6"
|
||||
lodash "^4.17.21"
|
||||
|
||||
react-router-dom@^6.2.2:
|
||||
@ -7817,6 +7839,13 @@ react@^17.0.2:
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
|
||||
reactcss@^1.2.0:
|
||||
version "1.2.3"
|
||||
resolved "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz"
|
||||
integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
|
||||
dependencies:
|
||||
lodash "^4.0.1"
|
||||
|
||||
readable-stream@^2.0.1:
|
||||
version "2.3.7"
|
||||
resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz"
|
||||
@ -8762,6 +8791,11 @@ timsort@^0.3.0:
|
||||
resolved "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
|
||||
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
|
||||
|
||||
tinycolor2@^1.4.1:
|
||||
version "1.4.2"
|
||||
resolved "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz"
|
||||
integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
|
||||
|
||||
tmpl@1.0.5:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user