text msg supported

plutoless · Feb 1, 2013 · 6033fff · 6033fff
1 parent 5ea71eb
commit 6033fff
Show file tree

Hide file tree

Showing 8 changed files with 190 additions and 59 deletions.
diff --git a/.zfproject.xml b/.zfproject.xml
@@ -38,6 +38,7 @@
         <dbTableDirectory>
           <dbTableFile dbTableName="Post"/>
           <dbTableFile dbTableName="Users"/>
+          <dbTableFile dbTableName="Message"/>
         </dbTableDirectory>
       </modelsDirectory>
       <modulesDirectory enabled="false"/>

diff --git a/application/layouts/scripts/layout.phtml b/application/layouts/scripts/layout.phtml
@@ -16,20 +16,28 @@ echo $this->doctype();
         <?php $this->headScript()->prependFile($this->baseUrl().'/public/js/jquery-1.8.0.min.js');?>
         <?php echo $this->headLink();?>
         <?php echo $this->headScript();?>
-        <link rel="shortcut icon" href="<?php echo $this->baseURL();?>/images/favicon.ico">
+        <link rel="shortcut icon" href="<?php echo $this->baseURL();?>/public/images/favicon.ico">
     </head>
     <body>
 
         <div id="header">
-          <div class="logo">
-            <div id="msg-box-wrapper">
-              <div class="msg-box rounded color5">
-                <img src="<?php echo ($this->baseUrl().'/public/images/msg3/25.png'); ?>"/>
-              </div>
-              <div class="tip"></div>
+            <div class="logo">
+                <div id="msg-box-wrapper">
+                <div class="msg-box rounded color6">
+                    <img src="<?php echo ($this->baseUrl().'/public/images/msg3/25.png'); ?>"/>
+                </div>
+                <div class="tip"></div>
+                </div>
+                <img src="<?php echo ($this->baseUrl().'/public/images/logo.png'); ?>"></img>
+            </div>
+            <div id="say-something">
+                <div class="input-wrapper">
+                    <input type="text" name="message" class="input-box shadow" value="Say something?"/>
+                </div>
+                <div class="submit-button shadow">
+                    <span>Yeah</span>
+                </div>
             </div>
-            <img src="<?php echo ($this->baseUrl().'/public/images/logo.png'); ?>"></img>
-          </div>
         </div>
         <div id="navigation">
             <ul>
@@ -79,6 +87,7 @@ echo $this->doctype();
                 </li>
             </ul>
         </div>
+
         <div id="content">
             <?php echo $this->layout()->content; ?>
         </div>

diff --git a/application/models/DbTable/Message.php b/application/models/DbTable/Message.php
@@ -0,0 +1,10 @@
+<?php
+
+class Application_Model_DbTable_Message extends Zend_Db_Table_Abstract
+{
+
+    protected $_name = 'message';
+
+
+}
+
diff --git a/application/views/scripts/index/index.phtml b/application/views/scripts/index/index.phtml
@@ -2,16 +2,14 @@
 session_start();
 
 $this->headTitle($this->title);
+$this->headLink()->prependStylesheet($this->baseUrl().'/public/css/index.css');
+$this->headScript()->appendFile($this->baseUrl().'/public/js/index.js');
 ?>
-<head>
-    <?php $this->headLink()->prependStylesheet($this->baseUrl().'/public/css/index.css');?>
-    <?php $this->headScript()->appendFile($this->baseUrl().'/public/js/index.js');?>
-</head>
+
 <div id="index-wrap">
 
     <div class="medium-block index-object" name="post">
 
-
         <div class="bg-layer clickable-block posts">
 
             <div class="content-layer color1">

