Browse Source
- Rewrite the UI to make it more natural
- Rewrite the UI to make it more natural
- Clean a lot of sourcecode - Move the status from Profile to Presence + new Presence widget in the to right cornerpull/16/head
Jaussoin Timothée
11 years ago
35 changed files with 521 additions and 472 deletions
-
10app/assets/js/movim_websocket.js
-
2app/views/explore.tpl
-
2app/views/media.tpl
-
2app/views/page.tpl
-
48app/widgets/Bookmark/_bookmark_list.tpl
-
4app/widgets/Bookmark/bookmark.css
-
6app/widgets/Bookmark/bookmark.tpl
-
2app/widgets/Chat/chat.css
-
2app/widgets/ContactAction/ContactAction.php
-
32app/widgets/ContactManage/ContactManage.php
-
2app/widgets/ContactManage/_contact_manage_form.tpl
-
14app/widgets/ContactSummary/contactsummary.css
-
18app/widgets/Login/Login.php
-
7app/widgets/Login/login.css
-
20app/widgets/Media/media.css
-
78app/widgets/Presence/Presence.php
-
45app/widgets/Presence/_presence_list.tpl
-
1app/widgets/Presence/locales.ini
-
161app/widgets/Presence/presence.css
-
20app/widgets/Presence/presence.js
-
2app/widgets/Presence/presence.tpl
-
95app/widgets/Profile/Profile.php
-
19app/widgets/Profile/_profile_vcard.tpl
-
5app/widgets/Profile/locales.ini
-
54app/widgets/Profile/profile.css
-
65app/widgets/Roster/roster.css
-
22app/widgets/Tabs/tabs.css
-
36bootstrap.php
-
9src/Movim/Daemon/Behaviour.php
-
74system/RPC.php
-
3system/Sessionx.php
-
29system/controllers/BaseController.php
-
62themes/movim/css/nav.css
-
3themes/movim/css/posts.css
-
39themes/movim/css/style.css
@ -1,35 +1,41 @@ |
|||
<h2><i class="fa fa-users"></i> {$c->__('title.conferences')}</h2> |
|||
<ul> |
|||
<li><h2><i class="fa fa-users"></i> {$c->__('title.conferences')}</h2></li> |
|||
{loop="$conferences"} |
|||
<li> |
|||
<a href="#" onclick="{$c->getMucRemove($value)}" class="button oppose color transparent alone"><i class="fa fa-times oppose"></i></a> |
|||
<!--<a href="#" onclick="{$c->getMucRemove($value)}" class="button oppose color transparent alone"><i class="fa fa-times oppose"></i></a>--> |
|||
<a href="#" onclick="{$c->getMucJoin($value)}">{$value->name}</a> |
|||
</li> |
|||
{/loop} |
|||
|
|||
<br /> |
|||
<a class="button black oppose" |
|||
<li> |
|||
<a class="button color gray oppose" |
|||
title="{$c->t('Add a new Chat Room')}" |
|||
onclick="movim_toggle_display('#bookmarkmucadd')"> |
|||
<i class="fa fa-plus"></i> {$c->__('button.add')} |
|||
</a> |
|||
<br /> |
|||
</li> |
|||
</ul> |
|||
|
|||
<h2><i class="fa fa-bookmark-o"></i> {$c->__('title.groups')}</h2> |
|||
{loop="$subscriptions"} |
|||
{if="$c->checkNewServer($value)"} |
|||
<a href="{$c->route('server', $value->server)}"> |
|||
<h3><i class="fa fa-sitemap"></i> {$value->server}</h3> |
|||
</a> |
|||
{/if} |
|||
<li> |
|||
<a href="{$c->route('node', array($value->server, $value->node))}"> |
|||
{if="$value->name"} |
|||
{$value->name} |
|||
{else} |
|||
{$value->node} |
|||
<div class="clear"></div> |
|||
|
|||
<ul> |
|||
<li><h2><i class="fa fa-bookmark-o"></i> {$c->__('title.groups')}</h2></li> |
|||
{loop="$subscriptions"} |
|||
{if="$c->checkNewServer($value)"} |
|||
<li> |
|||
<a href="{$c->route('server', $value->server)}"> |
|||
<h3><i class="fa fa-sitemap"></i> {$value->server}</h3> |
|||
</a> |
|||
</li> |
|||
{/if} |
|||
</a> |
|||
</li> |
|||
{/loop} |
|||
<li> |
|||
<a href="{$c->route('node', array($value->server, $value->node))}"> |
|||
{if="$value->name"} |
|||
{$value->name} |
|||
{else} |
|||
{$value->node} |
|||
{/if} |
|||
</a> |
|||
</li> |
|||
{/loop} |
|||
</ul> |
|||
@ -1,7 +1,7 @@ |
|||
#bookmarks li { |
|||
line-height: 2em; |
|||
padding: 0 1em; |
|||
white-space: nowrap; |
|||
width: auto; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
line-height: 2em; |
|||
} |
|||
@ -1,23 +1,40 @@ |
|||
{if="isset($p)"} |
|||
<div |
|||
id="logouttab" |
|||
class="{$txts[$p->value]}" |
|||
onclick="movim_toggle_class('#logoutlist', 'show');"> |
|||
{$txt[$p->value]} |
|||
id="tab" |
|||
class="{$txts[$p->value]}"> |
|||
<img class="avatar" src="{$contact->getPhoto('s')}"/> |
|||
<span class="bubble"></span> |
|||
<span class="arrow"><i class="fa fa-caret-down"></i></span> |
|||
<span class="name">{$contact->getTrueName()}</span> |
|||
<span class="status">{$p->status}</span> |
|||
</div> |
|||
{else} |
|||
<div |
|||
id="logouttab" |
|||
class="{$txts[1]}" |
|||
onclick="movim_toggle_class('#logoutlist', 'show');"> |
|||
{$txt[1]} |
|||
id="tab" |
|||
class="{$txts[1]}"> |
|||
<img class="avatar" src="{$contact->getPhoto('s')}"/> |
|||
<span class="arrow"><i class="fa fa-caret-down"></i></span> |
|||
<span class="name">{$contact->getTrueName()}</span> |
|||
</div> |
|||
{/if} |
|||
|
|||
<div id="logoutlist"> |
|||
<a onclick="{$callchat} movim_toggle_class('#logoutlist', 'show');" class="online">{$txt[1]}</a> |
|||
<a onclick="{$callaway} movim_toggle_class('#logoutlist', 'show');" class="away">{$txt[2]}</a> |
|||
<a onclick="{$calldnd} movim_toggle_class('#logoutlist', 'show');" class="dnd">{$txt[3]}</a> |
|||
<a onclick="{$callxa} movim_toggle_class('#logoutlist', 'show');" class="xa">{$txt[4]}</a> |
|||
<a onclick="{$calllogout} movim_toggle_class('#logoutlist', 'show');" class="disconnect">{$c->__('disconnect')}</a> |
|||
<div id="list"> |
|||
<div class="tab"> |
|||
<img class="avatar" src="{$contact->getPhoto('s')}"/> |
|||
<span class="arrow"><i class="fa fa-caret-up"></i></span> |
|||
<span class="name">{$contact->getTrueName()}</span> |
|||
</div> |
|||
|
|||
<textarea |
|||
class="status" |
|||
spellcheck="false" |
|||
placeholder="{$c->__('status.here')}" |
|||
onload="movim_textarea_autoheight(this);" |
|||
onkeyup="movim_textarea_autoheight(this);">{$p->status}</textarea> |
|||
|
|||
<a onclick="{$callchat} movim_toggle_class('#logoutlist', 'show');" class="online"><span class="bubble"></span>{$txt[1]}</a> |
|||
<a onclick="{$callaway} movim_toggle_class('#logoutlist', 'show');" class="away"><span class="bubble"></span>{$txt[2]}</a> |
|||
<a onclick="{$calldnd} movim_toggle_class('#logoutlist', 'show');" class="dnd"><span class="bubble"></span>{$txt[3]}</a> |
|||
<a onclick="{$callxa} movim_toggle_class('#logoutlist', 'show');" class="xa"><span class="bubble"></span>{$txt[4]}</a> |
|||
<a onclick="{$calllogout} movim_toggle_class('#logoutlist', 'show');" class="disconnect"><i class="fa fa-sign-out"></i>{$c->__('disconnect')}</a> |
|||
</div> |
|||
@ -1 +1,2 @@ |
|||
disconnect = 'Disconnect' |
|||
status.here = 'Your status here !' |
|||
@ -1,72 +1,125 @@ |
|||
#logout { |
|||
font-size: 1em; |
|||
color: #ccc; |
|||
#presence_widget { |
|||
color: white; |
|||
font-weight: bold; |
|||
width: 15rem; |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
z-index: 5; |
|||
} |
|||
|
|||
#logout .online { background-image: url(img/online.svg); } |
|||
#logout .away { background-image: url(img/away.svg); } |
|||
#logout .dnd { background-image: url(img/dnd.svg); } |
|||
#logout .xa { background-image: url(img/xa.svg); } |
|||
#logout .disconnect { background-image: url(img/exit.svg); text-decoration: none;} |
|||
|
|||
#logouttab { |
|||
top: 0px; |
|||
cursor: pointer; |
|||
z-index: 5; |
|||
line-height: 3em; |
|||
background-repeat: no-repeat; |
|||
background-position: 1em center; |
|||
color: white; |
|||
width: 7em; |
|||
#presence_widget img.avatar { |
|||
width: 2em; |
|||
float: left; |
|||
border-radius: 3em; |
|||
position: relative; |
|||
margin-right: 1em; |
|||
} |
|||
|
|||
transition: background 1s; |
|||
border-left: 1px solid rgba(0, 0, 0, 0.1); |
|||
#presence_widget span.bubble { |
|||
left: 1.7em; |
|||
top: 1.7em; |
|||
width: 0.9em; |
|||
height: 0.9em; |
|||
box-shadow: 0 0 2px rgba(0, 0, 0, 1); |
|||
border-radius: 2em; |
|||
display: inline-block; |
|||
position: absolute; |
|||
} |
|||
|
|||
#logouttab, #logoutlist { |
|||
position: fixed; |
|||
right: 15rem; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
#presence_widget .online span.bubble { background-color: #6FCC43; } |
|||
#presence_widget .away span.bubble { background-color: #FFE433; } |
|||
#presence_widget .dnd span.bubble { background-color: #D92727; } |
|||
#presence_widget .xa span.bubble { background-color: #442178; } |
|||
|
|||
#presence_widget span.name, |
|||
#presence_widget span.status { |
|||
line-height: 1em; |
|||
display: inline-block; |
|||
white-space: nowrap; |
|||
padding-left: 3em; |
|||
padding-right: 1em; |
|||
background-size: 16px 16px; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
#presence_widget span.status { |
|||
font-weight: normal; |
|||
font-size: 0.8em; |
|||
color: #DDD; |
|||
} |
|||
|
|||
#presence_widget span.arrow { |
|||
float: right; |
|||
padding: 0.5em; |
|||
} |
|||
|
|||
#presence_widget textarea.status { |
|||
margin: 0.5em 0; |
|||
padding: 0.5em; |
|||
box-sizing: border-box; |
|||
border: 0; |
|||
width: 100%; |
|||
border-bottom: 1px solid #D4D4D4; |
|||
height: 2.7em; |
|||
resize: none; |
|||
} |
|||
|
|||
#presence_widget #tab { |
|||
padding: 0.3em; |
|||
margin: 0.2em; |
|||
} |
|||
|
|||
#presence_widget #tab:hover { |
|||
cursor: pointer; |
|||
border-radius: 0.05em; |
|||
background-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
|
|||
#logouttab:hover { |
|||
background-color: rgba(0, 0, 0, 0.3); |
|||
#presence_widget #list { |
|||
background-color: white; |
|||
padding: 0.3em; |
|||
margin: 0.2em; |
|||
color: #333; |
|||
position: relative; |
|||
display: none; |
|||
top: -2.8em; |
|||
border-radius: 0.05em; |
|||
box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.4); |
|||
} |
|||
|
|||
#logoutlist { |
|||
top: -100%; |
|||
transition: top 0.5s ease; |
|||
z-index: 1; |
|||
background-color: rgba(20, 20, 20, 0.9); |
|||
width: 10em; |
|||
#presence_widget #list .tab:hover { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
#logoutlist.show { |
|||
top: 3em; |
|||
#presence_widget #list span.name { |
|||
line-height: 2em; |
|||
padding-bottom: 0.5em; |
|||
} |
|||
|
|||
#logoutlist a { |
|||
#presence_widget #list a { |
|||
position: relative; |
|||
clear: both; |
|||
display: block; |
|||
line-height: 3em; |
|||
background-repeat: no-repeat; |
|||
background-position: 1em center; |
|||
background-size: 16px 16px; |
|||
padding-left: 3em; |
|||
padding-right: 1em; |
|||
margin-left: -3em; |
|||
margin-right: -1em; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
color: white; |
|||
font-weight: normal; |
|||
line-height: 2.8em; |
|||
padding: 0 1em; |
|||
margin: -0.3em; |
|||
} |
|||
|
|||
#presence_widget #list a:hover { |
|||
cursor: pointer; |
|||
background-color: rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
#presence_widget #list a i { |
|||
float: right; |
|||
line-height: 2.8em; |
|||
margin: 0; |
|||
} |
|||
|
|||
#logoutlist a:hover { |
|||
cursor: pointer; |
|||
background-color: rgba(0, 0, 0, 0.1); |
|||
#presence_widget #list span.bubble { |
|||
box-shadow: none; |
|||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); |
|||
display: inline-block; |
|||
float: right; |
|||
margin-top: 1.1em; |
|||
position: initial; |
|||
} |
|||
@ -1,14 +1,32 @@ |
|||
function postStart() { |
|||
if(localStorage.postStart == 1) { |
|||
Presence_ajaxSetStatus('boot'); |
|||
Presence_ajaxConfigGet(); |
|||
Presence_ajaxServerCapsGet(); |
|||
Presence_ajaxBookmarksGet(); |
|||
Presence_ajaxSetPresence(); |
|||
localStorage.postStart = 0; |
|||
} |
|||
} |
|||
|
|||
function setPresenceActions() { |
|||
document.querySelector('#presence_widget textarea.status').onkeypress = function(event) { |
|||
if(event.keyCode == 13) { |
|||
Presence_ajaxSetStatus(this.value); |
|||
this.blur(); |
|||
} |
|||
}; |
|||
|
|||
document.querySelector('#presence_widget #tab').onclick = function(event) { |
|||
movim_toggle_display('#presence_widget #list'); |
|||
}; |
|||
|
|||
document.querySelector('#presence_widget #list .tab').onclick = function(event) { |
|||
movim_toggle_display('#presence_widget #list'); |
|||
}; |
|||
} |
|||
|
|||
movim_add_onload(function() |
|||
{ |
|||
setPresenceActions(); |
|||
postStart(); |
|||
}); |
|||
@ -1,3 +1,3 @@ |
|||
<div id="logout"> |
|||
<div id="presence_widget"> |
|||
{$c->preparePresence()} |
|||
</div> |
|||
@ -0,0 +1,19 @@ |
|||
{if="isset($contact)"} |
|||
<div class="card"> |
|||
<a href="{$c->route('friend', $contact->jid)}"> |
|||
<img src="{$contact->getPhoto('l')}"/> |
|||
<h1 style="text-decoration: none;">{$contact->getTrueName()}</h1> |
|||
</a> |
|||
<a href="{$c->route('profile')}"> |
|||
<i class="fa fa-pencil"></i> |
|||
</a> |
|||
</div> |
|||
{else} |
|||
<div class="not_yet"> |
|||
{$c->__('profile.not_yet')}<br /><br /> |
|||
<a |
|||
class="button color green icon add" |
|||
style="color: white;" |
|||
href="{$c->route('profile')}">{$c->__('profile.create')}</a> |
|||
</div> |
|||
{/if} |
|||
@ -1,3 +1,2 @@ |
|||
status.updated = 'Status updated' |
|||
status.saved = 'Saved' |
|||
status.here = 'Your status here !' |
|||
profile.not_yet = 'No profile yet?' |
|||
profile.create = 'Create my profile' |
|||
@ -1,47 +1,41 @@ |
|||
#profile_widget { |
|||
background-color: rgba(20, 20, 20, 0.5); |
|||
line-height: 1.5em; |
|||
position: relative; |
|||
width: 100%; |
|||
border-bottom: 1px solid #D4D4D4; |
|||
} |
|||
|
|||
#profile_widget h1 { |
|||
color: white; |
|||
line-height: 1.5em; |
|||
#profile_widget .card { |
|||
padding: 1em 0.5em; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
#profile_widget a.avatar { |
|||
width: 100%; |
|||
padding-bottom: 100%; |
|||
display: block; |
|||
background-size: 100%; |
|||
#profile_widget .card img { |
|||
width: 3em; |
|||
border-radius: 2em; |
|||
float: left; |
|||
margin-right: 0.75em; |
|||
} |
|||
|
|||
#profile_widget .textbubble { |
|||
margin-top: 1em; |
|||
background-color: rgba(20, 20, 20, 0.7); |
|||
padding: 1em; |
|||
} |
|||
|
|||
#profile_widget .textbubble textarea { |
|||
background-color: transparent; |
|||
border: 1px solid transparent; |
|||
border-bottom: 1px solid #333; |
|||
font-size: 0.9em; |
|||
width: 100%; |
|||
resize: none; |
|||
color: white; |
|||
text-align: center; |
|||
padding: 0px; |
|||
#profile_widget .card h1 { |
|||
line-height: 1.5em; |
|||
color: #242424; |
|||
margin-top: -0.2em; |
|||
font-size: 1.2em; |
|||
} |
|||
|
|||
#profile_widget .textbubble textarea:hover { |
|||
border-color: white; |
|||
#profile_widget .card i { |
|||
float: right; |
|||
font-size: 1.2em; |
|||
margin-top: -1.2em; |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
#profile_widget textarea#status { |
|||
overflow: hidden; |
|||
#profile_widget .card i:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
#profile_widget .not_yet { |
|||
padding: 1em; |
|||
text-align: center; |
|||
} |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue