v1.0.8-dev: Design improvements

florinp · May 18, 2016 · 0eb5895 · 0eb5895
1 parent 7eff161
commit 0eb5895
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 52 deletions.
diff --git a/composer.json b/composer.json
@@ -3,7 +3,7 @@
 	"type": "phpbb-extension",
 	"description": "Messenger extension for phpBB 3.1",
 	"homepage": "https://github.com/florinp/phpbb-messenger",
-	"version": "1.0.7-dev",
+	"version": "1.0.8-dev",
 	"license": "GPL-2.0",
 	"authors": [{
 		"name": "Florin Pavel",
@@ -13,7 +13,8 @@
 	}],
 	"require": {
 		"php": ">=5.4.0",
-		"composer/installers": "~1.0"
+		"composer/installers": "~1.0",
+		"ext-sqlite": "*"
 	},
 	"require-dev": {
 		"phing/phing": "2.4.*"

diff --git a/event/main_listener.php b/event/main_listener.php
@@ -18,7 +18,7 @@ static public function getSubscribedEvents()
     {
         return array(
             'core.user_setup' => 'load_language_on_setup',
-            'core.page_footer' => 'friends_list',
+            'core.page_footer' => 'get_language',
             'core.page_header' => 'check_login',
             'core.memberlist_view_profile' => 'check_friends'
         );
@@ -63,35 +63,10 @@ public function __construct(
         $this->symfony_request = $symfony_request;
     }
 
-    public function friends_list()
+    public function get_language()
     {
-        $context = new RequestContext();
-        $context->fromRequest($this->symfony_request);
-        $baseUrl = generate_board_url(true) . $context->getBaseUrl();
-
-        $scriptName = $this->symfony_request->getScriptName();
-        $scriptName = substr($scriptName, -1, 1) == '/' ? '' : utf8_basename($scriptName);
-
-        if ($scriptName != '') {
-            $baseUrl = str_replace('/' . $scriptName, '', $baseUrl);
-        }
-
-        $friends = $this->model->getFriends();
-        $friends_online = array_filter($friends, function ($friend) {
-            return $friend['user_status'] != 0;
-        });
-        $this->template->assign_var('S_COUNT_FRIENDS', count($friends_online));
-        foreach ($friends as $friend) {
-            $this->template->assign_block_vars('chat_friends', array(
-                'U_USERID' => $friend['user_id'],
-                'U_USERNAME' => $friend['username'],
-                'U_USERCOLOR' => $friend['user_colour'],
-                'U_STATUS' => $friend['user_status'],
-                'U_USERINBOX' => $friend['inbox'],
-            ));
-        }
         $this->template->assign_vars(array(
-            'BASE_URL' => $baseUrl
+            'CHAT_LANGUAGE' => $this->user->lang_name
         ));
     }
 

diff --git a/styles/all/template/event/overall_footer_after.html b/styles/all/template/event/overall_footer_after.html
@@ -1,4 +1,4 @@
 <!-- IF S_ENABLE_MESSENGER -->
-<section id="chat"></section>
+<section id="chat" data-chat-language="{CHAT_LANGUAGE}"></section>
 <!-- INCLUDEJS @florinp_messenger/js/chat.js -->
 <!-- ENDIF -->
diff --git a/styles/all/theme/css/chat.css b/styles/all/theme/css/chat.css
@@ -4,7 +4,7 @@
   src: url("../fonts/chat-icons.eot?#iefix") format("embedded-opentype"), url("../fonts/chat-icons.woff") format("woff"), url("../fonts/chat-icons.ttf") format("truetype"), url("../fonts/chat-icons.svg#chat-icons") format("svg");
   font-weight: normal;
   font-style: normal; }
-.chat-icon, .chat_box .chat_head .options, .msg_box .msg_head .close, .msg_box .msg_footer .msg-send {
+.chat-icon, .close__button, .chat_box .chat_head .options, .msg_box .msg_footer .msg-send {
   font-family: "chat-icons" !important;
   content: attr(data-icon);
   font-style: normal !important;
@@ -20,14 +20,117 @@
   width: 21.33333px;
   border-radius: 50%; }
 
+.show-me {
+  transform: translate3d(-300px, 0, 0); }
+
+.chat__container {
+  height: 100%;
+  transition: transform 0.3s ease-in-out;
+  overflow: hidden; }
+
+.chat {
+  position: fixed;
+  background: #f2f2f2;
+  top: 0;
+  right: -300px;
+  height: 100%;
+  width: 300px;
+  box-shadow: 1px 3px 3px 1px #323232;
+  z-index: 1050; }
+
+.chat__user {
+  display: block;
+  width: 100%;
+  padding: 10px 20px;
+  color: white;
+  transition: 0.3s;
+  cursor: pointer; }
+  .chat__user:nth-child(even) {
+    background: #e6e6e6; }
+  .chat__user:hover {
+    background: #cccccc; }
+  .chat__user > * {
+    display: inline-block;
+    vertical-align: middle; }
+  .chat__user .chat__name {
+    font-size: 16px;
+    font-weight: 200; }
+
+.chat__avatar {
+  width: 40px;
+  background: #fff;
+  border-radius: 100px;
+  margin-right: 20px; }
+
+.chat__header {
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  letter-spacing: 1px;
+  font-weight: 100;
+  color: #ffffff;
+  padding: 10px 20px;
+  background-color: #FF5722;
+  border-bottom: 3px solid #ee3900; }
+
+.chat__button {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  -webkit-appearance: none;
+  font-size: 1rem;
+  line-height: 1.2;
+  border-radius: 3px;
+  border: 3px solid #FF5722;
+  background: #FF5722;
+  color: white;
+  cursor: pointer;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-decoration: none !important;
+  text-align: center;
+  font-weight: normal;
+  padding: 10px 16px;
+  padding-left: 30px;
+  outline: 0;
+  transition: transform 0.3s ease-in-out;
+  z-index: 1051; }
+  .chat__button:before {
+    position: absolute;
+    top: 0;
+    left: 10px;
+    bottom: 0;
+    margin: auto;
+    width: 10px;
+    height: 10px;
+    background: #53DD6C;
+    content: "";
+    border-radius: 100px; }
+  .chat__button:hover {
+    background: #ff4409; }
+  .chat__button:active {
+    bottom: 17px; }
+
+.close__button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.3rem;
+  width: 32px;
+  height: 32px;
+  text-align: center;
+  font-size: 1rem; }
+  .close__button:hover {
+    cursor: pointer; }
+  .close__button:before {
+    content: "\e006"; }
+
 .chat_box {
   position: fixed;
   right: 20px;
   bottom: 0;
   width: 250px;
   background-color: #fff;
   box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.5);
-  z-index: 1000; }
+  z-index: 1050; }
   .chat_box .chat_head {
     height: 32px;
     padding: 5px 0px;
@@ -122,10 +225,10 @@
 .msg_box {
   position: fixed;
   bottom: -5px;
-  width: 250px;
+  width: 300px;
   background-color: #fff;
   box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.5);
-  z-index: 1010;
+  z-index: 1060;
   transition: 0.3s ease; }
   .msg_box .msg_head {
     height: 2rem;
@@ -149,21 +252,9 @@
     .msg_box .msg_head .user-name {
       font-size: 0.9rem;
       font-weight: 200; }
-    .msg_box .msg_head .close {
-      position: absolute;
-      top: 0.5rem;
-      right: 0.3rem;
-      width: 32px;
-      height: 32px;
-      text-align: center;
-      font-size: 1rem; }
-      .msg_box .msg_head .close:hover {
-        cursor: pointer; }
-      .msg_box .msg_head .close:before {
-        content: "\e006"; }
   .msg_box .msg_wrap {
     overflow: scroll;
-    height: 400px;
+    height: 300px;
     background: #f2f2f2;
     -ms-overflow-style: none;
     overflow: -moz-scrollbars-none;
@@ -243,7 +334,7 @@
       font-size: 20px;
       font-weight: bold; }
   .msg_box .msg_footer {
-    width: 250px;
+    width: 100%;
     position: absolute;
     bottom: 0;
     left: 0;
@@ -254,7 +345,7 @@
       height: 54px;
       background: #ffffff;
       border: none;
-      width: calc(100% - 54px);
+      width: 100%;
       position: absolute;
       left: 0;
       top: 0;
@@ -264,6 +355,7 @@
       padding-top: 19px;
       font-weight: 300;
       font-size: 12px;
+      box-sizing: border-box;
       -ms-overflow-style: none;
       overflow: -moz-scrollbars-none; }
       .msg_box .msg_footer .msg-input:focus {

diff --git a/styles/all/theme/js/chat.js b/styles/all/theme/js/chat.js