diff --git a/public/css/page.css b/public/css/page.css
@@ -11,7 +11,7 @@ html{
 }
 
 body{
-  background: #eaeaea;
+  /*background: #eaeaea;*/
   margin: 0;
   color: #121314;
   font-family: "Times New Roman", Verdana, "SimSun", sans-serif;
@@ -24,7 +24,9 @@ ul{
 
 #header{
   height: 80px;
-  text-align: center;
+  width: 800px;
+  margin-left: auto;
+  margin-right: auto;
   position: relative;
 }
 
@@ -33,12 +35,13 @@ ul{
 }
 
 #header .msg-box{
-    overflow: hidden;
     position:absolute;
-    height: 32px;
-    width: 32px;
-    left: -42px;
-    top: 24px;
+    min-height: 32px;
+    min-width: 32px;
+    width: auto;
+    max-width: 500px;
+    right: 176px;
+    top: 28px;
     z-index: 0;
     text-align: center;
 }
@@ -50,6 +53,13 @@ ul{
     margin-right: 2px;
 }
 
+#header .msg-box span{
+    text-align: left;
+    display: inline-block;
+    padding: 2px 10px;
+    color: white;
+}
+
 #header .logo{
     position: relative;
     width: 165px;
@@ -64,9 +74,9 @@ ul{
     height: 0; 
     border-top: 0px solid transparent;
     border-bottom: 10px solid transparent;
-    border-left:10px solid #D0104C;
+    border-left:10px solid #E34E50;
     left: -12px;
-    top: 36px;
+    top: 40px;
     z-index: 1;
 }
 
@@ -75,11 +85,11 @@ ul{
 }
 
 #navigation{
-    padding: 20px;
 }
 
 #navigation ul{
     text-align: center;
+    margin-right: 50px;
 }
 
 #navigation ul li{
@@ -118,7 +128,7 @@ ul{
 #content{
   width: 960px;
   overflow: auto;
-  background: #eaeaea;
+  /*background: #eaeaea;*/
   margin: auto auto auto auto;
 }
 
@@ -127,12 +137,17 @@ ul{
   padding-top: 50px;
   text-align: center;
   color: #505050;
+  font-size: 12px;
 }
 
 .inline{
   display: inline;
 }
 
+.inline-block{
+  display: inline-block;
+}
+
 .rounded{
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
@@ -159,3 +174,50 @@ ul{
     background-color: #D0104C;
 }
 
+.color6{
+    background-color: #E34E50
+}
+
+.shadow{
+    -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05);
+    -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05);
+    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05);
+}
+
+#say-something{
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 4px;
+  width: 180px;
+  text-align: center;
+  overflow: auto;
+}
+
+#say-something .input-wrapper{ 
+  position: relative;
+  float: left;
+  margin-right: 5px;
+}
+
+#say-something .input-box{
+  width: 100px;
+  background: #C0E0EC;
+  color: #7993B4;
+  font-family: "Times New Roman", Verdana, "SimSun", sans-serif;
+  border: 0;
+  font-size: 12px;
+  padding: 7px;
+  margin: 0;
+}
+
+#say-something .submit-button{
+  position: relative;
+  float: left;
+  background: #E34E50;
+  border: 0;
+  color: white;
+  clear: right;
+  padding: 7px;
+  cursor: pointer;
+}
diff --git a/public/images/logo.png b/public/images/logo.png
diff --git a/public/js/common.js b/public/js/common.js
@@ -12,6 +12,8 @@ var common = {
       common.dom.msgBoxWrapper = $('#msg-box-wrapper');
       var navLinks = $('#navigation .nav-link');
       var msgBox = $('#msg-box-wrapper');
+      var msgInput = $('#say-something');
+      common.prepareMessageInput(msgInput);
       common.appear(navLinks, msgBox);
       common.dynamicMessage();
     },
@@ -22,53 +24,87 @@ var common = {
         var name = $(this).attr("name");
         common.dom.navFocused = true;
         if(name=="index")
-          common.showMessage(122);
+          common.showMessage(122,"");
         else if(name=="post")
-          common.showMessage(154);
+          common.showMessage(154,"");
         else if(name=="project")
-          common.showMessage(148);
+          common.showMessage(148,"");
         else if(name=="fun")
-          common.showMessage(110);
+          common.showMessage(110,"");
         else if(name=="contact")
-          common.showMessage(138);
+          common.showMessage(138,"");
       });
       navLinks.mouseleave(function(){
         common.dom.navFocused = false;
       });
 
     },
 
-    showMessage : function(n)
+    prepareMessageInput : function(msgInput){
+        var msgInputField = msgInput.find('.input-wrapper input');
+        var msgInputSubmitButton = msgInput.find('.submit-button');
+        msgInputField.focus(function(){
+            if(msgInputField.val()=="Say something?")
+                msgInputField.val("");
+        });
+        msgInputField.blur(function(){
+            if(msgInputField.val()=="")
+                msgInputField.val("Say something?");
+        });
+        msgInputSubmitButton.click(function(){
+
+                common.showMessage(1,"Fill in something then:(");
+        });
+    },
+
+    showMessage : function(n, str)
     {
-      var msgBoxWrapper = common.dom.msgBoxWrapper;
-      if(msgBoxWrapper.hasClass('inDisplay'))
-      {
-        var original = msgBoxWrapper.find('.msg-box').html();
-        var noStr = n+'.png';
-        var originalFile = original.match(/[0-9]{1,3}.png/);
-        if(noStr!=originalFile)
+        var msgBoxWrapper = common.dom.msgBoxWrapper;
+
+        if(msgBoxWrapper.hasClass('inDisplay'))
         {
-          /* already in display & not same, dim the msg box & show again with new pic */
-          msgBoxWrapper.stop().fadeOut(
-          { 
-            duration: 200,
-            complete: function(){
-              var htmlStr = '<img src="public/images/msg3/'+ n + '.png"/>';
-              msgBoxWrapper.find('.msg-box').html(htmlStr);
-              msgBoxWrapper.fadeIn();
+            var original = msgBoxWrapper.find('.msg-box').html();
+            var newStr="",oriStr="";
+            if(str=="")
+            {
+                newStr = newStr+n+'.png';
+                oriStr = oriStr+original.match(/[0-9]{1,3}.png/);
+            }
+            else
+            {
+                oriStr = oriStr+original;
+                newStr = newStr+'<span>'+str+'</span>';
             }
-          });
+            if(oriStr!=newStr)
+            {
+            /* already in display & not same, dim the msg box & show again with new pic */
+            msgBoxWrapper.stop().fadeOut(
+            { 
+                duration: 200,
+                complete: function(){
+                    if(str=="")
+                        var htmlStr = '<img src="public/images/msg3/'+ n + '.png"/>';
+                    else
+                        var htmlStr = newStr;
+                    msgBoxWrapper.find('.msg-box').html(htmlStr);
+                    msgBoxWrapper.fadeIn();
+                }
+            });
+            }
+        }else{
+            var htmlStr="";
+            if(str=="")
+                htmlStr = '<img src="public/images/msg3/'+ n + '.png"/>';
+            else
+                htmlStr = htmlStr+'<span>'+str+'</span>';
+            msgBoxWrapper.find('.msg-box').html(htmlStr);
+            msgBoxWrapper.addClass('inDisplay');
+            msgBoxWrapper.fadeIn(
+            {
+                duration: 200
+            }
+            );
         }
-      }else{
-        var htmlStr = '<img src="public/images/msg3/'+ n + '.png"/>';
-        msgBoxWrapper.find('.msg-box').html(htmlStr);
-        msgBoxWrapper.addClass('inDisplay');
-        msgBoxWrapper.fadeIn(
-          {
-            duration: 200
-          }
-        );
-      }
     },
 
     hideMessage : function()
@@ -95,7 +131,7 @@ var common = {
           /* if idle */
           if(common.dom.idleCounter>0)
           {
-            common.showMessage(rpic);
+            common.showMessage(rpic, "");
             common.dom.busyCounter = 0;
             common.dom.idleCounter = 0;
           }
@@ -116,4 +152,19 @@ var common = {
         common.dynamicMessage();
       }, rtime);
     }
+}
+
+function sendAjaxCall(url,type,data,callback){
+    $.ajax(
+    {
+        url: url,
+        cache: false,
+        dataType: 'json',
+        type: type,
+        data: data,
+        success: callback,
+        error: function(e, xhr)
+        {
+        }
+    });
 }