Commit fcd60f11 authored by Killian Kemps's avatar Killian Kemps
Browse files

Redesign retweet confirmation

parent 632f3658
......@@ -1278,6 +1278,47 @@ img.emoji {
color: #55ACEF;
}
.retweet-confirmation-notice {
background-color: #F2F2F2;
height: 50px;
margin: -8px -10px;
border-radius: 0 0 3px 3px;
display: none;
}
.retweet-confirmation-notice > p {
color: #666666;
font-family: 'droid_sansbold';
font-size: 0.8em;
display: block;
width: 215px;
position: relative;
top: 17px;
left: 20px;
}
.retweet-confirmation-notice > button {
height: 36px;
width: 36px;
color: white;
border: none;
border-radius: 3px;
}
.retweet-confirmation-approve-button {
background-color: #21A868;
position: absolute;
right: 8px;
bottom: 7px;
}
.retweet-confirmation-deny-button {
background-color: #E74C3C;
position: absolute;
right: 54px;
bottom: 7px;
}
.tweet-image, .tweet-image-extended{
border-radius: 10px;
display: block;
......
......@@ -122,6 +122,30 @@ Message.prototype.generateMessage = function(){
var replyFont = document.createElement('i');
replyFont.setAttribute('class', 'fa fa-reply');
var retweetConfirmationNotice = document.createElement('div');
retweetConfirmationNotice.className = 'retweet-confirmation-notice';
var retweetConfirmationText = document.createElement('p');
retweetConfirmationText.textContent = 'Are you sure you want to retweet?';
var retweetConfirmationApproveButton = document.createElement('button');
retweetConfirmationApproveButton.className = 'retweet-confirmation-approve-button';
var approveFont = document.createElement('i');
approveFont.setAttribute('class', 'fa fa-check');
var retweetConfirmationDenyButton = document.createElement('button');
retweetConfirmationDenyButton.className = 'retweet-confirmation-deny-button';
var denyFont = document.createElement('i');
denyFont.setAttribute('class', 'fa fa-times');
retweetConfirmationNotice.appendChild(retweetConfirmationText);
retweetConfirmationDenyButton.appendChild(denyFont);
retweetConfirmationNotice.appendChild(retweetConfirmationDenyButton);
retweetConfirmationApproveButton.appendChild(approveFont);
retweetConfirmationNotice.appendChild(retweetConfirmationApproveButton);
// Put event listener on elements
this.addEvent(newRetweetButton, replyButton);
......@@ -143,6 +167,7 @@ Message.prototype.generateMessage = function(){
newTweet.appendChild(newContent);
newTweet.appendChild(replyButton);
newTweet.appendChild(newRetweetButton);
newTweet.appendChild(retweetConfirmationNotice);
return newTweet;
}
......@@ -282,7 +307,7 @@ Message.prototype.processDate = function(){
*/
Message.prototype.addEvent = function(retweetButton, replyButton){
retweetButton.addEventListener('click', function(e){
this.sendRetweet();
this.sendRetweet(e);
}.bind(this));
replyButton.addEventListener('click', function(e){
this.prepareReply();
......@@ -292,7 +317,7 @@ Message.prototype.addEvent = function(retweetButton, replyButton){
/**
* Send Retweet message
*/
Message.prototype.sendRetweet = function(){
Message.prototype.sendRetweet = function(e){
if(this.retweeted){
console.log('Gonna send delete tweet with id_str: ', this.id_str);
......@@ -301,42 +326,23 @@ Message.prototype.sendRetweet = function(){
this.applyTweetStatus();
}
else{
var tweetConfirmationPopup = document.getElementById('tweetConfirmationPopup');
var tweetView = document.getElementById('tweetView');
var retweetCancelButton = document.getElementById('retweetCancelButton');
var retweetButton = document.getElementById('retweetButton');
var tweet = document.getElementsByName('tweet-' + this.id_str);
var clone = tweet[0].cloneNode(true);
tweetView.innerHTML = clone.innerHTML;
var tweet = e.target.parentElement;
var tweetConfirmationNotice = tweet.getElementsByClassName ('retweet-confirmation-notice')[0];
var retweetCancelButton = tweetConfirmationNotice.getElementsByClassName('retweet-confirmation-deny-button')[0];
var retweetButton = tweetConfirmationNotice.getElementsByClassName('retweet-confirmation-approve-button')[0];
tweetConfirmationPopup.style.display = 'block';
function removeAllListeners(){
columnsList.removeEventListener('click', closeRetweetPopup, true);
retweetCancelButton.removeEventListener('click', closeRetweetPopup, true);
retweetButton.removeEventListener('click', bindedFunction, true);
}
tweetConfirmationNotice.style.display = 'block';
function closeRetweetPopup(e){
e.stopPropagation();
e.preventDefault();
removeAllListeners();
var popup = document.getElementById('tweetConfirmationPopup');
popup.style.display = 'none';
function closeRetweetNotice(e){
tweetConfirmationNotice.style.display = 'none';
}
var columnsList = document.getElementById('tweets-columns-list');
columnsList.addEventListener('click', closeRetweetPopup, true);
retweetCancelButton.addEventListener('click', closeRetweetPopup, true);
retweetCancelButton.addEventListener('click', closeRetweetNotice, true);
function sendRetweetCommand(e){
socket.emit('retweet', this.id_str);
this.retweeted = true;
removeAllListeners();
// console.log('Gonna send retweet with id_str: ', this.id_str);
var popup = document.getElementById('tweetConfirmationPopup');
popup.style.display = 'none';
tweetConfirmationNotice.style.display = 'none';
this.applyTweetStatus();
}
......
......@@ -116,13 +116,6 @@
<div id="largeImagePopup"><img src="#"></div>
<div id="tweetConfirmationPopup">
<h3>Confirm the retweet</h3>
<div id="tweetView"></div>
<button id="retweetCancelButton" class="classic-button">Cancel</button>
<button id="retweetButton" class="classic-button">Retweet</button>
</div>
<ul id="tweets-columns-list">
</ul>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment