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"
|
||||
},
|
||||
"addChannelDescription": {
|
||||
"message":
|
||||
"Enter an open group URL."
|
||||
"message": "Enter an open group URL."
|
||||
},
|
||||
"joinChannel": {
|
||||
"message": "Join Open Group"
|
||||
|
|
|
@ -258,7 +258,7 @@
|
|||
|
||||
if (messageSelected) {
|
||||
// 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');
|
||||
$('.message-selection-overlay').addClass('overlay');
|
||||
|
@ -272,7 +272,7 @@
|
|||
}
|
||||
} else {
|
||||
// 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');
|
||||
$('.message-selection-overlay').removeClass('overlay');
|
||||
|
|
|
@ -82,6 +82,9 @@ const {
|
|||
const {
|
||||
SessionDropdown,
|
||||
} = require('../../ts/components/session/SessionDropdown');
|
||||
const {
|
||||
SessionScrollButton,
|
||||
} = require('../../ts/components/session/SessionScrollButton');
|
||||
const {
|
||||
SessionRegistrationView,
|
||||
} = require('../../ts/components/session/SessionRegistrationView');
|
||||
|
@ -291,6 +294,7 @@ exports.setup = (options = {}) => {
|
|||
SessionSeedModal,
|
||||
SessionPasswordModal,
|
||||
SessionDropdown,
|
||||
SessionScrollButton,
|
||||
MediaGallery,
|
||||
Message,
|
||||
MessageBody,
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
/* global Whisper, i18n */
|
||||
/* global Whisper */
|
||||
|
||||
// eslint-disable-next-line func-names
|
||||
(function() {
|
||||
|
@ -7,9 +7,6 @@
|
|||
window.Whisper = window.Whisper || {};
|
||||
|
||||
Whisper.ScrollDownButtonView = Whisper.View.extend({
|
||||
className: 'module-scroll-down',
|
||||
templateName: 'scroll-down-button-view',
|
||||
|
||||
initialize(options = {}) {
|
||||
this.count = options.count || 0;
|
||||
},
|
||||
|
@ -18,22 +15,19 @@
|
|||
this.count += count;
|
||||
this.render();
|
||||
},
|
||||
|
||||
render() {
|
||||
this.scrollButtonView = new Whisper.ReactWrapperView({
|
||||
className: 'module-scroll-down',
|
||||
Component: window.Signal.Components.SessionScrollButton,
|
||||
props: {
|
||||
count: this.count,
|
||||
},
|
||||
});
|
||||
|
||||
render_attributes() {
|
||||
const buttonClass =
|
||||
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,
|
||||
};
|
||||
this.$el.append(this.scrollButtonView.el);
|
||||
return this;
|
||||
},
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
|
@ -31,6 +31,11 @@
|
|||
src: url('../fonts/SFProText-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from {opacity: 0;}
|
||||
to {opacity: 1;}
|
||||
}
|
||||
|
||||
// Session Colors
|
||||
$session-font-family: 'Wasa';
|
||||
|
||||
|
@ -149,6 +154,7 @@ div.spacer-lg {
|
|||
}
|
||||
|
||||
$session-transition-duration: 0.25s;
|
||||
$session-fadein-duration: 0.10s;
|
||||
|
||||
$session-icon-size-sm: 15px;
|
||||
$session-icon-size-md: 20px;
|
||||
|
@ -628,6 +634,7 @@ label {
|
|||
}
|
||||
|
||||
.session-modal {
|
||||
animation: fadein $session-transition-duration;
|
||||
z-index: 150;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
@ -1364,20 +1371,28 @@ input {
|
|||
}
|
||||
}
|
||||
|
||||
button.module-scroll-down {
|
||||
&__button {
|
||||
background-color: $session-shade-6;
|
||||
}
|
||||
.module-scroll-down {
|
||||
animation: fadein $session-fadein-duration;
|
||||
bottom: 15px;
|
||||
|
||||
&__button:hover {
|
||||
&__icon {
|
||||
.session-icon-button{
|
||||
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;
|
||||
@include color-svg('../images/down.svg', $session-color-white);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
@include color-svg('../images/down.svg', rgba($session-color-white, 0.6));
|
||||
&:hover svg path {
|
||||
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
|
||||
// messages in the current conversation
|
||||
$('.session-search-input input').focus();
|
||||
|
@ -489,5 +489,4 @@ export class ConversationHeader extends React.Component<Props> {
|
|||
</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