Commit 32abc202 authored by Madhur's avatar Madhur

work in progress

parent 2007ff30
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
.emoji-wysiwyg-editor:empty:before {
content: attr(placeholder);
color: #9aa2ab;
}
.icon-emoji {
display: inline-block;
width: 23px;
height: 23px;
vertical-align: text-top;
background: url('/img/IconsetW.png') -10px -4px/42px 1171px no-repeat;
opacity: 0.8;
}
.im_emoji_btn:hover .icon-emoji {
opacity: 1;
}
/* Emoji area */
.emoji-wysiwyg-editor:empty:before {
content: attr(placeholder);
color: #9aa2ab;
}
.emoji-wysiwyg-editor:active:before,
.emoji-wysiwyg-editor:focus:before {
content: none;
}
.emoji-wysiwyg-editor {
float:left;
margin-left:2px;
padding:6px;
box-sizing: content-box;
-moz-box-sizing: content-box;
font-size: 12px;
margin-bottom: 10px;
min-height: 36px;
height: 30px;
width: 500px;
max-height: 284px;
overflow: auto;
line-height: 17px;
border: 1px solid #d2dbe3;
border-radius: 2px;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-webkit-user-select: text;
word-wrap: break-word;
}
.emoji-wysiwyg-editor img {
width: 20px;
height: 20px;
vertical-align: middle;
margin: -3px 0 0 0;
}
.emoji-menu {
position: absolute;
z-index: 999;
width: 225px;
margin-left: -107px;
margin-top: -252px;
overflow: hidden;
border: 1px #dfdfdf solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow: hidden;
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
}
.emoji-items-wrap1 {
background: #FFF;
padding: 5px 2px 5px 5px;
}
.emoji-items-wrap1 .emoji-menu-tabs {
width: 100%;
margin-bottom: 8px;
margin-top: 3px;
}
.emoji-items-wrap1 .emoji-menu-tabs td {
text-align: center;
color: white;
line-height: 0;
}
.emoji-menu-tabs .emoji-menu-tab {
display: inline-block;
width: 24px;
height: 29px;
background: url('/img/IconsetSmiles.png') no-repeat;
background-size: 42px 350px;
}
.is_1x .emoji-menu-tabs .emoji-menu-tab {
background-image: url('/img/IconsetSmiles_1x.png');
}
.emoji-menu-tabs .icon-recent {background-position: -9px -306px; }
.emoji-menu-tabs .icon-recent-selected {background-position: -9px -277px; }
.emoji-menu-tabs .icon-smile {background-position: -9px -34px; }
.emoji-menu-tabs .icon-smile-selected {background-position: -9px -5px; }
.emoji-menu-tabs .icon-flower {background-position: -9px -145px; }
.emoji-menu-tabs .icon-flower-selected {background-position: -9px -118px; }
.emoji-menu-tabs .icon-bell {background-position: -9px -89px; }
.emoji-menu-tabs .icon-bell-selected {background-position: -9px -61px; }
.emoji-menu-tabs .icon-car {background-position: -9px -196px; }
.emoji-menu-tabs .icon-car-selected {background-position: -9px -170px; }
.emoji-menu-tabs .icon-grid {background-position: -9px -248px; }
.emoji-menu-tabs .icon-grid-selected {background-position: -9px -222px; }
.emoji-menu-tabs .icon-smile,
.emoji-menu-tabs .icon-flower,
.emoji-menu-tabs .icon-bell,
.emoji-menu-tabs .icon-car,
.emoji-menu-tabs .icon-grid {
opacity: 0.7;
}
.emoji-menu-tabs .icon-smile:hover,
.emoji-menu-tabs .icon-flower:hover,
.emoji-menu-tabs .icon-bell:hover,
.emoji-menu-tabs .icon-car:hover,
.emoji-menu-tabs .icon-grid:hover {
opacity: 1;
}
.emoji-menu .emoji-items-wrap {
position: relative;
height: 174px;
}
.emoji-menu .emoji-items {
padding-right: 8px;
outline: 0 !important;
}
.emoji-menu img {
width: 20px;
height: 20px;
vertical-align: middle;
border: 0 none;
}
.emoji-menu .emoji-items a {
margin: -1px 0 0 -1px;
padding: 5px;
display: block;
float: left;
border-radius: 2px;
}
.emoji-menu .emoji-items a:hover {
background-color: #edf2f5;
}
.emoji-menu:after {
content: ' ';
display: block;
clear: left;
}
.emoji-menu a .label {
display: none;
}
.myform
{
position: fixed;
top: 50%;
width:100%;
left: 20%;
}
\ No newline at end of file
...@@ -8,21 +8,35 @@ ...@@ -8,21 +8,35 @@
</head> </head>
<body ng-controller="emojiController"> <body ng-controller="emojiController">
<!--<h1>Angular Emoji Popup</h1>-->
<p/>
<p/>
<p/>
<p/>
<div myForm> <div my-form class="myform">
<textarea id="messageInput" ng-enter="replyToUser()" ng-model="messagetext" placeholder="Write a message..." class="ng-untouched ng-valid ng-dirty ng-valid-parse" style="display: none;"></textarea> <textarea id="messageInput" ng-enter="replyToUser()" ng-model="messagetext" placeholder="Write a message..." class="ng-untouched ng-valid ng-dirty ng-valid-parse" style="display: none;"></textarea>
<div style="margin-right:10px;margin-top:5px;" class="im_emoji_btn" id="emojibtn" style="cursor:pointer">
<i class="icon icon-emoji" style="cursor:pointer; margin-left:20px;margin-top:10px;"></i>
</div>
</div> </div>
<script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/emoji.js"></script> <script type="text/javascript" src="js/emoji.js"></script>
<script type="text/javascript" src="js/jquery.emojiarea.js"></script> <script type="text/javascript" src="js/jquery.emojiarea.js"></script>
<script type="text/javascript" src="js/app.js"></script> <script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/emojiController.js"></script> <script type="text/javascript" src="js/emojiController.js"></script>
<script type="text/javascript" src="js/emojiDirectives.js"></script> <script type="text/javascript" src="js/emojiDirectives.js"></script>
<script type="text/javascript" src="js/nanoscroller.js"></script>
</body> </body>
</html> </html>
...@@ -2,3 +2,27 @@ ...@@ -2,3 +2,27 @@
var emojiApp = angular.module("emojiApp", []); var emojiApp = angular.module("emojiApp", []);
emojiApp.config(['ConfigProvider',function(ConfigProvider) {
var icons = {}, reverseIcons = {}, i, j, hex, name, dataItem, row, column, totalColumns;
for (j = 0; j < Config.EmojiCategories.length; j++) {
totalColumns = Config.EmojiCategorySpritesheetDimens[j][1];
for (i = 0; i < Config.EmojiCategories[j].length; i++) {
dataItem = Config.Emoji[Config.EmojiCategories[j][i]];
name = dataItem[1][0];
row = Math.floor(i / totalColumns);
column = (i % totalColumns);
icons[':' + name + ':'] = [ j, row, column,
':' + name + ':' ];
reverseIcons[name] = dataItem[0];
}
}
$.emojiarea.spritesheetPath = '/img/emojisprite_!.png';
$.emojiarea.spritesheetDimens = Config.EmojiCategorySpritesheetDimens;
$.emojiarea.iconSize = 20;
$.emojiarea.icons = icons;
$.emojiarea.reverseIcons = reverseIcons;
}]);
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment