From 7235ccff88e31f2f84d8a078a3930d5303414da8 Mon Sep 17 00:00:00 2001 From: Vincent Date: Fri, 13 Mar 2020 11:10:27 +1100 Subject: [PATCH] Emoji quick styling --- _locales/en/messages.json | 6 ++-- js/background.js | 2 -- js/models/conversations.js | 1 - preload.js | 2 -- stylesheets/_session_conversation.scss | 32 +++++++++++++++++-- .../conversation/ConversationHeader.tsx | 2 +- .../conversation/SessionCompositionBox.tsx | 17 ++++++---- .../conversation/SessionConversation.tsx | 14 ++++---- .../session/settings/SessionSettings.tsx | 10 +++--- ts/global.d.ts | 2 +- 10 files changed, 55 insertions(+), 33 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index e163547a7..f3c9173f4 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -903,14 +903,12 @@ } }, "audioPermissionNeededTitle": { - "message": - "Sending audio messages requires microphone access", + "message": "Sending audio messages requires microphone access", "description": "Shown if the user attempts to send an audio message without audio permssions turned on" }, "audioPermissionNeededDescription": { - "message": - "Give Session microphone permissions in your settings", + "message": "Give Session microphone permissions in your settings", "description": "Shown if the user attempts to send an audio message without audio permssions turned on" }, diff --git a/js/background.js b/js/background.js index 42c1a444c..cbeef5a99 100644 --- a/js/background.js +++ b/js/background.js @@ -942,7 +942,6 @@ .toString(36) .substring(3); - window.toasts = new Map(); window.pushToast = options => { // Setting toasts with the same ID can be used to prevent identical @@ -1061,7 +1060,6 @@ window.getMediaPermissions().then(value => { window.setMediaPermissions(!value); }); - }; // attempts a connection to an open group server diff --git a/js/models/conversations.js b/js/models/conversations.js index 915520c0f..50c1f757b 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -1523,7 +1523,6 @@ groupInvitation = null, otherOptions = {} ) { - this.clearTypingTimers(); const destination = this.id; diff --git a/preload.js b/preload.js index 84ec174cd..f329486f4 100644 --- a/preload.js +++ b/preload.js @@ -244,7 +244,6 @@ installSetter('spell-check', 'setSpellCheck'); installGetter('media-permissions', 'getMediaPermissions'); installGetter('media-permissions', 'setMediaPermissions'); - window.getMediaPermissions = () => new Promise((resolve, reject) => { ipc.once('get-success-media-permissions', (_event, error, value) => { @@ -276,7 +275,6 @@ window.getSettingValue = (settingID, comparisonValue = null) => { return comparisonValue ? !!settingVal === comparisonValue : settingVal; }; - window.setSettingValue = (settingID, value) => { window.storage.put(settingID, value); }; diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 9d5458874..f2ab032ee 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -220,20 +220,46 @@ $composition-container-height: 60px; visibility: visible; } - & > section { + & > section.emoji-mart { background-color: $session-shade-4; border: 1px solid $session-shade-6-alt; - border-radius: $session-margin-lg; + border-radius: 8px; + .emoji-mart-category-label { top: -2px; - + span { font-family: 'SF Pro Text'; padding-top: $session-margin-sm; background-color: $session-shade-4; } } + + .emoji-mart-bar:last-child { + border: none; + + .emoji-mart-preview { + display: none; + } + + } + + &:after{ + content: ''; + position: absolute; + top: calc(100% - 40px); + left: calc(100% - 79px); + width: 22px; + height: 22px; + background-color: $session-shade-4; + transform: rotate(45deg); + border-radius: 3px; + transform: scaleY(1.4) rotate(45deg); + border: 0.7px solid $session-shade-6-alt; + clip-path: polygon(100% 100%, 7.2px 100%, 100% 7.2px); + } + } } diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx index 0528435c1..cf0feeceb 100644 --- a/ts/components/conversation/ConversationHeader.tsx +++ b/ts/components/conversation/ConversationHeader.tsx @@ -405,7 +405,7 @@ export class ConversationHeader extends React.Component { {this.renderMenu(triggerId)} - { selectionMode && this.renderSelectionOverlay() } + {selectionMode && this.renderSelectionOverlay()} ); } diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index 58c1d0e59..5ddc56159 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -23,7 +23,7 @@ interface Props { interface State { message: string; - isRecordingView: boolean; + showRecordingView: boolean; mediaSetting: boolean | null; showEmojiPanel: boolean; @@ -43,7 +43,7 @@ export class SessionCompositionBox extends React.Component { message: '', attachments: [], voiceRecording: undefined, - isRecordingView: false, + showRecordingView: false, mediaSetting: null, showEmojiPanel: false, }; @@ -85,11 +85,11 @@ export class SessionCompositionBox extends React.Component { } public render() { - const { isRecordingView } = this.state; + const { showRecordingView } = this.state; return (
- { isRecordingView ? ( + { showRecordingView ? ( <>{this.renderRecordingView()} ) : ( <>{this.renderCompositionView()} @@ -288,7 +288,7 @@ export class SessionCompositionBox extends React.Component { } private async sendVoiceMessage(audioBlob: Blob) { - if (!this.state.isRecordingView) return; + if (!this.state.showRecordingView) return; const fileBuffer = await new Response(audioBlob).arrayBuffer(); @@ -322,7 +322,10 @@ export class SessionCompositionBox extends React.Component { const {mediaSetting} = this.state; if (mediaSetting){ - this.setState({ isRecordingView: true }); + this.setState({ + showRecordingView: true, + showEmojiPanel: false, + }); this.props.onLoadVoiceNoteView(); return; } @@ -338,7 +341,7 @@ export class SessionCompositionBox extends React.Component { private onExitVoiceNoteView() { // Do stuff for component, then run callback to SessionConversation - this.setState({ isRecordingView: false }); + this.setState({ showRecordingView: false }); this.props.onExitVoiceNoteView(); } diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx index abdea83af..afd2d876f 100644 --- a/ts/components/session/conversation/SessionConversation.tsx +++ b/ts/components/session/conversation/SessionConversation.tsx @@ -23,7 +23,7 @@ interface State { doneInitialScroll: boolean; displayScrollToBottomButton: boolean; messageFetchTimestamp: number; - isRecordingView: boolean; + showRecordingView: boolean; } export class SessionConversation extends React.Component { @@ -47,7 +47,7 @@ export class SessionConversation extends React.Component { doneInitialScroll: false, displayScrollToBottomButton: false, messageFetchTimestamp: 0, - isRecordingView: false, + showRecordingView: false, }; this.handleScroll = this.handleScroll.bind(this); @@ -103,7 +103,7 @@ export class SessionConversation extends React.Component { public render() { console.log(`[vince][info] Props`, this.props); - const { messages, conversationKey, doneInitialScroll, isRecordingView } = this.state; + const { messages, conversationKey, doneInitialScroll, showRecordingView } = this.state; const loading = !doneInitialScroll || messages.length === 0; const selectionMode = !!this.state.selectedMessages.length; @@ -140,7 +140,7 @@ export class SessionConversation extends React.Component {
- { isRecordingView && ( + { showRecordingView && (
)} @@ -619,14 +619,14 @@ export class SessionConversation extends React.Component { private onLoadVoiceNoteView() { this.setState({ - isRecordingView: true, + showRecordingView: true, selectedMessages: [], }) } private onExitVoiceNoteView() { this.setState({ - isRecordingView: false, + showRecordingView: false, }); console.log(`[vince] Stopped recording entirely`); @@ -634,7 +634,7 @@ export class SessionConversation extends React.Component { private onKeyDown(event: any) { const selectionMode = !!this.state.selectedMessages.length; - const recordingMode = this.state.isRecordingView; + const recordingMode = this.state.showRecordingView; const messageContainer = document.getElementsByClassName('messages-container')[0]; const pageHeight = messageContainer.clientHeight; diff --git a/ts/components/session/settings/SessionSettings.tsx b/ts/components/session/settings/SessionSettings.tsx index 6dd3e9e52..ab76c9a90 100644 --- a/ts/components/session/settings/SessionSettings.tsx +++ b/ts/components/session/settings/SessionSettings.tsx @@ -79,7 +79,7 @@ export class SettingsView extends React.Component { public async componentWillMount() { const mediaSetting = await window.getMediaPermissions(); - this.setState({mediaSetting}); + this.setState({ mediaSetting }); } public componentDidMount() { @@ -123,14 +123,14 @@ export class SettingsView extends React.Component { const description = setting.description || ''; const comparisonValue = setting.comparisonValue || null; - + let value; - if (setting.id === 'media-permissions'){ + if (setting.id === 'media-permissions') { value = this.state.mediaSetting; } else { value = - window.getSettingValue(setting.id, comparisonValue) || - (setting.content && setting.content.defaultValue); + window.getSettingValue(setting.id, comparisonValue) || + (setting.content && setting.content.defaultValue); } const sliderFn = diff --git a/ts/global.d.ts b/ts/global.d.ts index 12961bc4f..4e53841f8 100644 --- a/ts/global.d.ts +++ b/ts/global.d.ts @@ -14,7 +14,7 @@ interface Window { // Microphone MediaRecorder: any; AudioContext: any; - + // Gets getAccountManager: any; getMediaPermissions: any;