Rework the invitation menu

Fix #17
master
Daniel Berteaud 11 years ago
parent 0ee132334f
commit 10db137f6c
  1. 3
      lib/Vroom/I18N/en.pm
  2. 3
      lib/Vroom/I18N/fr.pm
  3. 3
      public/css/vroom.css
  4. 13
      public/js/vroom.js
  5. 45
      templates/default/join.html.ep

@ -40,6 +40,9 @@ our %Lexicon = (
"ROOM_NAME" => "Room name",
"RANDOM_IF_EMPTY" => "If you let this field empty, a random name will be given to the room",
"ROOM_s" => "room %s",
"INVITE_PEOPLE" => "Invite other people",
"TO_INVITE_SHARE_THIS_URL" => "Send this address to anyone and he will be able to join this room",
"YOU_CAN_INVITE_BY_MAIL" => "You can also directly send an invitation by email",
"EMAIL_INVITE" => "Email invite",
"SEND_INVITE" => "Send an email invitation",
"DISPLAY_NAME" => "Display name",

@ -43,6 +43,9 @@ our %Lexicon = (
"ROOM_NAME" => "Nom du salon",
"RANDOM_IF_EMPTY" => "Si vous laissez ce champs vide, un nom aléatoire sera donné au salon",
"ROOM_s" => "Salon %s",
"INVITE_PEOPLE" => "Invitez des participants",
"TO_INVITE_SHARE_THIS_URL" => "Envoyez cette adresse à d'autres personnes pour qu'elles vous rejoignent",
"YOU_CAN_INVITE_BY_MAIL" => "Vous pouvez aussi envoyer une invitation directement par email",
"SEND_INVITE" => "Envoyez une invitation par mail",
"EMAIL_INVITE" => "Inviter par email",
"DISPLAY_NAME" => "Nom",

@ -73,6 +73,9 @@
max-width: 700px;
margin: auto;
}
#inviteMenu {
min-width: 400px;
}
#chatBox {
max-height:300px;
resize:none;

@ -30,7 +30,8 @@ var locale = {
ROOM_LOCKED_BY_s: '',
ROOM_UNLOCKED_BY_s: '',
CANT_SEND_TO_s: '',
SCREEN_s: ''
SCREEN_s: '',
TO_INVITE_SHARE_THIS_URL: ''
};
// Localize the strings we need
@ -46,6 +47,12 @@ $.ajax({
}
});
// Popup with the URL to share
function inviteUrlPopup(){
window.prompt(locale.TO_INVITE_SHARE_THIS_URL, window.location.href);
return false;
}
function initVroom(room) {
var peers = {
@ -442,6 +449,10 @@ function initVroom(room) {
}
});
// Do not close the dropdown menu when filling the email recipient
$("#inviteDropdownContainer").on("click", "li", function(e){
e.stopPropagation();
});
// Handle Email Invitation
$('#inviteEmail').submit(function(event) {
event.preventDefault();

@ -12,17 +12,40 @@
</div>
<input id="roomName" name="roomName" type="hidden" value="<%= $room %>"/>
<div id="roomToolBar" class="collapse navbar-collapse">
<form class="navbar-form navbar-left input-group" id="inviteEmail" action="" method="post">
<div class="input-group">
<input type="email" id="recipient" class="form-control help" placeholder="<%=l 'EMAIL_INVITE' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SEND_INVITE' %>"/>
<span class="input-group-btn">
<button id="inviteEmailButton" type="submit" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SEND_INVITE' %>">
<span class="glyphicon glyphicon-send">
</span>
</button>
</span>
</div>
</form>
<div id="inviteDropdownContainer" class="navbar-form navbar-left input-group">
<button class="btn btn-default dropdown-toggle help" type="button" id="inviteMenuButton" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%=l 'INVITE_PEOPLE' %>">
<span class="glyphicon glyphicon-user"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="inviteMenuButton" id="inviteMenu">
<li>
<center>
<p><%=l 'TO_INVITE_SHARE_THIS_URL' %></p>
<% my $url = $self->url_for('/')->to_abs;
$url .= ($url =~ m/\/$/) ? '':'/';
%>
<h4><a href="javascript:void(0)" onclick="inviteUrlPopup();"><%= $url . $room %></a></h4>
</center>
</li>
<li class="divider"></li>
<li>
<form class="navbar-form" id="inviteEmail" action="" method="post">
<center>
<p><%=l 'YOU_CAN_INVITE_BY_MAIL' %></p>
</center>
<div class="input-group">
<input type="email" id="recipient" class="form-control help" placeholder="<%=l 'EMAIL_INVITE' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SEND_INVITE' %>"/>
<span class="input-group-btn">
<button id="inviteEmailButton" type="submit" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SEND_INVITE' %>">
<span class="glyphicon glyphicon-send">
</span>
</button>
</span>
</div>
</form>
</li>
</ul>
</div>
<div class="navbar-form navbar-left input-group">
<div class="input-group">
<input type="text" id="displayName" class="form-control help" placeholder="<%=l 'YOUR_NAME' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'NAME_SENT_TO_OTHERS' %>"/>

Loading…
Cancel
Save