AlphaX/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #99 from PhillipLangMartinez/bugfix/auto-image-load

Browse Source 
auto image checkbox
This commit is contained in:
AlphaX-Projects 2023-01-24 19:29:39 +01:00 committed by GitHub
commit 61190c9737
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 101 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
qortal-ui-core/language/us.json
View File

@ -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",

5
qortal-ui-core/src/components/login-view/login-view.js
View File

@ -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

17
qortal-ui-core/src/redux/app/actions/app-core.js
View File

@ -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
}
}

2
qortal-ui-core/src/redux/app/app-action-types.js
View File

@ -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'

28
qortal-ui-core/src/redux/app/app-reducer.js
View File

@ -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
}

1
qortal-ui-plugins/plugins/core/components/ChatPage.js
View File

@ -1043,6 +1043,7 @@ class ChatPage extends LitElement {
.repliedToMessageObj=${this.repliedToMessageObj}
.toggleEnableChatEnter=${this.toggleEnableChatEnter}
?isEnabledChatEnter=${this.isEnabledChatEnter}
chatId=${this.chatId}
>
</chat-text-editor>
</div>

5
qortal-ui-plugins/plugins/core/components/ChatScroller.js
View File

@ -146,6 +146,7 @@ class ChatScroller extends LitElement {
.goToRepliedMessage=${this.goToRepliedMessage}
.addSeenMessage=${(val)=> this.addSeenMessage(val)}
.listSeenMessages=${this.listSeenMessages}
chatId=${this.chatId}
>
</message-template>`
)
@ -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
}
}

50
qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
View File

@ -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`
<div
class=${["chatbar-container", "chatbar-buttons", this.iframeId !=="_chatEditorDOM" && 'hide-styling'].join(" ")}
style="align-items: center;">
style="align-items: center;justify-content:space-between">
<div style="display: flex;align-items: center">
<button
@click=${() => this.editor.chain().focus().toggleBold().run()}
?disabled=${
@ -422,6 +440,28 @@ class ChatTextEditor extends LitElement {
`}
</button>
</div>
${this.iframeId === "_chatEditorDOM" ? html`
<div
style="height: 26px; box-sizing: border-box"
class=${["chatbar-button-single", "removeBg"].join(' ')}
>
<label
for="qChatShowAutoMsg"
@click=${() => this.shadowRoot.getElementById('qChatShowAutoMsg').click()}
>${translate('chatpage.cchange69')}</label>
<mwc-checkbox style="margin-right: -15px;" id="qChatShowAutoMsg" @click=${e => {
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)}></mwc-checkbox>
</div>
` : ''}
</div>
<div