Scrolling button updated and animations to modals
This commit is contained in:
parent
a0a5a61b29
commit
4d690768a6
|
@ -2670,8 +2670,7 @@
|
||||||
"message": "https://myopengroup.lokinet.org"
|
"message": "https://myopengroup.lokinet.org"
|
||||||
},
|
},
|
||||||
"addChannelDescription": {
|
"addChannelDescription": {
|
||||||
"message":
|
"message": "Enter an open group URL."
|
||||||
"Enter an open group URL."
|
|
||||||
},
|
},
|
||||||
"joinChannel": {
|
"joinChannel": {
|
||||||
"message": "Join Open Group"
|
"message": "Join Open Group"
|
||||||
|
|
|
@ -258,7 +258,7 @@
|
||||||
|
|
||||||
if (messageSelected) {
|
if (messageSelected) {
|
||||||
// Hide ellipses icon
|
// Hide ellipses icon
|
||||||
$('.title-wrapper .session-icon.ellipses').css({opacity:0});
|
$('.title-wrapper .session-icon.ellipses').css({ opacity: 0 });
|
||||||
|
|
||||||
$('.messages li, .messages > div').addClass('shadowed');
|
$('.messages li, .messages > div').addClass('shadowed');
|
||||||
$('.message-selection-overlay').addClass('overlay');
|
$('.message-selection-overlay').addClass('overlay');
|
||||||
|
@ -272,7 +272,7 @@
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// Hide ellipses icon
|
// Hide ellipses icon
|
||||||
$('.title-wrapper .session-icon.ellipses').css({opacity:1});
|
$('.title-wrapper .session-icon.ellipses').css({ opacity: 1 });
|
||||||
|
|
||||||
$('.messages li, .messages > div').removeClass('shadowed');
|
$('.messages li, .messages > div').removeClass('shadowed');
|
||||||
$('.message-selection-overlay').removeClass('overlay');
|
$('.message-selection-overlay').removeClass('overlay');
|
||||||
|
|
|
@ -82,6 +82,9 @@ const {
|
||||||
const {
|
const {
|
||||||
SessionDropdown,
|
SessionDropdown,
|
||||||
} = require('../../ts/components/session/SessionDropdown');
|
} = require('../../ts/components/session/SessionDropdown');
|
||||||
|
const {
|
||||||
|
SessionScrollButton,
|
||||||
|
} = require('../../ts/components/session/SessionScrollButton');
|
||||||
const {
|
const {
|
||||||
SessionRegistrationView,
|
SessionRegistrationView,
|
||||||
} = require('../../ts/components/session/SessionRegistrationView');
|
} = require('../../ts/components/session/SessionRegistrationView');
|
||||||
|
@ -291,6 +294,7 @@ exports.setup = (options = {}) => {
|
||||||
SessionSeedModal,
|
SessionSeedModal,
|
||||||
SessionPasswordModal,
|
SessionPasswordModal,
|
||||||
SessionDropdown,
|
SessionDropdown,
|
||||||
|
SessionScrollButton,
|
||||||
MediaGallery,
|
MediaGallery,
|
||||||
Message,
|
Message,
|
||||||
MessageBody,
|
MessageBody,
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
/* global Whisper, i18n */
|
/* global Whisper */
|
||||||
|
|
||||||
// eslint-disable-next-line func-names
|
// eslint-disable-next-line func-names
|
||||||
(function() {
|
(function() {
|
||||||
|
@ -7,9 +7,6 @@
|
||||||
window.Whisper = window.Whisper || {};
|
window.Whisper = window.Whisper || {};
|
||||||
|
|
||||||
Whisper.ScrollDownButtonView = Whisper.View.extend({
|
Whisper.ScrollDownButtonView = Whisper.View.extend({
|
||||||
className: 'module-scroll-down',
|
|
||||||
templateName: 'scroll-down-button-view',
|
|
||||||
|
|
||||||
initialize(options = {}) {
|
initialize(options = {}) {
|
||||||
this.count = options.count || 0;
|
this.count = options.count || 0;
|
||||||
},
|
},
|
||||||
|
@ -18,22 +15,19 @@
|
||||||
this.count += count;
|
this.count += count;
|
||||||
this.render();
|
this.render();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
this.scrollButtonView = new Whisper.ReactWrapperView({
|
||||||
|
className: 'module-scroll-down',
|
||||||
|
Component: window.Signal.Components.SessionScrollButton,
|
||||||
|
props: {
|
||||||
|
count: this.count,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
render_attributes() {
|
this.$el.append(this.scrollButtonView.el);
|
||||||
const buttonClass =
|
return this;
|
||||||
this.count > 0 ? 'module-scroll-down__button--new-messages' : '';
|
|
||||||
|
|
||||||
let moreBelow = i18n('scrollDown');
|
|
||||||
if (this.count > 1) {
|
|
||||||
moreBelow = i18n('messagesBelow');
|
|
||||||
} else if (this.count === 1) {
|
|
||||||
moreBelow = i18n('messageBelow');
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
buttonClass,
|
|
||||||
moreBelow,
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -31,6 +31,11 @@
|
||||||
src: url('../fonts/SFProText-Regular.ttf') format('truetype');
|
src: url('../fonts/SFProText-Regular.ttf') format('truetype');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes fadein {
|
||||||
|
from {opacity: 0;}
|
||||||
|
to {opacity: 1;}
|
||||||
|
}
|
||||||
|
|
||||||
// Session Colors
|
// Session Colors
|
||||||
$session-font-family: 'Wasa';
|
$session-font-family: 'Wasa';
|
||||||
|
|
||||||
|
@ -149,6 +154,7 @@ div.spacer-lg {
|
||||||
}
|
}
|
||||||
|
|
||||||
$session-transition-duration: 0.25s;
|
$session-transition-duration: 0.25s;
|
||||||
|
$session-fadein-duration: 0.10s;
|
||||||
|
|
||||||
$session-icon-size-sm: 15px;
|
$session-icon-size-sm: 15px;
|
||||||
$session-icon-size-md: 20px;
|
$session-icon-size-md: 20px;
|
||||||
|
@ -628,6 +634,7 @@ label {
|
||||||
}
|
}
|
||||||
|
|
||||||
.session-modal {
|
.session-modal {
|
||||||
|
animation: fadein $session-transition-duration;
|
||||||
z-index: 150;
|
z-index: 150;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
@ -1364,20 +1371,28 @@ input {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button.module-scroll-down {
|
.module-scroll-down {
|
||||||
&__button {
|
animation: fadein $session-fadein-duration;
|
||||||
background-color: $session-shade-6;
|
bottom: 15px;
|
||||||
}
|
|
||||||
|
|
||||||
&__button:hover {
|
.session-icon-button{
|
||||||
&__icon {
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 1;
|
||||||
|
background-color: $session-shade-8;
|
||||||
|
|
||||||
|
svg path {
|
||||||
transition: $session-transition-duration;
|
transition: $session-transition-duration;
|
||||||
@include color-svg('../images/down.svg', $session-color-white);
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__icon {
|
&:hover svg path {
|
||||||
@include color-svg('../images/down.svg', rgba($session-color-white, 0.6));
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -378,7 +378,7 @@ export class ConversationHeader extends React.Component<Props> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public highlightMessageSearch(){
|
public highlightMessageSearch() {
|
||||||
// This is a temporary fix. In future we want to search
|
// This is a temporary fix. In future we want to search
|
||||||
// messages in the current conversation
|
// messages in the current conversation
|
||||||
$('.session-search-input input').focus();
|
$('.session-search-input input').focus();
|
||||||
|
@ -489,5 +489,4 @@ export class ConversationHeader extends React.Component<Props> {
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,25 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { SessionIconButton, SessionIconType, SessionIconSize } from './icon';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
count: number,
|
||||||
|
}
|
||||||
|
|
||||||
|
export class SessionScrollButton extends React.PureComponent<Props> {
|
||||||
|
constructor(props: any) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
console.log(`My count is: ${this.props.count}`);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SessionIconButton
|
||||||
|
iconType={SessionIconType.Chevron}
|
||||||
|
iconSize={SessionIconSize.Huge}
|
||||||
|
iconColor={"#FFFFFF"}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue