Browse Source

- Move page Account to the new theme

- Write CSS for the select form elements
- Write the chat selector list
- Fix little CSS issues
- Fix the login page
pull/16/head
Jaussoin Timothée 11 years ago
parent
commit
0aa6b06788
  1. 2
      app/assets/js/movim_websocket.js
  2. 13
      app/views/account.tpl
  3. 14
      app/views/accountnext.tpl
  4. 2
      app/views/chat.tpl
  5. 2
      app/views/conf.tpl
  6. 1
      app/views/contact.tpl
  7. 6
      app/views/help.tpl
  8. 16
      app/widgets/AccountNext/_accountnext_form.tpl
  9. 6
      app/widgets/AccountNext/accountnext.tpl
  10. 8
      app/widgets/Chat/Chat.php
  11. 10
      app/widgets/Chat/_chat.tpl
  12. 2
      app/widgets/Chat/_chat_header.tpl
  13. 2
      app/widgets/Chat/_chat_messages.tpl
  14. 6
      app/widgets/Chat/chat.js
  15. 65
      app/widgets/Chats/Chats.php
  16. 11
      app/widgets/Chats/_chats.tpl
  17. 28
      app/widgets/Chats/chats.js
  18. 8
      app/widgets/Chats/chats.tpl
  19. 9
      app/widgets/Config/_config_form.tpl
  20. 20
      app/widgets/Contact/Contact.php
  21. 8
      app/widgets/Contact/_contact.tpl
  22. 6
      app/widgets/Header/_header_account.tpl
  23. 6
      app/widgets/Header/_header_accountnext.tpl
  24. 5
      app/widgets/Header/_header_help.tpl
  25. 43
      app/widgets/Login/_login_sessions.tpl
  26. 2
      app/widgets/Login/locales.ini
  27. 57
      app/widgets/Login/login.css
  28. 177
      app/widgets/Login/login.js
  29. 127
      app/widgets/Login/login.tpl
  30. 3
      app/widgets/Subscribe/subscribe.css
  31. 67
      app/widgets/Subscribe/subscribe.tpl
  32. 94
      app/widgets/Vcard4/_vcard4_form.tpl
  33. 10
      themes/material/css/block.css
  34. 22
      themes/material/css/color.css
  35. 41
      themes/material/css/form.css
  36. 32
      themes/material/css/list.css
  37. 114
      themes/material/css/style.css

2
app/assets/js/movim_websocket.js

