From b765dc005ba22cb41e01439f1b07d567d2de68da Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 11 Nov 2014 04:39:16 +0000 Subject: [PATCH] major CSS overhaul to try to make things look a bit cleaner --- syweb/webclient/app.css | 154 +++++++++++++++++++----- syweb/webclient/img/attach.png | Bin 0 -> 473 bytes syweb/webclient/img/settings.png | Bin 0 -> 864 bytes syweb/webclient/img/video.png | Bin 0 -> 604 bytes syweb/webclient/img/voice.png | Bin 0 -> 659 bytes syweb/webclient/index.html | 2 + syweb/webclient/js/angular-peity.js | 69 +++++++++++ syweb/webclient/js/jquery.peity.min.js | 13 ++ syweb/webclient/mobile.css | 18 +++ syweb/webclient/room/room-controller.js | 19 ++- syweb/webclient/room/room.html | 131 +++++++++----------- 11 files changed, 302 insertions(+), 104 deletions(-) create mode 100644 syweb/webclient/img/attach.png create mode 100644 syweb/webclient/img/settings.png create mode 100644 syweb/webclient/img/video.png create mode 100644 syweb/webclient/img/voice.png create mode 100644 syweb/webclient/js/angular-peity.js create mode 100644 syweb/webclient/js/jquery.peity.min.js diff --git a/syweb/webclient/app.css b/syweb/webclient/app.css index be2a73872d..e2f99f3975 100755 --- a/syweb/webclient/app.css +++ b/syweb/webclient/app.css @@ -318,7 +318,7 @@ textarea, input { position: absolute; bottom: 0px; width: 100%; - height: 100px; + height: 70px; background-color: #f8f8f8; border-top: #aaa 1px solid; } @@ -326,7 +326,9 @@ textarea, input { #controls { max-width: 1280px; padding: 12px; + padding-right: 42px; margin: auto; + position: relative; } #buttonsCell { @@ -343,7 +345,17 @@ textarea, input { #mainInput { width: 100%; - resize: none; + padding: 5px; +} + +#attachButton { + position: absolute; + margin-top: 3px; + right: 0px; + background: url('img/attach.png'); + width: 25px; + height: 25px; + border: 0px; } .blink { @@ -415,7 +427,8 @@ textarea, input { .roomHeaderInfo { text-align: right; float: right; - margin-top: 15px; + margin-top: 0px; + margin-right: 30px; } /*** Room Info Dialog ***/ @@ -449,15 +462,32 @@ textarea, input { resize: vertical; } +/*** Control Buttons ***/ +#controlButtons { + float: right; + margin-right: -4px; + padding-bottom: 6px; +} + +.controlButton { + border: 0px; + width: 30px; + height: 30px; + padding-left: 3px; + padding-right: 3px; +} + /*** Participant list ***/ #usersTableWrapper { float: right; - width: 120px; + clear: right; + width: 100px; height: 100%; overflow-y: auto; } +/* #usersTable { width: 100%; border-collapse: collapse; @@ -473,36 +503,66 @@ textarea, input { position: relative; background-color: #000; } +*/ -.userAvatar .userAvatarImage { - position: absolute; - top: 0px; - object-fit: cover; - width: 100%; +.userAvatar { } +.userAvatarFrame { + border-radius: 46px; + width: 80px; + margin: auto; + position: relative; + border: 3px solid #aaa; + background-color: #aaa; +} + +.userAvatarImage { + border-radius: 40px; + text-align: center; + object-fit: cover; + display: block; +} + +/* .userAvatar .userAvatarGradient { position: absolute; bottom: 20px; width: 100%; } +*/ -.userAvatar .userName { - position: absolute; - color: #fff; - margin: 2px; - bottom: 0px; +.userName { + margin-top: 3px; + margin-bottom: 6px; + text-align: center; font-size: 12px; word-break: break-all; } -.userAvatar .userPowerLevel { +.userPowerLevel { position: absolute; - bottom: 0px; - height: 2px; + bottom: -1px; + height: 1px; background-color: #f00; } +.userPowerLevelBar { + display: inline; + position: absolute; + width: 2px; + height: 10px; +/* border: 1px solid #000; +*/ background-color: #aaa; +} + +.userPowerLevelMeter { + position: relative; + bottom: 0px; + background-color: #f00; +} + +/* .userPresence { text-align: center; font-size: 12px; @@ -510,12 +570,15 @@ textarea, input { background-color: #aaa; border-bottom: 1px #ddd solid; } +*/ .online { + border-color: #38AF00; background-color: #38AF00; } .unavailable { + border-color: #FFCC00; background-color: #FFCC00; } @@ -538,18 +601,21 @@ textarea, input { #messageTable td { padding: 0px; +/* border: 1px solid #888; */ } .leftBlock { - width: 14em; + width: 6em; word-wrap: break-word; vertical-align: top; background-color: #fff; - color: #888; + color: #aaa; font-weight: medium; font-size: 12px; text-align: right; +/* border-top: 1px #ddd solid; +*/ } .rightBlock { @@ -560,13 +626,24 @@ textarea, input { } .sender, .timestamp { - padding-right: 1em; - padding-left: 1em; - padding-top: 3px; +/* padding-top: 3px; +*/} + +.timestamp { + font-size: 10px; + color: #ccc; + height: 13px; + margin-top: 4px; +*/ transition-property: opacity; + transition-duration: 0.3s; } .sender { - margin-bottom: -3px; + font-size: 12px; +/* + margin-top: 5px; + margin-bottom: -9px; +*/ } .avatar { @@ -577,7 +654,11 @@ textarea, input { } .avatarImage { + position: relative; + top: 5px; object-fit: cover; + border-radius: 32px; + margin-top: 4px; } .emote { @@ -591,6 +672,7 @@ textarea, input { } .image { + border: 1px solid #888; display: block; max-width:320px; max-height:320px; @@ -603,19 +685,23 @@ textarea, input { } .bubble { +/* background-color: #eee; border: 1px solid #d8d8d8; - display: inline-block; margin-bottom: -1px; - max-width: 90%; - font-size: 14px; - word-wrap: break-word; padding-top: 7px; padding-bottom: 5px; + -webkit-text-size-adjust:100% + vertical-align: middle; +*/ + display: inline-block; + max-width: 90%; padding-left: 1em; padding-right: 1em; - vertical-align: middle; - -webkit-text-size-adjust:100% + padding-top: 2px; + padding-bottom: 2px; + font-size: 14px; + word-wrap: break-word; } .bubble img { @@ -623,9 +709,11 @@ textarea, input { max-height: auto; } +/* .differentUser td { padding-bottom: 5px ! important; } +*/ .mine { text-align: right; @@ -635,13 +723,15 @@ textarea, input { .text.membership .bubble, .mine .text.emote .bubble, .mine .text.membership .bubble - { +{ background-color: transparent ! important; border: 0px ! important; } .mine .text .bubble { +/* background-color: #f8f8ff ! important; +*/ text-align: left ! important; } @@ -701,6 +791,8 @@ textarea, input { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + padding-left: 0.5em; + padding-right: 0.5em; } .recentsRoom { @@ -751,7 +843,7 @@ textarea, input { padding-right: 10px; margin-right: 10px; height: 100%; - border-right: 1px solid #ddd; +/* border-right: 1px solid #ddd; */ overflow-y: auto; } diff --git a/syweb/webclient/img/attach.png b/syweb/webclient/img/attach.png new file mode 100644 index 0000000000000000000000000000000000000000..d95eabaf00b81c675e9d8a7d1f963b62474db1b1 GIT binary patch literal 473 zcmV;~0Ve*5P)P000>X1^@s6#OZ}&0000PbVXQnQ*UN; zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzdr3q=RCwBAT(DpP1Cc-uh(&>z6NtY9 z@oOM{M2toj0`dkxoD9T)KrD?#{wWZz2jaOvd;ymsO#lD?$0iOka1jun2jUzY7Qocy zK-De9rH+Y_kr7?Y42aJFaV!IAAPTC_48syMzC92h24V>Y@_+g!b7j8)r18qPN%n~6W zcA}9bAajM7ph=FIMwWogH3LPw3ZY0QRvt%UPyzXbhk>?$A7sg28e8&<1y@Om&FduO z6J+oR7tJ10j;wcnb0Meg}uV(xURgeY5A4xR)3she& zdIo30<6R}FtKJbX{2f%CJg!vALO^pa6oV=tV`vqPoCnSV@oqw11PCwy$U{(wnBPLL P00000NkvXXu0mjfrxLb_ literal 0 HcmV?d00001 diff --git a/syweb/webclient/img/settings.png b/syweb/webclient/img/settings.png new file mode 100644 index 0000000000000000000000000000000000000000..ac99fe402be68535a6b0ea8f0d6a6131d3bbff8b GIT binary patch literal 864 zcmV-m1E2hfP){&EeYwdB|>SS^w6uv7HUh8KqXM=!IKo?MRV|^1eAaf z5DG$}|1E#E<2XCJruM^Qb!X?ldH?_UI~%N4tCml@PuLW zRm0;u6Jaiwvr?&))oeDc*=**Fff)ab#iD)1_+&D1a|MnQ!b~WBO4u+h7o@O!K5wPd zY3F`C9=A!cIH>kezQJ5}sL>3bxhaJsC=n`fFOm3L?9ph{NdcZ43~eqW1Mx~gus+jgiTk%$vAR?Spa5 z*F}fz3X1!>5rnVX?ambq4B=BNSq&-1kz+%I`awQH+|!N1q1p(rwXj!(8o7a}oo+lH zTm8OP*I9sjr`9l0j(}`f5TKHR2uej4bFmXBKIP-eLY@(7ea!E}v8wO+4hwOTEw zdua?@r%;U1W49_63gkU0D^Zn+Zl@NYWXJN`34bn3N<>bv5Ht}v1yG19$cDqA$qhK( z%I{;S-XnZ=n*ryYPRCIKB7`1w0M+PTKKA*ZIC;v)+b@Jyrc;O&$)CiS-LU0>?c7$B8xB$5;%Gr$xqMF~@A0 zrg6t3kq8?Oht^?a)q+%wxcjtFC@@);9l@Bq)oT5`Gl*9dg{4v{77B$}v)SbB^IZeX zl?c?B89te0GC6??C>u1DyoHp>WM&CZP)uRI8ZKoErT z7B6TFf)zPB9~ekS{)0bXb5si8XSW*8_otP5ClOG0ww7A9?u(B z+TEjxe&K`X`{Vigp7%cQbD?ZDtAv^-mWTyngqY#>XX2B1Anu7rNwCp?{xM>c*dt

IY@mFBO$8?!^Ax?ZuJ1NFd1hVX59_ag1ZB@de+qerbdo)2zj3B72-N50t{2B)Q`48q2T@ifmVqd z@2xh8v!Gd~X||a{XhWYsXYBQDyiH65&5A~&J@t7s!CtO0lEID|oZw{|oQ+}wG=|rr zHXgK=3{T4QRXiSdw~^l#!x*7vVQde<*oN`=5N`Fjp@t+F*N5O+H#mn5T8_aLM4)gG zgu`LgY&P5a(1t$2VWIU5<2%X7a=EN5%TmQ+v8@kn=))MH?r=IGX}?Lb7xHmBomQn% z$^DL1wpuNfOeR%6pI5b7O=61DXc8;Ny*ri6K;T?1=Ncvw33uP(8f`*T#a>N)9%I$7 zk`v0CP@qbs(#=ElPE4T))D;L;y(K9GkfDJ07{qEjJ#-zkr7KTw0zqYPBr(Qnaqt6u zEl@^RAHPc + + diff --git a/syweb/webclient/js/angular-peity.js b/syweb/webclient/js/angular-peity.js new file mode 100644 index 0000000000..2acb647d91 --- /dev/null +++ b/syweb/webclient/js/angular-peity.js @@ -0,0 +1,69 @@ +var angularPeity = angular.module( 'angular-peity', [] ); + +$.fn.peity.defaults.pie = { + fill: ["#ff0000", "#aaaaaa"], + radius: 4, +} + +var buildChartDirective = function ( chartType ) { + return { + restrict: 'E', + scope: { + data: "=", + options: "=" + }, + link: function ( scope, element, attrs ) { + + var options = {}; + if ( scope.options ) { + options = scope.options; + } + + // N.B. live-binding to data by Matthew + scope.$watch('data', function () { + var span = document.createElement( 'span' ); + span.textContent = scope.data.join(); + + if ( !attrs.class ) { + span.className = ""; + } else { + span.className = attrs.class; + } + + if (element[0].nodeType === 8) { + element.replaceWith( span ); + } + else if (element[0].firstChild) { + element.empty(); + element[0].appendChild( span ); + } + else { + element[0].appendChild( span ); + } + + jQuery( span ).peity( chartType, options ); + }); + } + }; +}; + + +angularPeity.directive( 'pieChart', function () { + + return buildChartDirective( "pie" ); + +} ); + + +angularPeity.directive( 'barChart', function () { + + return buildChartDirective( "bar" ); + +} ); + + +angularPeity.directive( 'lineChart', function () { + + return buildChartDirective( "line" ); + +} ); diff --git a/syweb/webclient/js/jquery.peity.min.js b/syweb/webclient/js/jquery.peity.min.js new file mode 100644 index 0000000000..054b83c5d8 --- /dev/null +++ b/syweb/webclient/js/jquery.peity.min.js @@ -0,0 +1,13 @@ +// Peity jQuery plugin version 3.0.2 +// (c) 2014 Ben Pickles +// +// http://benpickles.github.io/peity +// +// Released under MIT license. +(function(h,w,i,v){var p=function(a,b){var d=w.createElementNS("http://www.w3.org/2000/svg",a);h(d).attr(b);return d},y="createElementNS"in w&&p("svg",{}).createSVGRect,e=h.fn.peity=function(a,b){y&&this.each(function(){var d=h(this),c=d.data("peity");c?(a&&(c.type=a),h.extend(c.opts,b)):(c=new x(d,a,h.extend({},e.defaults[a],b)),d.change(function(){c.draw()}).data("peity",c));c.draw()});return this},x=function(a,b,d){this.$el=a;this.type=b;this.opts=d},r=x.prototype;r.draw=function(){e.graphers[this.type].call(this, +this.opts)};r.fill=function(){var a=this.opts.fill;return h.isFunction(a)?a:function(b,d){return a[d%a.length]}};r.prepare=function(a,b){this.svg||this.$el.hide().after(this.svg=p("svg",{"class":"peity"}));return h(this.svg).empty().data("peity",this).attr({height:b,width:a})};r.values=function(){return h.map(this.$el.text().split(this.opts.delimiter),function(a){return parseFloat(a)})};e.defaults={};e.graphers={};e.register=function(a,b,d){this.defaults[a]=b;this.graphers[a]=d};e.register("pie", +{fill:["#ff9900","#fff4dd","#ffc66e"],radius:8},function(a){if(!a.delimiter){var b=this.$el.text().match(/[^0-9\.]/);a.delimiter=b?b[0]:","}b=this.values();if("/"==a.delimiter)var d=b[0],b=[d,i.max(0,b[1]-d)];for(var c=0,d=b.length,n=0;cj?m=q(i.min(d,0)):o=q(i.max(c,0)):u=1;u=o-m;0==u&&(u=1,0

+ + Invite a user: + + + +
+
+ +
- -
@@ -57,6 +66,26 @@
[matrix] + +
+ + + +
+
@@ -91,32 +120,30 @@
- +
- - - - -
- {{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }} - -
-
-
- {{ member.id | mUserDisplayName: room_id }} -
-
- {{ member.id.substr(0, member.id.indexOf(':')) }}
- {{ member.id.substr(member.id.indexOf(':')) }} -
-
- 		- {{ member.last_active_ago + (now - member.last_updated) | duration }}
ago -
+
+
+ {{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }} + +
+
+ + + {{ member.id | mUserDisplayName: room_id }} + + + {{ member.id.substr(0, member.id.indexOf(':')) }}
+ {{ member.id.substr(member.id.indexOf(':')) }} + + ({{ member.last_active_ago + (now - member.last_updated) | duration }}) +
+
-
{{ msg.__room_member.cnt.displayname || msg.user_id | mUserDisplayName: room_id }}
+
{{ (msg.origin_server_ts) | date:'MMM d HH:mm' }}
+
{{ msg.__room_member.cnt.displayname || msg.user_id | mUserDisplayName: room_id }}
 +
{{ msg.content.displayname || members[msg.state_key].displayname || msg.state_key }} joined @@ -222,49 +250,10 @@
- - - -
- {{ state.user_id }} - -