From 4509e68aa6852452d50c55b3b147ae74dc3f96b0 Mon Sep 17 00:00:00 2001 From: Phillip Date: Tue, 24 Jan 2023 18:39:45 +0200 Subject: [PATCH] auto image checkbox --- qortal-ui-core/language/us.json | 3 +- .../src/components/login-view/login-view.js | 5 ++ .../src/redux/app/actions/app-core.js | 17 ++++++- .../src/redux/app/app-action-types.js | 2 + qortal-ui-core/src/redux/app/app-reducer.js | 28 ++++++++++- .../plugins/core/components/ChatPage.js | 1 + .../plugins/core/components/ChatScroller.js | 5 +- .../plugins/core/components/ChatTextEditor.js | 50 +++++++++++++++++-- 8 files changed, 101 insertions(+), 10 deletions(-) diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index 54383244..a8d0ab47 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -573,7 +573,8 @@ "cchange64": "Enter Disabled", "cchange65": "Please enter a recipient", "cchange66": "Cannot fetch replied-to message. Message is too old.", - "cchange68": "edited" + "cchange68": "edited", + "cchange69": "Auto-show images" }, "welcomepage": { "wcchange1": "Welcome to Q-Chat", diff --git a/qortal-ui-core/src/components/login-view/login-view.js b/qortal-ui-core/src/components/login-view/login-view.js index cce1f048..aadc1973 100644 --- a/qortal-ui-core/src/components/login-view/login-view.js +++ b/qortal-ui-core/src/components/login-view/login-view.js @@ -14,8 +14,13 @@ import './login-section.js' import '../qort-theme-toggle.js' import settings from '../../functional-components/settings-page.js' +import { addAutoLoadImageChat, removeAutoLoadImageChat } from '../../redux/app/app-actions.js' window.reduxStore = store +window.reduxAction = { + addAutoLoadImageChat: addAutoLoadImageChat, + removeAutoLoadImageChat: removeAutoLoadImageChat +} const animationDuration = 0.7 // Seconds diff --git a/qortal-ui-core/src/redux/app/actions/app-core.js b/qortal-ui-core/src/redux/app/actions/app-core.js index e96b11b4..d91c2fa2 100644 --- a/qortal-ui-core/src/redux/app/actions/app-core.js +++ b/qortal-ui-core/src/redux/app/actions/app-core.js @@ -1,5 +1,5 @@ // Core App Actions here... -import { UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, CHAT_HEADS, ACCOUNT_INFO, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH } from '../app-action-types.js' +import { UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, CHAT_HEADS, ACCOUNT_INFO, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT } from '../app-action-types.js' export const doUpdateBlockInfo = (blockObj) => { return (dispatch, getState) => { @@ -105,3 +105,18 @@ const framePasteMenuSwitch = (payload) => { payload } } + +export const addAutoLoadImageChat = (payload) => { + return { + type: ADD_AUTO_LOAD_IMAGES_CHAT, + payload + } +} + +export const removeAutoLoadImageChat = (payload) => { + return { + type: REMOVE_AUTO_LOAD_IMAGES_CHAT, + payload + } +} + diff --git a/qortal-ui-core/src/redux/app/app-action-types.js b/qortal-ui-core/src/redux/app/app-action-types.js index 00f4c54d..b0bb7813 100644 --- a/qortal-ui-core/src/redux/app/app-action-types.js +++ b/qortal-ui-core/src/redux/app/app-action-types.js @@ -20,3 +20,5 @@ export const ADD_NEW_PLUGIN_URL = 'ADD_NEW_PLUGIN_URL' export const COPY_MENU_SWITCH = 'COPY_MENU_SWITCH' export const PASTE_MENU_SWITCH = 'PASTE_MENU_SWITCH' export const FRAME_PASTE_MENU_SWITCH = 'FRAME_PASTE_MENU_SWITCH' +export const ADD_AUTO_LOAD_IMAGES_CHAT = 'ADD_AUTO_LOAD_IMAGES_CHAT' +export const REMOVE_AUTO_LOAD_IMAGES_CHAT = 'REMOVE_AUTO_LOAD_IMAGES_CHAT' \ No newline at end of file diff --git a/qortal-ui-core/src/redux/app/app-reducer.js b/qortal-ui-core/src/redux/app/app-reducer.js index 0fa9b67a..9d650ec9 100644 --- a/qortal-ui-core/src/redux/app/app-reducer.js +++ b/qortal-ui-core/src/redux/app/app-reducer.js @@ -1,5 +1,6 @@ // Loading state, login state, isNavDrawOpen state etc. None of this needs to be saved to localstorage. -import { LOG_IN, LOG_OUT, NETWORK_CONNECTION_STATUS, INIT_WORKERS, ADD_PLUGIN_URL, ADD_PLUGIN, ADD_NEW_PLUGIN_URL, NAVIGATE, SELECT_ADDRESS, ACCOUNT_INFO, CHAT_HEADS, UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, LOAD_NODE_CONFIG, SET_NODE, ADD_NODE, PAGE_URL, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH } from './app-action-types.js' +import { saveStateToLocalStorage } from '../../localStorageHelpers.js' +import { LOG_IN, LOG_OUT, NETWORK_CONNECTION_STATUS, INIT_WORKERS, ADD_PLUGIN_URL, ADD_PLUGIN, ADD_NEW_PLUGIN_URL, NAVIGATE, SELECT_ADDRESS, ACCOUNT_INFO, CHAT_HEADS, UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, LOAD_NODE_CONFIG, SET_NODE, ADD_NODE, PAGE_URL, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT } from './app-action-types.js' import { initWorkersReducer } from './reducers/init-workers.js' import { loginReducer } from './reducers/login-reducer.js' import { setNode, addNode } from './reducers/manage-node.js' @@ -42,7 +43,8 @@ const INITIAL_STATE = { framePasteMenuSwitch: { isOpen: false, elementId: '' - } + }, + autoLoadImageChats: [] } export default (state = INITIAL_STATE, action) => { @@ -146,6 +148,28 @@ export default (state = INITIAL_STATE, action) => { ...state, framePasteMenuSwitch: action.payload } + case ADD_AUTO_LOAD_IMAGES_CHAT: { + const findChat = state.autoLoadImageChats.findIndex((chat)=> chat === action.payload) + console.log({findChat}) + if(findChat !== -1) return state + const updatedState = [...state.autoLoadImageChats, action.payload] + + saveStateToLocalStorage('autoLoadImageChats', updatedState) + return { + ...state, + autoLoadImageChats: updatedState + } + } + + case REMOVE_AUTO_LOAD_IMAGES_CHAT: { + const updatedState = state.autoLoadImageChats.filter((chat)=> chat !== action.payload) + saveStateToLocalStorage('autoLoadImageChats', updatedState) + return { + ...state, + autoLoadImageChats: updatedState + } + } + default: return state } diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 037a525e..538240e9 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -1043,6 +1043,7 @@ class ChatPage extends LitElement { .repliedToMessageObj=${this.repliedToMessageObj} .toggleEnableChatEnter=${this.toggleEnableChatEnter} ?isEnabledChatEnter=${this.isEnabledChatEnter} + chatId=${this.chatId} > diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 4178041b..7522597d 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -146,6 +146,7 @@ class ChatScroller extends LitElement { .goToRepliedMessage=${this.goToRepliedMessage} .addSeenMessage=${(val)=> this.addSeenMessage(val)} .listSeenMessages=${this.listSeenMessages} + chatId=${this.chatId} > ` ) @@ -294,6 +295,7 @@ class MessageTemplate extends LitElement { goToRepliedMessage: { attribute: false }, listSeenMessages: {type: Array}, addSeenMessage: {attribute: false}, + chatId: {type: String} } } @@ -343,7 +345,8 @@ class MessageTemplate extends LitElement { } firstUpdated(){ - if(this.listSeenMessages.includes(this.messageObj.reference)){ + const autoSeeChatList = window.parent.reduxStore.getState().app?.autoLoadImageChats + if(autoSeeChatList.includes(this.chatId) || this.listSeenMessages.includes(this.messageObj.reference)){ this.viewImage = true } } diff --git a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js index d19d638e..6f1ce796 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js +++ b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js @@ -4,6 +4,8 @@ import { get, translate } from 'lit-translate'; import { EmojiPicker } from 'emoji-picker-js'; import { Epml } from '../../../epml.js'; import '@material/mwc-icon' +import '@material/mwc-checkbox' +// import { addAutoLoadImageChat } from "../../../../qortal-ui-core/src/redux/app/app-actions.js"; const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }); class ChatTextEditor extends LitElement { @@ -29,7 +31,8 @@ class ChatTextEditor extends LitElement { reflect: true }, toggleEnableChatEnter: {attribute: false}, - isEnabledChatEnter: {type: Boolean} + isEnabledChatEnter: {type: Boolean}, + chatId: {type: String} } } @@ -46,6 +49,11 @@ class ChatTextEditor extends LitElement { overflow: hidden; } + * { + + --mdc-checkbox-unchecked-color: var(--black); + + } .chatbar-container { width: 100%; display: flex; @@ -259,6 +267,13 @@ class ChatTextEditor extends LitElement { transition: all 0.2s; display: none; } + .removeBg { + background: none; + } + + .chatbar-button-single label { + font-size: 13px; + } .chatbar-button-single:hover { filter: brightness(120%); @@ -339,7 +354,10 @@ class ChatTextEditor extends LitElement { .hide-styling { display: none; } - +mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::before { + background-color:var(--mdc-theme-primary) + } + --mdc-checkbox-unchecked-color ` } @@ -357,12 +375,12 @@ class ChatTextEditor extends LitElement { } render() { - + console.log('this.chatId2', this.chatId) return html`
- + style="align-items: center;justify-content:space-between"> +
+
+ ${this.iframeId === "_chatEditorDOM" ? html` +
+ + + { + console.log(e.target.checked) + if(e.target.checked){ + window.parent.reduxStore.dispatch( window.parent.reduxAction.removeAutoLoadImageChat(this.chatId)) + return + } + window.parent.reduxStore.dispatch( window.parent.reduxAction.addAutoLoadImageChat(this.chatId)) + + }} ?checked=${(window.parent.reduxStore.getState().app?.autoLoadImageChats || []).includes(this.chatId)}> +
+ ` : ''}