@ -97,7 +97,7 @@ var MovimWebsocket = {
if(funcalls != null) {
for(h = 0; h < funcalls.length; h++) {
var funcall = funcalls[h];
console.log(funcall);
//console.log(funcall);
if(funcall.func != null && (typeof window[funcall.func] == 'function')) {
try {
window[funcall.func].apply(null, funcall.params);

13
app/views/account.tpl

@ -1,9 +1,6 @@
<?php /* -*- mode: html -*- */
?>
<div id="main">
<div id="left">
</div>
<div id="center">
<main>
<?php $this->widget('Header'); ?>
<section>
<?php $this->widget('Subscribe');?>
</div>
</div>
</section>
</main>

14
app/views/accountnext.tpl

@ -1,10 +1,6 @@
<?php /* -*- mode: html -*- */
?>
<div id="main">
<div id="left">
<?php $this->widget('AccountError');?>
</div>
<div id="center">
<main>
<?php $this->widget('Header'); ?>
<section>
<?php $this->widget('AccountNext');?>
</div>
</div>
</section>
</main>

2
app/views/chat.tpl

@ -6,7 +6,7 @@
<main>
<?php $this->widget('Header'); ?>
<section>
<?php $this->widget('Roster');?>
<?php $this->widget('Chats');?>
<?php $this->widget('Chat');?>
</section>
</main>

2
app/views/conf.tpl

@ -10,7 +10,7 @@
<?php $this->widget('Tabs');?>
<?php $this->widget('Vcard4');?>
<?php $this->widget('Config');?>
<?php $this->widget('ConfigData');?>
<?php //$this->widget('ConfigData');?>
<?php $this->widget('PubsubSubscriptionConfig');?>
</div>
</section>

1
app/views/contact.tpl

@ -8,6 +8,7 @@
<section>
<?php $this->widget('Roster');?>
<div>
<?php $this->widget('Notifs');?>
<?php $this->widget('Tabs');?>
<?php $this->widget('Contact');?>
</div>

6
app/views/help.tpl

@ -4,11 +4,7 @@
</nav>
<main>
<header>
<span id="menu" class="on_mobile icon" onclick="MovimTpl.showMenu()"><i class="md md-menu"></i></span>
<span class="on_desktop icon"><i class="md md-help"></i></span>
<h2>Help **FIXME**</h2>
</header>
<?php $this->widget('Header'); ?>
<section>
<div>
<?php $this->widget('Tabs');?>

16
app/widgets/AccountNext/_accountnext_form.tpl

@ -2,13 +2,11 @@
<div id="subscription_error">
</div>
<fieldset>
{$formh}
<a
class="button color green oppose"
onclick="{$submitdata}"
>
<i class="fa fa-check"></i> {$c->__('button.validate')}
</a>
</fieldset>
{$formh}
<a
class="button color green oppose"
onclick="{$submitdata}"
>
{$c->__('button.validate')}
</a>
</form>

6
app/widgets/AccountNext/accountnext.tpl

@ -1,8 +1,8 @@
<div id="subscribe">
<h1 class="paddedtopbottom">{$c->__('create.title')} {$c->__('on')} {$host}</h1>
<h1>{$c->__('create.title')} {$c->__('on')} {$host}</h1>
<div id="subscription_form" class="paddedtopbottom">
{$c->__('loading')}
<div id="subscription_form">
<h4>{$c->__('loading')}</h4>
</div>
<script type="text/javascript">

8
app/widgets/Chat/Chat.php

@ -7,6 +7,7 @@ class Chat extends WidgetCommon
function load()
{
$this->addjs('chat.js');
$this->registerEvent('carbons', 'onMessage');
$this->registerEvent('message', 'onMessage');
}
@ -14,11 +15,6 @@ class Chat extends WidgetCommon
{
$message = $packet->content;
\movim_log('HOP');
\movim_log('SESSION '.$message->session);
\movim_log('TO '.$message->jidto);
\movim_log('FROM '.$message->jidfrom);
// If the message is from me
if($message->session == $message->jidto) {
$from = $message->jidfrom;
@ -133,7 +129,7 @@ class Chat extends WidgetCommon
$this->call(
'ajaxSendMessage',
"'" . $jid . "'",
"Chats.sendMessage(this, '" . $jid . "')")
"Chat.sendMessage(this, '" . $jid . "')")
);
$view->assign('smiley', $this->call('ajaxSmiley'));

10
app/widgets/Chat/_chat.tpl

@ -1,16 +1,16 @@
<div id="{$jid}_discussion" class="actions fixed contained">
<div id="{$jid}_messages">
<div id="{$jid}_discussion" class="actions scroll fixed contained">
<section id="{$jid}_messages">
{$messages}
</div>
</section>
<div>
<ul>
<li>
<span class="icon gray">
<i class="md md-create"></i>
</span>
<div class="control" onclick="{$smiley}">
<!--<div class="control" onclick="{$smiley}">
<i class="md md-mood"></i>
</div>
</div>-->
<form>
<div>
<textarea

2
app/widgets/Chat/_chat_header.tpl

@ -2,7 +2,7 @@
<span class="on_desktop icon" onclick="MovimTpl.hidePanel()"><i class="md md-person"></i></span>
<ul class="active">
<li onclick="{$close}">
<li onclick="Chats_ajaxClose('{$jid}'); MovimTpl.hidePanel();">
<span class="icon">
<i class="md md-close"></i>
</span>

2
app/widgets/Chat/_chat_messages.tpl

@ -1,4 +1,4 @@
<ul class="thick">
<ul class="middle">
{loop="$messages"}
<li {if="$value->jidfrom == $jid"}class="oppose"{/if}>
<span class="icon bubble">

6
app/widgets/Chat/chat.js

@ -1,8 +1,8 @@
var Chats = {
var Chat = {
/*
message: function(jid, html) {
movim_append('messages' + jid, html);
Chats.scroll(jid);
},
},*/
addSmiley: function(smiley) {
},

65
app/widgets/Chats/Chats.php

@ -4,9 +4,74 @@ class Chats extends WidgetCommon
{
function load()
{
$this->addjs('chats.js');
$this->registerEvent('carbons', 'onMessage');
$this->registerEvent('message', 'onMessage');
}
function onMessage($packet)
{
$message = $packet->content;
// If the message is from me
if($message->session == $message->jidto) {
$from = $message->jidfrom;
} else {
$from = $message->jidto;
}
$chats = Cache::c('chats');
if(!array_key_exists($from, $chats)) {
$this->ajaxOpen($from);
}
}
function ajaxOpen($jid)
{
$chats = Cache::c('chats');
if($chats == null) $chats = array();
$chats[$jid] = 1;
Cache::c('chats', $chats);
RPC::call('movim_fill', 'chats_widget_list', $this->prepareChats());
RPC::call('Chats.refresh');
}
function ajaxClose($jid)
{
$chats = Cache::c('chats');
unset($chats[$jid]);
Cache::c('chats', $chats);
$c = new Chat;
$c->ajaxGet(current(array_keys($chats)));
RPC::call('movim_fill', 'chats_widget_list', $this->prepareChats());
RPC::call('Chats.refresh');
}
function prepareChats()
{
$chats = Cache::c('chats');
$view = $this->tpl();
$cd = new \Modl\ContactDAO;
foreach($chats as $jid => $value) {
$chats[$jid] = $cd->get($jid);
}
$view->assign('chats', array_reverse($chats));
return $view->draw('_chats', true);
}
function display()
{
$this->view->assign('list', $this->prepareChats());
}
}

11
app/widgets/Chats/_chats.tpl

@ -0,0 +1,11 @@
{loop="$chats"}
<li data-jid="{$value->jid}">
<div class="control">
<i class="md md-chevron-right"></i>
</div>
<span class="icon bubble">
<img src="{$value->getPhoto('s')}">
</span>
<span>{$value->getTrueName()}</span>
</li>
{/loop}

28
app/widgets/Chats/chats.js

@ -0,0 +1,28 @@
var Chats = {
refresh: function() {
var items = document.querySelectorAll('ul#chats_widget_list li');
var i = 0;
while(i < items.length)
{
items[i].onclick = function(e) {
MovimTpl.showPanel();
Chat_ajaxGet(this.dataset.jid);
Chats.reset(items);
movim_add_class(this, 'active');
}
i++;
}
items[0].click();
},
reset: function(list) {
for(i = 0; i < list.length; i++) {
movim_remove_class(list[i], 'active');
}
}
}
MovimWebsocket.attach(function() {
Chats.refresh();
});

8
app/widgets/Chats/chats.tpl

@ -0,0 +1,8 @@
<div id="chats_widget">
<ul id="chats_widget_list" class="thick active divided">
{$list}
</ul>
<a class="button action color">
<i class="md md-playlist-add"></i>
</a>
</div>

9
app/widgets/Config/_config_form.tpl

@ -4,8 +4,9 @@
<i class="fa fa-user"></i> {$c->__('config.feed_configuration')}
</a>-->
<form enctype="multipart/form-data" method="post" action="index.php" name="general">
<br/>
<h3>{$c->__('config.general')}</h3>
<div class="block large">
<div class="block">
<div class="select">
<select name="language" id="language">
<option value="en">English (default)</option>
@ -95,11 +96,11 @@
<!--<input value="{$c->t('Submit'); ?>" onclick="<?php echo $submit; ?>" type="button" class="button icon yes merged right" style="float: right;">
<input type="reset" value="{$c->t('Reset'); ?>" class="button icon no merged left" style="float: right;">-->
<div class="clear"></div>
<div class="clear padded"></div>
<a
onclick="{$submit}"
class="button color" >
{$c->__('button.submit')}
class="button color oppose" >
{$c->__('button.save')}
</a>
<div class="clear"></div>
</form>

20
app/widgets/Contact/Contact.php

@ -54,6 +54,14 @@ class Contact extends WidgetCommon
Dialog::fill($view->draw('_contact_edit', true));
}
function ajaxChat($jid)
{
$c = new Chats;
$c->ajaxOpen($jid);
RPC::call('movim_redirect', $this->route('chat'));
}
function ajaxDeleteContact($jid)
{
$view = $this->tpl();
@ -124,10 +132,22 @@ class Contact extends WidgetCommon
$view->assign('contact', $c);
$view->assign('contactr', $cr);
$view->assign('chat',
$this->call(
'ajaxChat',
"'".$c->jid."'"));
return $view->draw('_contact', true);
} elseif(isset($cr)) {
$view->assign('contact', null);
$view->assign('contactr', $cr);
$view->assign('chat',
$this->call(
'ajaxChat',
"'".$cr->jid."'"));
return $view->draw('_contact', true);
} else {
return $this->prepareEmpty($jid);

8
app/widgets/Contact/_contact.tpl

@ -172,6 +172,10 @@
{/if}
</ul>
{/if}
<a onclick="{$chat}" class="button action color red">
<i class="md md-chat"></i>
</a>
{else}
<ul class="thick">
<li>
@ -180,7 +184,3 @@
</li>
</ul>
{/if}
<a class="button action color red">
<i class="md md-chat"></i>
</a>

6
app/widgets/Header/_header_account.tpl

@ -0,0 +1,6 @@
<header id="header">
<a href="{$c->route('main')}" class="classic">
<span id="menu" class="icon"><i class="md md-home"></i></span>
</a>
<h2>{$c->__('page.account_creation')}</h2>
</header>

6
app/widgets/Header/_header_accountnext.tpl

@ -0,0 +1,6 @@
<header id="header">
<a href="{$c->route('account')}" class="classic">
<span id="menu" class="icon"><i class="md md-arrow-back"></i></span>
</a>
<h2>{$c->__('page.account_creation')}</h2>
</header>

5
app/widgets/Header/_header_help.tpl

@ -0,0 +1,5 @@
<header id="header">
<span id="menu" class="on_mobile icon" onclick="MovimTpl.showMenu()"><i class="md md-menu"></i></span>
<span class="on_desktop icon"><i class="md md-help"></i></span>
<h2>{$c->__('page.help')}</h2>
</header>

43
app/widgets/Login/_login_sessions.tpl

@ -1,20 +1,23 @@
<ul class="active">
<li class="subheader">{$c->__('account.title')}</li>
{loop="$sessions"}
<li onclick="chooseSession('{$value->jid}')">
<div class="control">
<i onclick="removeSession('{$value->jid}')" class="fa fa-times"></i>
</div>
<span class="icon bubble">
<img src="{$value->getPhoto('s')}"/>
</span>
<span onclick="chooseSession('{$value->jid}')">{$value->getTrueName()}</span>
</li>
{/loop}
<li>
<span class="icon bubble color green">
<i class="md md-face-unlock"></i>
</span>
<span onclick="chooseSession('')">{$c->__('form.another_account')}</span>
</li>
</ul>
<section>
<h3>{$c->__('account.title')}</h3>
<br />
<ul class="active">
{loop="$sessions"}
<li>
<div class="control">
<i onclick="Login.removeSession('{$value->jid}')" class="fa fa-times"></i>
</div>
<span class="icon bubble">
<img src="{$value->getPhoto('s')}"/>
</span>
<span onclick="Login.choose('{$value->jid}')">{$value->getTrueName()}</span>
</li>
{/loop}
</ul>
</section>
<div>
<a class="button flat" href="{$c->route('admin')}">
<i class="md md-pages"></i>
</a>
<span class="button flat" onclick="Login.choose('')">{$c->__('form.another_account')}</span>
</div>

2
app/widgets/Login/locales.ini

@ -26,7 +26,7 @@ form.username = 'My address'
form.password = 'Password'
form.create_one = 'Create one !'
form.no_account = 'No account yet ?'
form.another_account = 'Login with an another account'
form.another_account = 'Another account'
whitelist.info = 'This server accept only connection with xmpp accounts from these servers :'
whitelist.info2 = "If you don't have such xmpp account, you can try %sanother public Movim%s client."

57
app/widgets/Login/login.css

@ -1,17 +1,54 @@
body main {
background-color: #32434D;
}
#login_widget {
background-image: url(img/logo.svg);
background-repeat: no-repeat;
background-position: center 5rem;
background-size: 80% auto;
width: 50rem;
max-width: calc(100% - 2rem);
padding-top: 20rem;
background-position: center 90%;
background-size: 30rem auto;
animation: 60s infinite colorful;
}
@media screen and (max-width: 600px) {
body main {
background-image: none;
}
}
#login_widget li.new_account {
text-align: center;
}
#login_widget > div {
display: none;
}
#login_widget.choose > div:first-child {
display: initial;
}
#login_widget:not(.choose) > div:last-child {
display: initial;
}
#login_widget span.info {
float: right;
margin-top: 2.5rem;
}
#login_widget span.info + h3 {
margin-top: 2rem;
}
ul.admin {
position: relative;
text-align: center;
color: white;
max-width: 45rem;
}
/*
#login_widget > div {
background-color: white;
border-radius: 0.25rem;
@ -33,7 +70,7 @@ body main {
#login_widget > ul {
display: none;
}
}
}*/
/*body {
width: 100%;
@ -206,7 +243,7 @@ body main {
}
*/
/* States */
/*
#login_widget > div #sessions,
#login_widget > div.choose #loginhelp,
#login_widget > div.choose form div,
@ -230,7 +267,7 @@ body main {
footer {
display: none;
}
}*/
/*
@media screen and (max-width: 1024px) {
#loginpage {

177
app/widgets/Login/login.js

@ -1,71 +1,100 @@
function fillExample(login, pass) {
document.querySelector('#login').value = login;
document.querySelector('#pass').value = pass;
}
/**
* @brief Save a jid in the local storage
* @param The jid to remember
*/
function rememberSession(jid) {
if(localStorage['previousSessions'] == null) {
localStorage.setObject('previousSessions', new Array());
}
var s = localStorage.getObject('previousSessions');
if(s.indexOf(jid) == -1) {
s.push(jid);
localStorage.setObject('previousSessions', s);
}
}
/**
* @brief Choose a session to connect and show the login form
* @param The jid to choose
*/
function chooseSession(jid) {
movim_remove_class('#login_widget > div', 'choose');
document.querySelector('#login').value = jid;
if(jid != '') {
document.querySelector('#pass').focus();
} else {
document.querySelector('#login').focus();
}
}
/**
* @brief Remove a remembered session
* @param The jid to choose
*/
function removeSession(jid) {
var s = localStorage.getObject('previousSessions');
s.splice(s.indexOf(jid), 1);
if(s.length == 0) {
localStorage.removeItem('previousSessions');
movim_remove_class('#login_widget > div', 'choose');
} else {
localStorage.setObject('previousSessions', s);
var Login = {
fillExample : function(login, pass) {
document.querySelector('#login').value = login;
document.querySelector('#pass').value = pass;
},
/**
* @brief Init the main form behaviour
*/
init : function() {
// The form submission event
form = document.querySelector('form[name="login"]');
form.onsubmit = function(e) {
e.preventDefault();
var button = this.querySelector('input[type=submit]');
button.value = button.dataset.loading;
eval(this.dataset.action);
localStorage.username = document.querySelector('#login').value;
Login.rememberSession(localStorage.username);
// A fallback security
setTimeout("MovimWebsocket.unregister()", 7000);
}
},
/**
* @brief Save a jid in the local storage
* @param The jid to remember
*/
rememberSession : function(jid) {
if(localStorage['previousSessions'] == null) {
localStorage.setObject('previousSessions', new Array());
}
var s = localStorage.getObject('previousSessions');
if(s.indexOf(jid) == -1) {
s.push(jid);
localStorage.setObject('previousSessions', s);
}
},
/**
* @brief Choose a session to connect and show the login form
* @param The jid to choose
*/
choose : function(jid) {
movim_remove_class('#login_widget', 'choose');
document.querySelector('#login').value = jid;
if(jid != '') {
document.querySelector('#pass').focus();
} else {
document.querySelector('#login').focus();
}
},
/**
* @brief Remove a remembered session
* @param The jid to choose
*/
removeSession : function(jid) {
var s = localStorage.getObject('previousSessions');
s.splice(s.indexOf(jid), 1);
if(s.length == 0) {
localStorage.removeItem('previousSessions');
movim_remove_class('#login_widget', 'choose');
} else {
localStorage.setObject('previousSessions', s);
}
Login_ajaxGetRememberedSession(localStorage.getItem('previousSessions'));
},
/**
* @brief Back to the choosing panel
*/
backToChoose : function() {
movim_add_class('#login_widget', 'choose');
},
/**
* @brief Post login requests
*/
post : function(jid, url) {
Login.rememberSession(jid);
localStorage.postStart = 1;
movim_reload(url);
}
Login_ajaxGetRememberedSession(localStorage.getItem('previousSessions'));
}
/**
* @brief Back to the choosing panel
*/
function backToChoose() {
movim_add_class('#login_widget > div', 'choose');
}
/**
* @brief Post login requests
*/
function postLogin(jid, url) {
rememberSession(jid);
localStorage.postStart = 1;
movim_reload(url);
Login.post(jid, url);
}
MovimWebsocket.attach(function()
@ -73,29 +102,13 @@ MovimWebsocket.attach(function()
if(localStorage.username != null)
document.querySelector('#login').value = localStorage.username;
// The form submission event
form = document.querySelector('form[name="login"]');
form.onsubmit = function(e) {
e.preventDefault();
var button = this.querySelector('input[type=submit]');
button.className = 'button color orange icon yes';
button.value = button.dataset.loading;
eval(this.dataset.action);
localStorage.username = document.querySelector('#login').value;
rememberSession(localStorage.username);
// A fallback security
setTimeout("MovimWebsocket.unregister()", 7000);
}
Login.init();
// We hide the Websocket error
document.querySelector('#error_websocket').style.display = 'none';
// We enable the form
var inputs = document.querySelectorAll('#login_widget > div input[disabled]');
var inputs = document.querySelectorAll('.dialog div input[disabled]');
for (var i = 0; i < inputs.length; i++)
{
inputs[i].disabled = false;
@ -105,7 +118,7 @@ MovimWebsocket.attach(function()
Login_ajaxGetRememberedSession(localStorage.getItem('previousSessions'));
if(localStorage.getItem('previousSessions') != null) {
movim_add_class('#login_widget > div', 'choose');
movim_add_class('#login_widget', 'choose');
}
});

127
app/widgets/Login/login.tpl

@ -1,18 +1,15 @@
{if="!BROWSER_COMP"}
<div class="message warning">
{$c->__('error.too_old')}
</div>
{else}
<div id="login_widget">
<div class="fadeDown">
{if="!BROWSER_COMP"}
<div class="message warning">
{$c->__('error.too_old')}
</div>
{else}
<div id="sessions">
<div id="sessions" class="dialog actions"></div>
</div>
{if="isset($info) && $info != ''"}
<div class="message warning">
{$info}
</div>
{/if}
<div class="dialog">
<section>
<span class="info">{$c->__('connected')} {$connected}{$c->__('population')} {$pop}</span>
<h3>{$c->__('page.login')}</h3>
<form
data-action="{$submit}"
name="login">
@ -26,47 +23,27 @@
placeholder="{$c->__('form.password')}"/>
<label for="pass">{$c->__('form.password')}</label>
</div>
<input
type="submit"
disabled
data-loading="{$c->__('button.connecting')}"
value="{$c->__('button.come_in')}"
class="button flat"/>
<!--<div class="clear"></div>-->
<!--
<div class="clear"></div>-->
<!--<ul id="loginhelp">
{if="$whitelist_display == true"}
<li id="whitelist">
<p>{$c->__('whitelist.info')}</p>
<p style="font-weight:bold; text-align:center; margin:0.5em;">{$whitelist}</p>
<p>{$c->__('whitelist.info2', '<a href="http://pod.movim.eu">', '</a>')}</p>
</li>
{else}
<li id="jabber">{$c->__('account.jabber')}
<a href="#" onclick="fillExample('demonstration@movim.eu', 'demonstration');">
{$c->__('account.demo')}
<div>
<ul class="simple thin">
<li>
<div class="control">
<input
type="submit"
disabled
data-loading="{$c->__('button.connecting')}"
value="{$c->__('button.come_in')}"
class="button flat"/>
</div>
<a id="return_sessions" class="button flat" href="#" onclick="Login.backToChoose()">
{$c->__('account.title')}
</a>
</li>
<li id="gmail">
{$gmail}
</li>
<li id="facebook">
{$facebook}
</li>
{/if}
</ul>-->
</ul>
</div>
</form>
<ul class="">
<li>
<span class="icon">
<a id="return_sessions" class="" href="#" onclick="backToChoose()">
<i class="fa fa-chevron-left"></i>
</a>
</span>
<ul class="thin simple">
<li class="new_account">
<span>{$c->__('form.no_account')}
<a class="" href="{$c->route('account')}">
{$c->__('form.create_one')}
@ -74,18 +51,44 @@
</span>
</li>
</ul>
{/if}
<div id="error_websocket" class="snackbar">
{$c->__('error.websocket')}
</div>
</section>
</div>
<ul class="thin simple">
<li>{$c->__('connected')} {$connected}{$c->__('population')} {$pop}
<a href="{$c->route('admin')}">
{$c->__('page.administration')}
</a>
</li>
</ul>
</div>
{if="isset($info) && $info != ''"}
<div class="message warning">
{$info}
</div>
{/if}
<div id="error_websocket" class="snackbar">
{$c->__('error.websocket')}
</div>
{/if}
<!--<div class="clear"></div>-->
<!--
<div class="clear"></div>-->
<!--<ul id="loginhelp">
{if="$whitelist_display == true"}
<li id="whitelist">
<p>{$c->__('whitelist.info')}</p>
<p style="font-weight:bold; text-align:center; margin:0.5em;">{$whitelist}</p>
<p>{$c->__('whitelist.info2', '<a href="http://pod.movim.eu">', '</a>')}</p>
</li>
{else}
<li id="jabber">{$c->__('account.jabber')}
<a href="#" onclick="fillExample('demonstration@movim.eu', 'demonstration');">
{$c->__('account.demo')}
</a>
</li>
<li id="gmail">
{$gmail}
</li>
<li id="facebook">
{$facebook}
</li>
{/if}
</ul>-->

3
app/widgets/Subscribe/subscribe.css

@ -1,4 +1,4 @@
#subscribe .server:hover {
/*#subscribe .server:hover {
background-color: #EEE;
cursor: pointer;
border-color: #BBB;
@ -31,3 +31,4 @@
border: 1px solid #DDD;
padding: 1em;
}
*/

67
app/widgets/Subscribe/subscribe.tpl

@ -1,37 +1,48 @@
<div id="subscribe">
<h1 class="paddedtopbottom">{$c->__('subscribe.title')}</h1>
<p class="paddedtopbottom">{$c->__('subscribe.info')}</p>
<h4>{$c->__('subscribe.info')}</h4>
{loop="$servers"}
<div
class="block"
onclick="movim_redirect('{$c->route('accountnext', array($value->fn->text, false))}')">
<div class="server {if="$value->checked"}star{/if}">
<h1>{$value->fn->text}</h1>
<img
class="flag"
title="{$value->adr->country}"
alt="{$value->adr->country}"
src="{$c->flagPath($value->adr->country)}"/>
<p>{$value->note->text}</p>
<a target="_blank" href="{$value->url->uri}">
{$value->url->uri}
</a>
</div>
</div>
{/loop}
<div class="block">
<div class="server">
<h1>{$c->__('subscribe.server_question')}</h1>
<ul class="thick active">
{loop="$servers"}
<li
class="block condensed"
onclick="movim_redirect('{$c->route('accountnext', array($value->fn->text, false))}')">
<span class="icon bubble color {$value->fn->text|stringToColor}">
{if="$value->checked"}
<i class="fa md-star-outline"></i>
{else}
{$value->fn->text|firstLetterCapitalize}
{/if}
</span>
<div class="server {if="$value->checked"}star{/if}">
<span class="info">
<img
class="flag"
title="{$value->adr->country}"
alt="{$value->adr->country}"
src="{$c->flagPath($value->adr->country)}"/>
</span>
<span>{$value->fn->text}</span>
<p>
{$value->note->text}<br />
<a target="_blank" href="{$value->url->uri}">
{$value->url->uri}
</a>
</p>
</div>
</li>
{/loop}
<li class="block condensed">
<span class="icon bubble color orange">
<i class="md md-add-circle-outline"></i>
</span>
<span>{$c->__('subscribe.server_question')}</span>
<p>
{$c->__('subscribe.server_contact')} • <a href="http://movim.eu/">http://movim.eu/</a>
</p>
</div>
</div>
</li>
</ul>
</div>

94
app/widgets/Vcard4/_vcard4_form.tpl

@ -1,11 +1,6 @@
<ul>
<li class="subheader"> {$c->__('vcard.privacy_title')}</li>
<li class="condensed">
<span class="icon bubble color blue">
<i class="md md-security"></i>
</span>
<span>{$c->__('vcard.privacy_question')}</span>
<form>
<div class="control">
<div class="checkbox">
@ -21,12 +16,19 @@
</div>
</div>
</form>
<span class="icon bubble color blue">
<i class="md md-security"></i>
</span>
<span>{$c->__('vcard.privacy_question')}</span>
<p>{$c->__('vcard.privacy_info')}</p>
</li>
</ul>
<div class="clear padded"></div>
<form name="vcard4" id="vcard4form">
<h4>{$c->__('page.profile')}</h4>
<h3>{$c->__('page.profile')}</h3>
<div class="block">
<input type="text" name="fn" class="content" value="{$me->fn}">
<label for="fn">{$c->__('vcard.name')}</label>
@ -45,9 +47,10 @@
<!-- The date picker -->
<div class="element ">
<div>
<label for="day">{$c->__('vcard.date_of_birth')}</label>
<div class="select" style="width: 33%; float: left;">
<div class="select" style="width: 33.33%; float: left;">
<select name="day" class="datepicker">
<option value="-1">{$c->__('Day')}</option>
{loop="$days"}
@ -59,8 +62,8 @@
{/loop}
</select>
</div>
<div class="select" style="width: 34%; float: left;">
<div class="select" style="width: 33.33%; float: left;">
<select name="month" class="datepicker">
<option value="-1">{$c->__('Month')}</option>
{loop="$months"}
@ -72,8 +75,8 @@
{/loop}
</select>
</div>
<div class="select" style="width: 33%; float: left;">
<div class="select" style="width: 33.33%; float: left;">
<select name="year" class="datepicker">
<option value="-1">{$c->__('Year')}</option>
{loop="$years"}
@ -87,7 +90,7 @@
</div>
</div>
<div>
<div class="block">
<label for="gender">{$c->__('vcard.gender')}</label>
<div class="select">
<select name="gender">
@ -102,7 +105,7 @@
</div>
</div>
<div>
<div class="block">
<label for="marital">{$c->__('vcard.marital')}</label>
<div class="select">
<select name="marital">
@ -117,73 +120,82 @@
</div>
</div>
<div class="element large">
<div class="clear"></div>
<div>
<input type="url" name ="url" class="content" value="{$me->url}">
<label for="url">{$c->__('vcard.website')}</label>
</div>
<div class="element large">
<div>
<textarea name="desc" id="desctext" class="content" onkeyup="movim_textarea_autoheight(this);">{$desc}</textarea>
<label for="desc">{$c->__('vcard.about')}</label>
</div>
<legend><i class="fa fa-compass"></i> {$c->__('vcard.position_title')}</legend>
<div>
<div class="clear padded"></div>
<h3>{$c->__('vcard.position_title')}</h3>
<div class="block">
<input type="text" type="locality" name ="locality" class="content" value="{$me->adrlocality}" placeholder="{$c->__('Locality')}">
<label for="url">{$c->__('vcard.locality')}</label>
</div>
<div>
<label for="country">{$c->__('vcard.country')}</label>
<div class="select">
<select name="country">
<option value=""></option>
{loop="$countries"}
<option
{if="$value == $me->adrcountry"}
selected
{/if}
value="{$value}">{$value}</option>
{/loop}
</select>
<div class="block">
<div class="select">
<select name="country">
<option value=""></option>
{loop="$countries"}
<option
{if="$value == $me->adrcountry"}
selected
{/if}
value="{$value}">{$value}</option>
{/loop}
</select>
</div>
<label for="country">{$c->__('vcard.country')}</label>
</div>
<div class="clear padded"></div>
<legend><i class="fa fa-circle-thin"></i> {$c->__('vcard.accounts_title')}</legend>
<h3>{$c->__('vcard.accounts_title')}</h3>
<div>
<div class="block">
<input type="text" name="twitter" class="content" value="{$me->twitter}" placeholder="{$c->__('Nickname')}">
<label for="twitter"><i class="fa fa-twitter"></i> {$c->__('vcard.twitter')}</label>
</div>
<div>
<div class="block">
<input type="text" name="skype" class="content" value="{$me->skype}" placeholder="{$c->__('Nickname')}">
<label for="skype"><i class="fa fa-skype"></i> {$c->__('vcard.skype')}</label>
</div>
<div>
<div class="block">
<input type="email" name="yahoo" class="content" value="{$me->yahoo}" placeholder="{$c->__('Yahoo Account')}">
<label for="skype"><i class="fa fa-yahoo"></i> {$c->__('vcard.yahoo')}</label>
</div>
<div class="clear"></div>
<a
onclick="
{$submit}
movim_button_save('#vcard4validate');
this.value = '{$c->__('Submitting')}';
this.className='button color orange oppose merged right inactive';"
class="button merged right color green oppose"
this.className='button oppose inactive';"
class="button color oppose"
id="vcard4validate"
>
<i class="fa fa-check"></i> {$c->__('Submit')}
{$c->__('Submit')}
</a>
<a
onclick="document.querySelector('#vcard4form').reset();"
class="button merged left color orange oppose">
<i class="fa fa-eraser"></i> {$c->__('Reset')}
class="button flat oppose">
{$c->__('Reset')}
</a>
<div class="clear padded"></div>
</form>

10
themes/material/css/block.css

@ -9,7 +9,10 @@
.block:nth-of-type(even) {
float: right;
clear: right;
padding-right: 1rem;
}
.block:nth-of-type(even):not(li) {
padding-left: 2rem;
}
.block.large {
@ -20,5 +23,10 @@
@media screen and (max-width: 1024px) {
.block {
width: 100%;
padding-right: 2rem;
}
.block:nth-of-type(even):not(li) {
padding-left: 0;
}
}

22
themes/material/css/color.css

@ -21,6 +21,24 @@
color: white;
}
/* Animations */
@keyframes colorful {
0% { background-color: #9E9E9E; }
10% { background-color: #607D8B; }
20% { background-color: #F44336; }
30% { background-color: #9C27B0; }
40% { background-color: #3F51B5; }
50% { background-color: #2196F3; }
60% { background-color: #689F38; }
70% { background-color: #FF9800; }
80% { background-color: #FDD835; }
90% { background-color: #795548; }
100% { background-color: #9E9E9E; }
}
/* Elements */
.bubble.color , .icon.color { color: white; background-color: #607D8B; border-color: #607D8B }
#roster ul#rosterlist ul.contact li.dnd .chat,
.bubble.color.red , .icon.color.red { color: white; background-color: #F44336; border-color: #F44336 }
@ -78,6 +96,10 @@ body.indigo ul li span.counter,
body.indigo .oppose .bubble,
body.indigo main > header { background-color: #3F51B5; color: white; border-color: #3F51B5; }
/* 200 */
body.indigo .oppose .bubble a,
body.indigo main > header a { color: #9fa8da; }
body.indigo .tabs,
body.indigo .button,
body.indigo input[type=button],

41
themes/material/css/form.css

@ -1,6 +1,6 @@
/* Form */
form > div:not(.clear) {
form > div:not(.clear):not(.control) {
min-height: 9rem;
position: relative;
box-sizing: border-box;
@ -24,9 +24,34 @@ form > div > textarea {
resize: none;
font-size: 2rem;
font-family: sans-serif;
line-height: 3rem;
box-sizing: border-box;
}
form > div > .select {
font-size: 2rem;
margin-top: 4.2rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
padding-bottom: 1rem;
overflow: hidden;
}
form > div > .select:before {
font-family: "Material Design Iconic Font";
content: "\f295";
display: block;
font-size: 4rem;
margin-bottom: -4rem;
float: right;
color: #B8B8B8;
}
form > div > .select select {
width: calc(100% + 3rem);
background-color: transparent;
}
form > div > input,
form > div > textarea {
display: block;
@ -35,14 +60,14 @@ form > div > textarea {
width: 100%;
background-color: transparent;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
margin-bottom: 1px;
margin-bottom: 1rem;
overflow: hidden; /* Fixme */
}
form > div > input:focus,
form > div > textarea:focus {
margin-bottom: 0;
margin-bottom: calc(1rem - 1px);
}
form > div > input:required {
@ -146,6 +171,15 @@ form > div .radio > input[type="radio"]:checked + label:hover {
/* Button */
.button.oppose {
float: right;
}
.button.inactive {
opacity: 0.5;
pointer-events:none;
}
.button,
input[type=button] {
min-width: 8rem;
@ -172,6 +206,7 @@ input[type=button] {
input[type=button].flat {
box-shadow: none;
background-color: transparent;
border: 0;
}
.button:hover,

32
themes/material/css/list.css

@ -30,6 +30,13 @@ ul.simple > li span.icon {
display: none;
}
ul.middle > li {
min-height: 7rem;
line-height: 5rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
ul.thin > li {
min-height: 5rem;
line-height: 5rem;
@ -87,7 +94,8 @@ ul li span {
white-space: nowrap;
}
ul > li > div.control {
ul > li > div.control,
ul > li > form > div.control {
float: right;
text-align: right;
min-width: 5rem;
@ -95,12 +103,16 @@ ul > li > div.control {
line-height: 6rem;
}
ul > li > form > div.control {
margin-top: 1.5rem;
}
ul.thin > li > div.control {
line-height: 5rem;
line-height: 3rem;
}
ul.thick > li > div.control {
line-height: 7rem;
line-height: 5rem;
}
ul li > div.control > * {
@ -111,7 +123,7 @@ ul li > div.control.bottom {
top: auto;
bottom: 0;
}
/*
ul.thick li > div.control.bottom {
bottom: 2rem;
}
@ -120,20 +132,16 @@ ul li > div.control + form,
ul li > div.control + p {
padding-right: 6rem;
}
ul li div.control {
*/
ul li > div.control {
float: right;
min-height: 0;
}
/*
ul li div.control.padded {
padding-top: 2rem;
}
ul.thin li div.control {
padding-top: 1.5rem;
}
*/
ul li span.info {
float: right;
margin-left: 1rem;

114
themes/material/css/style.css

@ -44,6 +44,10 @@ body {
clear: both;
}
.clear.padded {
height: 2rem;
}
body > * {
display: block;
height: 100%;
@ -209,16 +213,16 @@ main > header ul li {
font-size: 4rem;
}
main section {
main > section {
height: 100%;
position: relative;
}
main header + section {
main > header + section {
height: calc(100% - 7rem);
}
main section > div {
main > section > div {
overflow-y: auto;
display: block;
position: relative;
@ -228,20 +232,20 @@ main section > div {
box-sizing: border-box;
}
main section > div:not(:last-child) {
main > section > div:not(:last-child) {
border-right: 1px solid gray;
}
main section > div > * {
main > section > div > * {
max-width: 100rem;
margin: 0 auto;
}
/* Two blocks*/
main section > div:first-child:nth-last-child(2) {
main > section > div:first-child:nth-last-child(2) {
width: 25%;
}
main section > div:first-child:nth-last-child(2) ~ div {
main > section > div:first-child:nth-last-child(2) ~ div {
width: 75%;
position: absolute;
top: 0;
@ -249,7 +253,7 @@ main section > div:first-child:nth-last-child(2) ~ div {
transition: right 0.2s ease;
}
main section > div > div.contained { /* Specific behaviour when the scroll need to be inside the block */
main > section > div > div.contained { /* Specific behaviour when the scroll need to be inside the block */
height: calc(100% - 9rem);
overflow-y: scroll;
position: absolute;
@ -257,23 +261,24 @@ main section > div > div.contained { /* Specific behaviour when the scroll need
width: 100%;
}
main section > div > div.contained > * {
main > section > div > div.contained > * {
max-width: 100rem;
margin: 0 auto;
}
@media screen and (max-width: 1024px) {
/* Two blocks*/
main section > div:first-child:nth-last-child(2) {
main > section > div:first-child:nth-last-child(2) {
width: 100%;
}
main section > div:first-child:nth-last-child(2) ~ div {
main > section > div:first-child:nth-last-child(2) ~ div {
background-color: white;
width: 100%;
right: -100%;
z-index: 1;
}
main section > div:first-child:nth-last-child(2) ~ div.enabled {
main > section > div:first-child:nth-last-child(2) ~ div.enabled {
right: 0;
}
@ -402,55 +407,64 @@ header.big p {
*/
/* Dialog */
.dialog:empty {
display: none;
}
.dialog {
position: fixed;
top: 15%;
top: 5%;
left: 50%;
background-color: white;
height: initial;
max-height: 70%;
width: 40rem;
margin-left: -20rem;
max-height: 90%;
width: 45rem;
margin-left: -22.5rem;
overflow: hidden;
box-shadow: 0 2.5rem 5rem rgba(0,0,0,0.30), 0 2rem 1.5rem rgba(0,0,0,0.22);
border-radius: 0.25rem;
z-index: 3;
box-sizing: border-box;
}
height: 100%;
padding-top: 3rem;
padding-bottom: 7rem;
.dialog:empty {
display: none;
}
.dialog.scroll {
height: 90%;
}
.dialog > section {
margin: 0 3rem;
height: 100%;
overflow-y: auto;
position: relative;
}
.dialog > section:hover {
.dialog > section > *:first-child {
margin-top: 2rem;
}
.dialog > section ul li {
.dialog > section > *:last-child {
margin-bottom: 2rem;
}
.dialog > section > *:not(ul) {
padding: 0 2rem;
}
/*
.dialog > div > section ul li {
padding-right: 0;
padding-left: 7rem;
}
.dialog > section ul li.subheader,
.dialog > section ul.simple li {
.dialog > div > section ul li.subheader,
.dialog > div > section ul.simple li {
padding-left: 0;
}
.dialog > section ul li .icon {
.dialog > div > section ul li .icon {
left: 1rem;
}
*/
@media screen and (max-width: 600px) {
.dialog {
width: 90%;
@ -467,10 +481,9 @@ header.big p {
/* Actions bar */
.actions {
margin-bottom: 7rem;
padding-bottom: 7rem;
}
.actions > div:last-child {
background-color: white;
width: 100%;
@ -478,7 +491,7 @@ header.big p {
text-align: right;
bottom: 0;
padding: 0.5rem 2rem;
position: relative;
position: absolute;
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
@ -494,6 +507,10 @@ header.big p {
padding: 0;
}
.actions.scroll > section {
margin-bottom: 10rem;
}
main section > div:first-child:nth-last-child(2) ~ div .actions.fixed > div:last-child {
max-width: calc(75% - 5rem);
}
@ -563,6 +580,35 @@ main section > div:first-child:nth-last-child(2) ~ div .actions.fixed > div:last
}
}
/* Placeholder */
.placeholder {
text-align: center;
font-size: 1.2em;
max-width: 500px;
margin: 0 auto;
}
.placeholder p {
text-align: center;
}
.placeholder.icon {
background-image: url(../img/icons/placeholder/chat.png);
background-size: 35%;
padding-top: 12em;
background-repeat: no-repeat;
background-position: center 1em;
}
.placeholder.icon.newspaper { background-image: url(../img/icons/placeholder/newspaper.png); }
.placeholder.icon.media { background-image: url(../img/icons/placeholder/media.png); }
.placeholder.icon.explore { background-image: url(../img/icons/placeholder/explore.png); }
.placeholder.icon.plane { background-image: url(../img/icons/placeholder/plane.png); }
.placeholder.icon.file { background-image: url(../img/icons/placeholder/file.png); }
.placeholder.icon.clipboard { background-image: url(../img/icons/placeholder/clipboard.png); }
/* Definition list */
dl dt,

Loading…
Cancel
Save