caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Realtime support

Browse Source
This commit is contained in:
benweet 2014-04-07 00:39:24 +01:00
parent f0e60a2637
commit bfc93ad920
24 changed files with 526 additions and 426 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bower.json
View File

@ -3,7 +3,7 @@
"version": "3.1.9",
"description": "StackEdit is a free, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.",
"dependencies": {
"bootstrap": "v3.0.0",
"bootstrap": "3.0.3",
"jquery": "2.0.3",
"underscore": "1.5.1",
"requirejs": "~2.1.8",

4
public/res/classes/Provider.js
View File

@ -90,8 +90,8 @@ define([
result.push([0, removeDiff[1] + addDiff[1]]);
}
else {
removeDiff[1] = '///' + removeDiff[1] + '///';
addDiff[1] += '///';
removeDiff[1] = '//' + removeDiff[1] + '//';
addDiff[1] += '//';
result.push(removeDiff);
result.push(addDiff);
}

6
public/res/core.js
View File

@ -576,7 +576,7 @@ define([
isMenuPanelShown = false;
menuPanelBackdropElt.removeBackdrop();
$menuPanelElt.removeClass('move-to-front');
$editorElt.focus();
editor.focus();
}
}).on('hidden.bs.collapse', function(e) {
if(e.target === $menuPanelElt[0]) {
@ -608,7 +608,7 @@ define([
isDocumentPanelShown = false;
documentPanelBackdropElt.removeBackdrop();
$documentPanelElt.removeClass('move-to-front');
$editorElt.focus();
editor.focus();
}
}).on('hidden.bs.collapse', function(e) {
if(e.target === $documentPanelElt[0]) {
@ -667,7 +667,7 @@ define([
}).on('hidden.bs.modal', function() {
// Focus on the editor when modal is gone
isModalShown = false;
$editorElt.focus();
editor.focus();
// Revert to current theme when settings modal is closed
applyTheme(window.theme);
}).keyup(function(e) {

54
public/res/editor.js
View File

@ -144,14 +144,14 @@ define([
if(end === undefined) {
end = this.selectionEnd;
}
var maxOffset = inputElt.textContent.length - 1;
if(start > maxOffset) {
start = maxOffset;
var textContent = inputElt.textContent;
if(start === textContent.length && textContent[textContent.length -1 ] == '\n') {
start--;
range = undefined;
skipSelectionUpdate = false;
}
if(end > maxOffset) {
end = maxOffset;
if(end === textContent.length && textContent[textContent.length - 1] == '\n') {
end--;
range = undefined;
skipSelectionUpdate = false;
}
@ -179,9 +179,12 @@ define([
this.saveSelectionState = (function() {
function save() {
if(fileChanged === false) {
var selectionStart = self.selectionStart;
var selectionEnd = self.selectionEnd;
var range;
var selection = rangy.getSelection();
if(selection.rangeCount > 0) {
var range = selection.getRangeAt(0);
range = selection.getRangeAt(0);
var element = range.startContainer;
if ((contentElt.compareDocumentPosition(element) & 0x10)) {
@ -197,13 +200,16 @@ define([
} while (element && element != inputElt);
if(selection.isBackwards()) {
self.setSelectionStartEnd(offset + (range + '').length, offset, range, true);
selectionStart = offset + (range + '').length;
selectionEnd = offset;
}
else {
self.setSelectionStartEnd(offset, offset + (range + '').length, range, true);
selectionStart = offset;
selectionEnd = offset + (range + '').length;
}
}
}
self.setSelectionStartEnd(selectionStart, selectionEnd, range, true);
}
undoMgr.saveSelectionState();
}
@ -259,6 +265,25 @@ define([
y: y
};
};
this.getClosestWordOffset = function(offset) {
var offsetStart = 0;
var offsetEnd = 0;
var nextOffset = 0;
textContent.split(/\s/).some(function(word) {
if(word) {
offsetStart = nextOffset;
offsetEnd = nextOffset + word.length;
if(offsetEnd > offset) {
return true;
}
}
nextOffset += word.length + 1;
});
return {
start: offsetStart,
end: offsetEnd
};
};
}
var selectionMgr = new SelectionMgr();
editor.selectionMgr = selectionMgr;
@ -319,6 +344,13 @@ define([
}
editor.getValue = getValue;
function focus() {
$contentElt.focus();
selectionMgr.setSelectionStartEnd();
inputElt.scrollTop = scrollTop;
}
editor.focus = focus;
function UndoMgr() {
var undoStack = [];
var redoStack = [];
@ -575,11 +607,7 @@ define([
}
});
inputElt.focus = function() {
$contentElt.focus();
selectionMgr.setSelectionStartEnd();
inputElt.scrollTop = scrollTop;
};
inputElt.focus = focus;
Object.defineProperty(inputElt, 'value', {
get: function () {

64
public/res/extensions/comments.js
View File

@ -33,14 +33,26 @@ define([
};
var editor;
var selectionMgr;
comments.onEditorCreated = function(editorParam) {
editor = editorParam;
selectionMgr = editor.selectionMgr;
};
var offsetMap = {};
function setCommentEltCoordinates(commentElt, y) {
var lineIndex = Math.round(y / 10);
var yOffset = -9;
var lineIndex = Math.round(y / 5);
// Try to find the nearest existing lineIndex
if(offsetMap.hasOwnProperty(lineIndex)) {
// Keep current lineIndex
}
else if(offsetMap.hasOwnProperty(lineIndex - 1)) {
lineIndex--;
}
else if(offsetMap.hasOwnProperty(lineIndex + 1)) {
lineIndex++;
}
var yOffset = -8;
if(commentElt.className.indexOf(' icon-split') !== -1) {
yOffset = -12;
}
@ -55,7 +67,7 @@ define([
var inputElt;
var marginElt;
var newCommentElt = crel('a', {
class: 'discussion icon-quote-left new'
class: 'discussion icon-comment new'
});
var cursorY;
comments.onCursorCoordinates = function(x, y) {
@ -88,8 +100,7 @@ define([
}
popoverElt.style.left = left + 'px';
popoverElt.querySelector('.arrow').style.left = (marginElt.offsetWidth - parseInt(commentElt.style.right) - commentElt.offsetWidth / 2 - left) + 'px';
var $contentInputElt = currentContext.$contentInputElt;
var popoverTopOffset = document.body.offsetHeight - $contentInputElt.offset().top - $contentInputElt.outerHeight();
var popoverTopOffset = document.body.offsetHeight - currentContext.hr.getBoundingClientRect().top;
if(popoverTopOffset < 0) {
popoverElt.style.top = (parseInt(popoverElt.style.top) + popoverTopOffset) + 'px';
}
@ -143,13 +154,16 @@ define([
var className = 'discussion';
var isReplied = !discussion.commentList || _.last(discussion.commentList).author != author;
isReplied && (someReplies = true);
className += ' icon-quote-left' + (isReplied ? ' replied' : ' added');
if(discussion.type == 'conflict') {
className += ' icon-split';
}
else {
className += ' icon-comment';
}
className += isReplied ? ' replied' : ' added';
commentElt.className = className;
commentElt.discussionIndex = discussion.discussionIndex;
var coordinates = editor.selectionMgr.getCoordinates(discussion.selectionEnd);
var coordinates = selectionMgr.getCoordinates(discussion.selectionEnd);
var lineIndex = setCommentEltCoordinates(commentElt, coordinates.y);
offsetMap[lineIndex] = (offsetMap[lineIndex] || 0) + 1;
@ -190,7 +204,7 @@ define([
}
catch(e) {}
var discussion = context.getDiscussion();
context.selectionRange = editor.selectionMgr.createRange(discussion.selectionStart, discussion.selectionEnd);
context.selectionRange = selectionMgr.createRange(discussion.selectionStart, discussion.selectionEnd);
// Highlight selected text
context.rangyRange = rangy.createRange();
@ -295,37 +309,25 @@ define([
}).on('show.bs.popover', '#wmd-input > .editor-margin', function(evt) {
closeCurrentPopover();
var context = new Context(evt.target, currentFileDesc);
if(evt.target !== newCommentElt) {
$newCommentElt.addClass('hide');
}
currentContext = context;
inputElt.scrollTop += parseInt(evt.target.style.top) - inputElt.scrollTop - inputElt.offsetHeight * 3 / 4;
// If it's an existing discussion
var discussion = context.getDiscussion();
if(discussion) {
context.selectionRange = editor.selectionMgr.setSelectionStartEnd(discussion.selectionStart, discussion.selectionEnd, undefined, true);
context.selectionRange = selectionMgr.setSelectionStartEnd(discussion.selectionStart, discussion.selectionEnd, undefined, true);
return;
}
// Get selected text
var selectionStart = editor.selectionMgr.selectionStart;
var selectionEnd = editor.selectionMgr.selectionEnd;
var selectionStart = Math.min(selectionMgr.selectionStart, selectionMgr.selectionEnd);
var selectionEnd = Math.max(selectionMgr.selectionStart, selectionMgr.selectionEnd);
if(selectionStart === selectionEnd) {
var textContent = editor.getValue();
var after = textContent.substring(selectionStart);
var match = /\S+/.exec(after);
if(match) {
selectionStart += match.index;
selectionEnd = selectionStart + match[0].length;
}
if(!match || match.index === 0) {
while(selectionStart && /\S/.test(textContent[selectionStart - 1])) {
selectionStart--;
}
}
var offset = selectionMgr.getClosestWordOffset(selectionStart);
selectionStart = offset.start;
selectionEnd = offset.end;
}
context.selectionRange = editor.selectionMgr.setSelectionStartEnd(selectionStart, selectionEnd, undefined, true);
context.selectionRange = selectionMgr.setSelectionStartEnd(selectionStart, selectionEnd, undefined, true);
currentFileDesc.newDiscussion = {
selectionStart: selectionStart,
selectionEnd: selectionEnd,
@ -336,6 +338,7 @@ define([
var popoverElt = context.getPopoverElt();
context.$authorInputElt = $(popoverElt.querySelector('.input-comment-author')).val(storage['author.name']);
context.$contentInputElt = $(popoverElt.querySelector('.input-comment-content'));
context.hr = popoverElt.querySelector('hr');
movePopover(context.commentElt);
// Scroll to the bottom of the discussion
@ -443,7 +446,6 @@ define([
return;
}
currentContext.$commentElt.removeClass('active');
$newCommentElt.removeClass('hide');
// Save content and author for later
previousContent = currentContext.$contentInputElt.val();
@ -458,9 +460,9 @@ define([
var $newCommentElt = $(newCommentElt);
$openDiscussionElt = $('.button-open-discussion').click(function(evt) {
var $commentElt = $newCommentElt;
if(sortedCommentEltList.length) {
if(!currentContext) {
$commentElt = $(_.first(sortedCommentEltList));
if(currentContext) {
if(!currentContext.discussionIndex) {
$commentElt = $(_.first(sortedCommentEltList) || newCommentElt);
}
else {
var curentIndex = -1;

BIN
public/res/font/fontello.eot
View File

Binary file not shown.

9
public/res/font/fontello.svg
View File

@ -82,7 +82,6 @@
<glyph glyph-name="retweet" unicode="&#xe943;" d="m714 11q0-8-5-13t-13-5h-535q-5 0-8 1t-5 4t-3 4t-2 7t0 6v335h-107q-15 0-25 11t-11 25q0 13 8 23l179 214q11 12 27 12t28-12l178-214q9-10 9-23q0-15-11-25t-25-11h-107v-214h321q9 0 14-6l89-108q4-6 4-11z m357 232q0-14-8-23l-179-214q-11-13-27-13t-27 13l-179 214q-8 9-8 23q0 14 10 25t26 11h107v214h-322q-9 0-14 7l-89 107q-4 5-4 11q0 7 5 12t13 6h536q4 0 7-1t5-4t3-5t2-6t1-7v-334h107q14 0 25-11t10-25z" horiz-adv-x="1071.4" />
<glyph glyph-name="keyboard" unicode="&#xe944;" d="m214 198v-53q0-9-9-9h-53q-9 0-9 9v53q0 9 9 9h53q9 0 9-9z m72 143v-53q0-9-9-9h-125q-9 0-9 9v53q0 9 9 9h125q9 0 9-9z m-72 143v-54q0-9-9-9h-53q-9 0-9 9v54q0 9 9 9h53q9 0 9-9z m572-286v-53q0-9-9-9h-482q-9 0-9 9v53q0 9 9 9h482q9 0 9-9z m-357 143v-53q0-9-9-9h-54q-9 0-9 9v53q0 9 9 9h54q9 0 9-9z m-72 143v-54q0-9-9-9h-53q-9 0-9 9v54q0 9 9 9h53q9 0 9-9z m214-143v-53q0-9-8-9h-54q-9 0-9 9v53q0 9 9 9h54q8 0 8-9z m-71 143v-54q0-9-9-9h-53q-9 0-9 9v54q0 9 9 9h53q9 0 9-9z m214-143v-53q0-9-9-9h-53q-9 0-9 9v53q0 9 9 9h53q9 0 9-9z m215-143v-53q0-9-9-9h-54q-9 0-9 9v53q0 9 9 9h54q9 0 9-9z m-286 286v-54q0-9-9-9h-54q-9 0-9 9v54q0 9 9 9h54q9 0 9-9z m143 0v-54q0-9-9-9h-54q-9 0-9 9v54q0 9 9 9h54q9 0 9-9z m143 0v-196q0-9-9-9h-125q-9 0-9 9v53q0 9 9 9h62v134q0 9 9 9h54q9 0 9-9z m71-420v500h-929v-500h929z m71 500v-500q0-29-21-50t-50-21h-929q-29 0-50 21t-21 50v500q0 30 21 51t50 21h929q30 0 50-21t21-51z" horiz-adv-x="1071.4" />
<glyph glyph-name="gamepad" unicode="&#xe849;" d="m464 243v71q0 8-5 13t-13 5h-107v107q0 8-5 13t-13 5h-71q-8 0-13-5t-5-13v-107h-107q-8 0-13-5t-5-13v-71q0-8 5-13t13-5h107v-107q0-8 5-13t13-5h71q8 0 13 5t5 13v107h107q8 0 13 5t5 13z m322-36q0 30-21 51t-51 21t-50-21t-21-51t21-50t50-21t51 21t21 50z m143 143q0 30-21 51t-51 20t-50-20t-21-51t21-50t50-21t51 21t21 50z m142-71q0-119-83-202t-202-84q-107 0-189 71h-123q-81-71-188-71q-119 0-202 84t-84 202t84 202t202 83h500q118 0 202-83t83-202z" horiz-adv-x="1071.4" />
<glyph glyph-name="chat" unicode="&#xe84b;" d="m786 421q0-77-53-143t-143-104t-197-38q-48 0-98 9q-70-49-155-72q-21-5-48-9h-2q-6 0-12 5t-6 12q-1 1-1 3t1 4t1 3l1 3t2 3t2 3t3 3t2 2q3 3 13 14t15 16t12 17t14 21t11 25q-69 40-108 98t-40 125q0 78 53 144t143 104t197 38t197-38t143-104t53-144z m214-142q0-67-40-126t-108-98q5-14 11-25t14-21t13-16t14-17t13-14q0 0 2-2t3-3t2-3t2-3l1-3t1-3t1-4t-1-3q-2-8-7-13t-13-4q-27 4-48 9q-85 23-155 72q-50-9-98-9q-151 0-263 74q32-3 49-3q90 0 172 25t148 72q69 52 107 119t37 141q0 43-13 85q72-39 114-99t42-128z" horiz-adv-x="1000" />
<glyph glyph-name="comment-empty" unicode="&#xe84c;" d="m500 636q-114 0-213-39t-157-105t-59-142q0-62 40-119t113-98l48-28l-15-54q-13-50-39-95q85 35 154 95l24 21l31-3q39-5 73-5q114 0 213 39t157 105t59 142t-59 142t-157 105t-213 39z m500-286q0-97-67-179t-182-130t-251-48q-39 0-81 4q-110-97-257-135q-27-7-63-12h-3q-8 0-15 6t-9 15v1q-2 2 0 7t1 5t2 5l4 5t4 5t4 5q4 5 17 19t20 22t17 22t18 28t15 33t15 42q-88 50-138 123t-51 157q0 97 67 179t182 130t251 48t251-48t182-130t67-179z" horiz-adv-x="1000" />
<glyph glyph-name="chat-empty" unicode="&#xe84d;" d="m393 636q-85 0-160-29t-118-79t-44-107q0-45 30-88t83-73l54-32l-19-46q19 11 34 21l25 18l30-6q43-8 85-8q85 0 159 29t118 79t44 106t-44 107t-118 79t-159 29z m0 71q106 0 197-38t143-104t53-144t-53-143t-143-104t-197-38q-48 0-98 9q-70-49-155-72q-21-5-48-9h-2q-6 0-12 5t-6 12q-1 1-1 3t1 4t1 3l1 3t2 3t2 3t3 3t2 2q3 3 13 14t15 16t12 17t14 21t11 25q-69 40-108 98t-40 125q0 78 53 144t143 104t197 38z m459-652q5-14 11-25t14-21t13-16t14-17t13-14q0 0 2-2t3-3t2-3t2-3l1-3t1-3t1-4t-1-3q-2-8-7-13t-13-4q-27 4-48 9q-85 23-155 72q-50-9-98-9q-151 0-263 74q32-3 49-3q90 0 172 25t148 72q69 52 107 119t37 141q0 43-13 85q72-39 114-99t42-128q0-67-40-126t-108-98z" horiz-adv-x="1000" />
<glyph glyph-name="bell" unicode="&#xe84e;" d="m473-96q0 8-9 8q-33 0-56 24t-24 57q0 9-9 9t-9-9q0-41 29-70t69-28q9 0 9 9z m-371 160h724q-91 101-137 230t-46 270q0 143-179 143t-178-143q0-141-46-270t-138-230z m827 0q0-29-22-50t-50-21h-250q0-59-42-101t-101-42t-101 42t-42 101h-250q-29 0-50 21t-21 50q106 90 160 222t54 278q0 92 54 146t147 66q-4 10-4 20q0 23 15 38t38 16t38-16t16-38q0-10-5-20q94-11 148-66t53-146q0-146 54-278t161-222z" horiz-adv-x="928.6" />
@ -164,9 +163,9 @@
<glyph glyph-name="left-hand" unicode="&#xe88e;" d="m768 64h18v357h-18q-20 0-38 7t-35 21t-28 25t-27 31q-1 1-2 2t-2 3t-3 2q-40 46-62 81q-8 13-21 38q-1 2-6 13t-11 20t-11 20t-12 17t-10 6q-40 0-64-17t-25-54q0-24 8-47t19-38t18-31t8-27h-321q-28 0-50-22t-22-50q0-29 22-50t50-21h185q-9-9-14-26t-6-31q0-39 30-67q-10-18-10-38t9-41t27-30q-2-13-2-31q0-47 27-70t75-23q47 0 102 18t109 35t93 18z m161 36q0 15-11 25t-25 11t-25-11t-11-25t11-25t25-11t25 11t11 25z m71 321v-357q0-29-21-50t-50-21h-161q-33 0-125-33q-106-39-176-39q-80 0-129 44t-48 121l0 3q-34 42-34 99q0 12 2 24q-19 32-21 67h-94q-59 0-101 42t-42 101q0 57 42 100t101 42h209q-13 34-13 72q0 68 46 105t115 37q21 0 39-9t30-28t23-35t21-40t18-35q20-30 56-72q1-1 8-9t10-12t12-12t13-13t13-10t13-8t12-2h161q29 0 50-21t21-51z" horiz-adv-x="1000" />
<glyph glyph-name="up-hand" unicode="&#xe88f;" d="m714-43q0 15-10 25t-25 11t-26-11t-10-25t10-25t26-11t25 11t10 25z m72 426q0 106-93 106q-15 0-32-3q-9 17-29 27t-41 9t-39-10q-27 30-66 30q-14 0-31-6t-26-14v185q0 29-22 50t-50 22q-28 0-50-22t-21-50v-321q-11 0-27 8t-31 19t-38 18t-47 8q-37 0-55-25t-17-64q0-13 78-50q25-14 36-21q36-22 81-62q45-40 59-57q32-38 32-78v-18h357v18q0 40 18 93t36 108t18 100z m71 3q0-74-38-179q-33-92-33-125v-161q0-29-21-50t-51-21h-357q-29 0-50 21t-21 50v161q0 6-3 12t-8 13t-10 13t-12 13t-12 12t-12 10t-10 8q-41 36-72 56q-11 7-34 18t-40 21t-36 23t-27 30t-10 39q0 70 37 115t106 46q38 0 71-13v209q0 58 43 101t100 42q58 0 101-42t42-101v-94q35-2 66-21q12 2 24 2q57 0 100-34q77 1 122-47t45-127z" horiz-adv-x="857.1" />
<glyph glyph-name="down-hand" unicode="&#xe890;" d="m786 314q0 47-18 102t-36 109t-18 93v18h-357v-18q0-20-7-38t-20-35t-26-28t-30-27q-5-4-8-7q-45-40-81-62q-12-8-38-21q-1-1-12-6t-20-11t-20-11t-17-12t-7-10q0-40 17-65t55-24q24 0 47 8t38 18t31 19t27 8v-321q0-28 21-50t50-22q29 0 50 22t22 50v184q25-19 57-19q39 0 66 30q18-11 39-11t41 10t29 27q14-2 32-2q47 0 70 27t23 75z m-72 429q0 14-10 25t-25 11t-26-11t-10-25t10-25t26-11t25 11t10 25z m143-427q0-79-43-128t-121-48l-3 0q-43-34-100-34q-12 0-24 2q-30-17-66-21v-94q0-59-42-101t-101-42q-58 0-100 42t-43 101v208q-30-12-71-12q-68 0-105 46t-38 115q0 21 10 39t27 30t36 23t40 21t34 18q31 20 72 56q2 1 10 8t12 10t12 12t12 13t10 13t8 13t3 12v160q0 30 21 51t50 21h357q30 0 51-21t21-51v-160q0-33 33-125q38-106 38-177z" horiz-adv-x="857.1" />
<glyph glyph-name="music" unicode="&#xe802;" d="m857 725v-625q0-28-19-50t-48-33t-58-18t-53-6t-54 6t-58 18t-48 33t-19 50t19 50t48 33t58 18t54 6q58 0 107-22v300l-429-132v-396q0-28-19-50t-48-33t-58-18t-53-6t-54 6t-58 18t-48 33t-19 50t19 50t48 34t58 17t54 6q58 0 107-21v539q0 17 10 32t28 19l464 143q7 3 16 3q22 0 38-16t15-38z" horiz-adv-x="857.1" />
<glyph glyph-name="left-circled" unicode="&#xe891;" d="m714 314v72q0 14-10 25t-25 10h-281l106 106q11 11 11 25t-11 25l-51 51q-10 10-25 10t-25-10l-202-202l-51-51q-10-10-10-25t10-25l51-51l202-202q10-10 25-10t25 10l51 51q10 10 10 25t-10 25l-106 106h281q14 0 25 10t10 25z m143 36q0-117-57-215t-156-156t-215-58t-216 58t-155 156t-58 215t58 215t155 156t216 58t215-58t156-156t57-215z" horiz-adv-x="857.1" />
<glyph glyph-name="right-circled" unicode="&#xe892;" d="m717 350q0 15-10 25l-51 51l-202 202q-10 10-25 10t-25-10l-51-51q-10-10-10-25t10-25l106-106h-280q-15 0-26-10t-10-25v-72q0-14 10-25t26-10h280l-106-106q-10-10-10-25t10-25l51-51q10-10 25-10t25 10l202 202l51 51q10 10 10 25z m140 0q0-117-57-215t-156-156t-215-58t-216 58t-155 156t-58 215t58 215t155 156t216 58t215-58t156-156t57-215z" horiz-adv-x="857.1" />
<glyph glyph-name="up-circled" unicode="&#xe893;" d="m717 351q0 15-11 25l-202 202l-50 50q-10 11-25 11t-26-11l-50-50l-202-202q-10-10-10-25t10-26l50-50q11-10 26-10t25 10l105 105v-280q0-14 11-25t25-11h71q15 0 25 11t11 25v280l105-105q11-11 26-11t25 11l50 50q11 11 11 26z m140-1q0-117-57-215t-156-156t-215-58t-216 58t-155 156t-58 215t58 215t155 156t216 58t215-58t156-156t57-215z" horiz-adv-x="857.1" />
<glyph glyph-name="music" unicode="&#xe802;" d="m857 725v-625q0-28-19-50t-48-33t-58-18t-53-6t-54 6t-58 18t-48 33t-19 50t19 50t48 33t58 18t54 6q58 0 107-22v300l-429-132v-396q0-28-19-50t-48-33t-58-18t-53-6t-54 6t-58 18t-48 33t-19 50t19 50t48 34t58 17t54 6q58 0 107-21v539q0 17 10 32t28 19l464 143q7 3 16 3q22 0 38-16t15-38z" horiz-adv-x="857.1" />
<glyph glyph-name="down-circled" unicode="&#xe894;" d="m717 349q0 16-11 26l-50 50q-10 10-25 10t-26-10l-105-105v280q0 15-11 25t-25 11h-71q-15 0-25-11t-11-25v-280l-105 105q-11 11-25 11t-26-11l-50-50q-10-10-10-26t10-25l202-202l50-50q11-10 26-10t25 10l50 50l202 202q11 10 11 25z m140 1q0-117-57-215t-156-156t-215-58t-216 58t-155 156t-58 215t58 215t155 156t216 58t215-58t156-156t57-215z" horiz-adv-x="857.1" />
<glyph glyph-name="cw" unicode="&#xe895;" d="m857 707v-250q0-14-10-25t-26-11h-250q-23 0-32 23q-10 22 7 38l77 77q-82 77-194 77q-58 0-111-23t-91-61t-62-91t-22-111t22-111t62-91t91-61t111-23q66 0 125 29t100 82q4 6 13 7q8 0 14-5l76-77q5-4 6-11t-5-13q-60-74-147-114t-182-41q-87 0-167 34t-136 92t-92 137t-34 166t34 166t92 137t136 92t167 34q82 0 158-31t137-88l72 72q16 18 39 8q22-9 22-33z" horiz-adv-x="857.1" />
<glyph glyph-name="ccw" unicode="&#xe896;" d="m857 350q0-87-34-166t-91-137t-137-92t-166-34q-96 0-183 41t-147 114q-4 6-4 13t5 11l76 77q6 5 14 5q9-1 13-7q41-53 100-82t126-29q58 0 110 23t92 61t61 91t22 111t-22 111t-61 91t-92 61t-110 23q-55 0-105-20t-90-57l77-77q17-16 8-38q-10-23-33-23h-250q-15 0-25 11t-11 25v250q0 24 22 33q22 10 39-8l72-72q60 57 137 88t159 31q87 0 166-34t137-92t91-137t34-166z" horiz-adv-x="857.1" />
@ -321,8 +320,10 @@
<glyph glyph-name="folder" unicode="&#xe8d7;" d="m0-52l0 715l139 0l68 90l217 0l68-90l508 0l0-715l-1000 0z" horiz-adv-x="1000" />
<glyph glyph-name="code" unicode="&#xe844;" d="m1000 849l500-500l-500-500l-154 154l346 346l-346 346z m-692-500l346-346l-154-154l-500 500l500 500l154-154z" horiz-adv-x="1500" />
<glyph glyph-name="comment" unicode="&#xe83b;" d="m1137 749v-532q0-41-29-70t-71-30h-168v-268l-267 268h-502q-41 0-70 30t-30 70v532q0 41 30 71t70 29h937q41 0 71-29t29-71z" horiz-adv-x="1137" />
<glyph glyph-name="comment-alt" unicode="&#xe83c;" d="m1179 385q0-126-79-233t-215-170t-296-62q-122 0-234 39l2-3l-357-107q44 59 71 126t31 106l4 38q-106 120-106 266q0 126 79 233t215 169t295 62t296-62t215-169t79-233z" horiz-adv-x="1179" />
<glyph glyph-name="chat" unicode="&#xe83e;" d="m1179 385q0-126-79-233t-215-170t-296-62q-122 0-234 39l2-3l-357-107q44 59 71 126t31 106l4 38q-106 120-106 266q0 126 79 233t215 169t295 62t296-62t215-169t79-233z m-250 0q0 29-21 50t-51 21q-29 0-50-21t-21-50q0-30 21-51t50-21q30 0 51 21t21 51z m-250 0q0 29-21 50t-51 21q-29 0-50-21t-21-50q0-30 21-51t50-21q30 0 51 21t21 51z m-250 0q0 29-21 50t-51 21q-29 0-50-21t-21-50q0-30 21-51t50-21q30 0 51 21t21 51z" horiz-adv-x="1179" />
<glyph glyph-name="folder-open" unicode="&#xe81e;" d="m1313 632h-1235q9 48 27 67q16 17 31 17h4q4-1 8-1q12 0 26 4q18 6 25 29l24 72q77 29 208 29q89 0 164-29l25-72q24-23 33-26t43-3h485q84 0 110-22q12-11 22-65z m78-164v-10l-68-523q-5-35-33-61t-65-25h-1058q-36 0-65 25t-34 61l-67 523q-1 3-1 10q0 33 23 55t55 21h1235q33 0 56-21t22-55z" horiz-adv-x="1391" />
<glyph glyph-name="left-circled" unicode="&#xe891;" d="m714 314v72q0 14-10 25t-25 10h-281l106 106q11 11 11 25t-11 25l-51 51q-10 10-25 10t-25-10l-202-202l-51-51q-10-10-10-25t10-25l51-51l202-202q10-10 25-10t25 10l51 51q10 10 10 25t-10 25l-106 106h281q14 0 25 10t10 25z m143 36q0-117-57-215t-156-156t-215-58t-216 58t-155 156t-58 215t58 215t155 156t216 58t215-58t156-156t57-215z" horiz-adv-x="857.1" />
<glyph glyph-name="up-circled" unicode="&#xe893;" d="m717 351q0 15-11 25l-202 202l-50 50q-10 11-25 11t-26-11l-50-50l-202-202q-10-10-10-25t10-26l50-50q11-10 26-10t25 10l105 105v-280q0-14 11-25t25-11h71q15 0 25 11t11 25v280l105-105q11-11 26-11t25 11l50 50q11 11 11 26z m140-1q0-117-57-215t-156-156t-215-58t-216 58t-155 156t-58 215t58 215t155 156t216 58t215-58t156-156t57-215z" horiz-adv-x="857.1" />
</font>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 140 KiB

After

Width:  |  Height:  |  Size: 140 KiB

BIN
public/res/font/fontello.ttf
View File

Binary file not shown.

BIN
public/res/font/fontello.woff
View File

Binary file not shown.

18
public/res/libs/fontello/config.json
View File

@ -462,12 +462,6 @@
"code": 59465,
"src": "fontawesome"
},
{
"uid": "dcedf50ab1ede3283d7a6c70e2fe32f3",
"css": "chat",
"code": 59467,
"src": "fontawesome"
},
{
"uid": "9c1376672bb4f1ed616fdd78a23667e9",
"css": "comment-empty",
@ -1896,6 +1890,18 @@
"code": 59451,
"src": "websymbols"
},
{
"uid": "b52aa05c9c55c41f1768cdaa940401a8",
"css": "comment-alt",
"code": 59452,
"src": "websymbols"
},
{
"uid": "21f6a88daf13c62e5a70f5ef6ad9e23f",
"css": "chat",
"code": 59454,
"src": "websymbols"
},
{
"uid": "f242fed2af708c938523b0e14d9c6b07",
"css": "folder-open",

9
public/res/libs/fontello/css/fontello-codes.css vendored
View File

@ -75,7 +75,6 @@
.icon-retweet:before { content: '\e943'; } /* '' */
.icon-keyboard:before { content: '\e944'; } /* '' */
.icon-gamepad:before { content: '\e849'; } /* '' */
.icon-chat:before { content: '\e84b'; } /* '' */
.icon-comment-empty:before { content: '\e84c'; } /* '' */
.icon-chat-empty:before { content: '\e84d'; } /* '' */
.icon-bell:before { content: '\e84e'; } /* '' */
@ -157,9 +156,9 @@
.icon-left-hand:before { content: '\e88e'; } /* '' */
.icon-up-hand:before { content: '\e88f'; } /* '' */
.icon-down-hand:before { content: '\e890'; } /* '' */
.icon-music:before { content: '\e802'; } /* '' */
.icon-left-circled:before { content: '\e891'; } /* '' */
.icon-right-circled:before { content: '\e892'; } /* '' */
.icon-up-circled:before { content: '\e893'; } /* '' */
.icon-music:before { content: '\e802'; } /* '' */
.icon-down-circled:before { content: '\e894'; } /* '' */
.icon-cw:before { content: '\e895'; } /* '' */
.icon-ccw:before { content: '\e896'; } /* '' */
@ -314,5 +313,7 @@
.icon-folder:before { content: '\e8d7'; } /* '' */
.icon-code:before { content: '\e844'; } /* '' */
.icon-comment:before { content: '\e83b'; } /* '' */
.icon-comment-alt:before { content: '\e83c'; } /* '' */
.icon-chat:before { content: '\e83e'; } /* '' */
.icon-folder-open:before { content: '\e81e'; } /* '' */
.icon-left-circled:before { content: '\e891'; } /* '' */
.icon-up-circled:before { content: '\e893'; } /* '' */

21
public/res/libs/fontello/css/fontello-embedded.css vendored
View File

File diff suppressed because one or more lines are too long

9
public/res/libs/fontello/css/fontello-ie7-codes.css vendored
View File

@ -75,7 +75,6 @@
.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe943;&nbsp;'); }
.icon-keyboard { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe944;&nbsp;'); }
.icon-gamepad { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe849;&nbsp;'); }
.icon-chat { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe84b;&nbsp;'); }
.icon-comment-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe84c;&nbsp;'); }
.icon-chat-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe84d;&nbsp;'); }
.icon-bell { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe84e;&nbsp;'); }
@ -157,9 +156,9 @@
.icon-left-hand { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe88e;&nbsp;'); }
.icon-up-hand { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe88f;&nbsp;'); }
.icon-down-hand { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe890;&nbsp;'); }
.icon-music { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); }
.icon-left-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe891;&nbsp;'); }
.icon-right-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe892;&nbsp;'); }
.icon-up-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe893;&nbsp;'); }
.icon-music { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); }
.icon-down-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe894;&nbsp;'); }
.icon-cw { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe895;&nbsp;'); }
.icon-ccw { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe896;&nbsp;'); }
@ -314,5 +313,7 @@
.icon-folder { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe8d7;&nbsp;'); }
.icon-code { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe844;&nbsp;'); }
.icon-comment { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe83b;&nbsp;'); }
.icon-comment-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe83c;&nbsp;'); }
.icon-chat { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe83e;&nbsp;'); }
.icon-folder-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe81e;&nbsp;'); }
.icon-left-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe891;&nbsp;'); }
.icon-up-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe893;&nbsp;'); }

9
public/res/libs/fontello/css/fontello-ie7.css vendored
View File

@ -86,7 +86,6 @@
.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe943;&nbsp;'); }
.icon-keyboard { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe944;&nbsp;'); }
.icon-gamepad { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe849;&nbsp;'); }
.icon-chat { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe84b;&nbsp;'); }
.icon-comment-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe84c;&nbsp;'); }
.icon-chat-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe84d;&nbsp;'); }
.icon-bell { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe84e;&nbsp;'); }
@ -168,9 +167,9 @@
.icon-left-hand { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe88e;&nbsp;'); }
.icon-up-hand { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe88f;&nbsp;'); }
.icon-down-hand { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe890;&nbsp;'); }
.icon-music { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); }
.icon-left-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe891;&nbsp;'); }
.icon-right-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe892;&nbsp;'); }
.icon-up-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe893;&nbsp;'); }
.icon-music { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); }
.icon-down-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe894;&nbsp;'); }
.icon-cw { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe895;&nbsp;'); }
.icon-ccw { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe896;&nbsp;'); }
@ -325,5 +324,7 @@
.icon-folder { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe8d7;&nbsp;'); }
.icon-code { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe844;&nbsp;'); }
.icon-comment { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe83b;&nbsp;'); }
.icon-comment-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe83c;&nbsp;'); }
.icon-chat { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe83e;&nbsp;'); }
.icon-folder-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe81e;&nbsp;'); }
.icon-left-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe891;&nbsp;'); }
.icon-up-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe893;&nbsp;'); }

21
public/res/libs/fontello/css/fontello.css vendored
View File

@ -1,10 +1,10 @@
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?41376356');
src: url('../font/fontello.eot?41376356#iefix') format('embedded-opentype'),
url('../font/fontello.woff?41376356') format('woff'),
url('../font/fontello.ttf?41376356') format('truetype'),
url('../font/fontello.svg?41376356#fontello') format('svg');
src: url('../font/fontello.eot?24620533');
src: url('../font/fontello.eot?24620533#iefix') format('embedded-opentype'),
url('../font/fontello.woff?24620533') format('woff'),
url('../font/fontello.ttf?24620533') format('truetype'),
url('../font/fontello.svg?24620533#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
@ -14,7 +14,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'fontello';
src: url('../font/fontello.svg?41376356#fontello') format('svg');
src: url('../font/fontello.svg?24620533#fontello') format('svg');
}
}
*/
@ -126,7 +126,6 @@
.icon-retweet:before { content: '\e943'; } /* '' */
.icon-keyboard:before { content: '\e944'; } /* '' */
.icon-gamepad:before { content: '\e849'; } /* '' */
.icon-chat:before { content: '\e84b'; } /* '' */
.icon-comment-empty:before { content: '\e84c'; } /* '' */
.icon-chat-empty:before { content: '\e84d'; } /* '' */
.icon-bell:before { content: '\e84e'; } /* '' */
@ -208,9 +207,9 @@
.icon-left-hand:before { content: '\e88e'; } /* '' */
.icon-up-hand:before { content: '\e88f'; } /* '' */
.icon-down-hand:before { content: '\e890'; } /* '' */
.icon-music:before { content: '\e802'; } /* '' */
.icon-left-circled:before { content: '\e891'; } /* '' */
.icon-right-circled:before { content: '\e892'; } /* '' */
.icon-up-circled:before { content: '\e893'; } /* '' */
.icon-music:before { content: '\e802'; } /* '' */
.icon-down-circled:before { content: '\e894'; } /* '' */
.icon-cw:before { content: '\e895'; } /* '' */
.icon-ccw:before { content: '\e896'; } /* '' */
@ -365,5 +364,7 @@
.icon-folder:before { content: '\e8d7'; } /* '' */
.icon-code:before { content: '\e844'; } /* '' */
.icon-comment:before { content: '\e83b'; } /* '' */
.icon-comment-alt:before { content: '\e83c'; } /* '' */
.icon-chat:before { content: '\e83e'; } /* '' */
.icon-folder-open:before { content: '\e81e'; } /* '' */
.icon-left-circled:before { content: '\e891'; } /* '' */
.icon-up-circled:before { content: '\e893'; } /* '' */

133
public/res/libs/fontello/demo.html
View File

@ -375,367 +375,368 @@ body {
<div title="Code: 0xe849" class="the-icons span3"><i class="icon-gamepad"></i> <span class="i-name">icon-gamepad</span><span class="i-code">0xe849</span></div>
</div>
<div class="row">
<div title="Code: 0xe84b" class="the-icons span3"><i class="icon-chat"></i> <span class="i-name">icon-chat</span><span class="i-code">0xe84b</span></div>
<div title="Code: 0xe84c" class="the-icons span3"><i class="icon-comment-empty"></i> <span class="i-name">icon-comment-empty</span><span class="i-code">0xe84c</span></div>
<div title="Code: 0xe84d" class="the-icons span3"><i class="icon-chat-empty"></i> <span class="i-name">icon-chat-empty</span><span class="i-code">0xe84d</span></div>
<div title="Code: 0xe84e" class="the-icons span3"><i class="icon-bell"></i> <span class="i-name">icon-bell</span><span class="i-code">0xe84e</span></div>
<div title="Code: 0xe84f" class="the-icons span3"><i class="icon-bell-alt"></i> <span class="i-name">icon-bell-alt</span><span class="i-code">0xe84f</span></div>
</div>
<div class="row">
<div title="Code: 0xe84f" class="the-icons span3"><i class="icon-bell-alt"></i> <span class="i-name">icon-bell-alt</span><span class="i-code">0xe84f</span></div>
<div title="Code: 0xe850" class="the-icons span3"><i class="icon-attention-alt"></i> <span class="i-name">icon-attention-alt</span><span class="i-code">0xe850</span></div>
<div title="Code: 0xe851" class="the-icons span3"><i class="icon-attention"></i> <span class="i-name">icon-attention</span><span class="i-code">0xe851</span></div>
<div title="Code: 0xe852" class="the-icons span3"><i class="icon-attention-circled"></i> <span class="i-name">icon-attention-circled</span><span class="i-code">0xe852</span></div>
<div title="Code: 0xe853" class="the-icons span3"><i class="icon-location"></i> <span class="i-name">icon-location</span><span class="i-code">0xe853</span></div>
</div>
<div class="row">
<div title="Code: 0xe853" class="the-icons span3"><i class="icon-location"></i> <span class="i-name">icon-location</span><span class="i-code">0xe853</span></div>
<div title="Code: 0xe854" class="the-icons span3"><i class="icon-direction"></i> <span class="i-name">icon-direction</span><span class="i-code">0xe854</span></div>
<div title="Code: 0xe855" class="the-icons span3"><i class="icon-compass"></i> <span class="i-name">icon-compass</span><span class="i-code">0xe855</span></div>
<div title="Code: 0xe857" class="the-icons span3"><i class="icon-doc"></i> <span class="i-name">icon-doc</span><span class="i-code">0xe857</span></div>
<div title="Code: 0xe858" class="the-icons span3"><i class="icon-docs"></i> <span class="i-name">icon-docs</span><span class="i-code">0xe858</span></div>
</div>
<div class="row">
<div title="Code: 0xe858" class="the-icons span3"><i class="icon-docs"></i> <span class="i-name">icon-docs</span><span class="i-code">0xe858</span></div>
<div title="Code: 0xe945" class="the-icons span3"><i class="icon-doc-text"></i> <span class="i-name">icon-doc-text</span><span class="i-code">0xe945</span></div>
<div title="Code: 0xe946" class="the-icons span3"><i class="icon-file"></i> <span class="i-name">icon-file</span><span class="i-code">0xe946</span></div>
<div title="Code: 0xe947" class="the-icons span3"><i class="icon-doc-text-inv"></i> <span class="i-name">icon-doc-text-inv</span><span class="i-code">0xe947</span></div>
<div title="Code: 0xe85a" class="the-icons span3"><i class="icon-folder-empty"></i> <span class="i-name">icon-folder-empty</span><span class="i-code">0xe85a</span></div>
</div>
<div class="row">
<div title="Code: 0xe85a" class="the-icons span3"><i class="icon-folder-empty"></i> <span class="i-name">icon-folder-empty</span><span class="i-code">0xe85a</span></div>
<div title="Code: 0xe85b" class="the-icons span3"><i class="icon-folder-open-empty"></i> <span class="i-name">icon-folder-open-empty</span><span class="i-code">0xe85b</span></div>
<div title="Code: 0xe85c" class="the-icons span3"><i class="icon-box"></i> <span class="i-name">icon-box</span><span class="i-code">0xe85c</span></div>
<div title="Code: 0xe85d" class="the-icons span3"><i class="icon-rss"></i> <span class="i-name">icon-rss</span><span class="i-code">0xe85d</span></div>
<div title="Code: 0xe85e" class="the-icons span3"><i class="icon-rss-squared"></i> <span class="i-name">icon-rss-squared</span><span class="i-code">0xe85e</span></div>
</div>
<div class="row">
<div title="Code: 0xe85e" class="the-icons span3"><i class="icon-rss-squared"></i> <span class="i-name">icon-rss-squared</span><span class="i-code">0xe85e</span></div>
<div title="Code: 0xe85f" class="the-icons span3"><i class="icon-phone"></i> <span class="i-name">icon-phone</span><span class="i-code">0xe85f</span></div>
<div title="Code: 0xe860" class="the-icons span3"><i class="icon-phone-squared"></i> <span class="i-name">icon-phone-squared</span><span class="i-code">0xe860</span></div>
<div title="Code: 0xe861" class="the-icons span3"><i class="icon-menu"></i> <span class="i-name">icon-menu</span><span class="i-code">0xe861</span></div>
<div title="Code: 0xe862" class="the-icons span3"><i class="icon-cog"></i> <span class="i-name">icon-cog</span><span class="i-code">0xe862</span></div>
</div>
<div class="row">
<div title="Code: 0xe862" class="the-icons span3"><i class="icon-cog"></i> <span class="i-name">icon-cog</span><span class="i-code">0xe862</span></div>
<div title="Code: 0xe863" class="the-icons span3"><i class="icon-cog-alt"></i> <span class="i-name">icon-cog-alt</span><span class="i-code">0xe863</span></div>
<div title="Code: 0xe864" class="the-icons span3"><i class="icon-wrench"></i> <span class="i-name">icon-wrench</span><span class="i-code">0xe864</span></div>
<div title="Code: 0xe865" class="the-icons span3"><i class="icon-basket"></i> <span class="i-name">icon-basket</span><span class="i-code">0xe865</span></div>
<div title="Code: 0xe866" class="the-icons span3"><i class="icon-calendar"></i> <span class="i-name">icon-calendar</span><span class="i-code">0xe866</span></div>
</div>
<div class="row">
<div title="Code: 0xe866" class="the-icons span3"><i class="icon-calendar"></i> <span class="i-name">icon-calendar</span><span class="i-code">0xe866</span></div>
<div title="Code: 0xe867" class="the-icons span3"><i class="icon-calendar-empty"></i> <span class="i-name">icon-calendar-empty</span><span class="i-code">0xe867</span></div>
<div title="Code: 0xe868" class="the-icons span3"><i class="icon-login"></i> <span class="i-name">icon-login</span><span class="i-code">0xe868</span></div>
<div title="Code: 0xe949" class="the-icons span3"><i class="icon-logout"></i> <span class="i-name">icon-logout</span><span class="i-code">0xe949</span></div>
<div title="Code: 0xe94a" class="the-icons span3"><i class="icon-mic"></i> <span class="i-name">icon-mic</span><span class="i-code">0xe94a</span></div>
</div>
<div class="row">
<div title="Code: 0xe94a" class="the-icons span3"><i class="icon-mic"></i> <span class="i-name">icon-mic</span><span class="i-code">0xe94a</span></div>
<div title="Code: 0xe94b" class="the-icons span3"><i class="icon-mute"></i> <span class="i-name">icon-mute</span><span class="i-code">0xe94b</span></div>
<div title="Code: 0xe94c" class="the-icons span3"><i class="icon-volume-off"></i> <span class="i-name">icon-volume-off</span><span class="i-code">0xe94c</span></div>
<div title="Code: 0xe869" class="the-icons span3"><i class="icon-volume-down"></i> <span class="i-name">icon-volume-down</span><span class="i-code">0xe869</span></div>
<div title="Code: 0xe86a" class="the-icons span3"><i class="icon-volume-up"></i> <span class="i-name">icon-volume-up</span><span class="i-code">0xe86a</span></div>
</div>
<div class="row">
<div title="Code: 0xe86a" class="the-icons span3"><i class="icon-volume-up"></i> <span class="i-name">icon-volume-up</span><span class="i-code">0xe86a</span></div>
<div title="Code: 0xe86b" class="the-icons span3"><i class="icon-headphones"></i> <span class="i-name">icon-headphones</span><span class="i-code">0xe86b</span></div>
<div title="Code: 0xe86c" class="the-icons span3"><i class="icon-clock"></i> <span class="i-name">icon-clock</span><span class="i-code">0xe86c</span></div>
<div title="Code: 0xe86d" class="the-icons span3"><i class="icon-lightbulb"></i> <span class="i-name">icon-lightbulb</span><span class="i-code">0xe86d</span></div>
<div title="Code: 0xe86e" class="the-icons span3"><i class="icon-block"></i> <span class="i-name">icon-block</span><span class="i-code">0xe86e</span></div>
</div>
<div class="row">
<div title="Code: 0xe86e" class="the-icons span3"><i class="icon-block"></i> <span class="i-name">icon-block</span><span class="i-code">0xe86e</span></div>
<div title="Code: 0xe870" class="the-icons span3"><i class="icon-resize-full-alt"></i> <span class="i-name">icon-resize-full-alt</span><span class="i-code">0xe870</span></div>
<div title="Code: 0xe871" class="the-icons span3"><i class="icon-resize-small"></i> <span class="i-name">icon-resize-small</span><span class="i-code">0xe871</span></div>
<div title="Code: 0xe872" class="the-icons span3"><i class="icon-resize-vertical"></i> <span class="i-name">icon-resize-vertical</span><span class="i-code">0xe872</span></div>
<div title="Code: 0xe873" class="the-icons span3"><i class="icon-resize-horizontal"></i> <span class="i-name">icon-resize-horizontal</span><span class="i-code">0xe873</span></div>
</div>
<div class="row">
<div title="Code: 0xe873" class="the-icons span3"><i class="icon-resize-horizontal"></i> <span class="i-name">icon-resize-horizontal</span><span class="i-code">0xe873</span></div>
<div title="Code: 0xe874" class="the-icons span3"><i class="icon-move"></i> <span class="i-name">icon-move</span><span class="i-code">0xe874</span></div>
<div title="Code: 0xe875" class="the-icons span3"><i class="icon-zoom-in"></i> <span class="i-name">icon-zoom-in</span><span class="i-code">0xe875</span></div>
<div title="Code: 0xe876" class="the-icons span3"><i class="icon-zoom-out"></i> <span class="i-name">icon-zoom-out</span><span class="i-code">0xe876</span></div>
<div title="Code: 0xe877" class="the-icons span3"><i class="icon-down-circled2"></i> <span class="i-name">icon-down-circled2</span><span class="i-code">0xe877</span></div>
</div>
<div class="row">
<div title="Code: 0xe877" class="the-icons span3"><i class="icon-down-circled2"></i> <span class="i-name">icon-down-circled2</span><span class="i-code">0xe877</span></div>
<div title="Code: 0xe878" class="the-icons span3"><i class="icon-up-circled2"></i> <span class="i-name">icon-up-circled2</span><span class="i-code">0xe878</span></div>
<div title="Code: 0xe94d" class="the-icons span3"><i class="icon-down-dir"></i> <span class="i-name">icon-down-dir</span><span class="i-code">0xe94d</span></div>
<div title="Code: 0xe94e" class="the-icons span3"><i class="icon-up-dir"></i> <span class="i-name">icon-up-dir</span><span class="i-code">0xe94e</span></div>
<div title="Code: 0xe94f" class="the-icons span3"><i class="icon-left-dir"></i> <span class="i-name">icon-left-dir</span><span class="i-code">0xe94f</span></div>
</div>
<div class="row">
<div title="Code: 0xe94f" class="the-icons span3"><i class="icon-left-dir"></i> <span class="i-name">icon-left-dir</span><span class="i-code">0xe94f</span></div>
<div title="Code: 0xe950" class="the-icons span3"><i class="icon-right-dir"></i> <span class="i-name">icon-right-dir</span><span class="i-code">0xe950</span></div>
<div title="Code: 0xe879" class="the-icons span3"><i class="icon-down-open"></i> <span class="i-name">icon-down-open</span><span class="i-code">0xe879</span></div>
<div title="Code: 0xe87a" class="the-icons span3"><i class="icon-left-open"></i> <span class="i-name">icon-left-open</span><span class="i-code">0xe87a</span></div>
<div title="Code: 0xe87b" class="the-icons span3"><i class="icon-right-open"></i> <span class="i-name">icon-right-open</span><span class="i-code">0xe87b</span></div>
</div>
<div class="row">
<div title="Code: 0xe87b" class="the-icons span3"><i class="icon-right-open"></i> <span class="i-name">icon-right-open</span><span class="i-code">0xe87b</span></div>
<div title="Code: 0xe87c" class="the-icons span3"><i class="icon-up-open"></i> <span class="i-name">icon-up-open</span><span class="i-code">0xe87c</span></div>
<div title="Code: 0xe87d" class="the-icons span3"><i class="icon-angle-left"></i> <span class="i-name">icon-angle-left</span><span class="i-code">0xe87d</span></div>
<div title="Code: 0xe87e" class="the-icons span3"><i class="icon-angle-right"></i> <span class="i-name">icon-angle-right</span><span class="i-code">0xe87e</span></div>
<div title="Code: 0xe87f" class="the-icons span3"><i class="icon-angle-up"></i> <span class="i-name">icon-angle-up</span><span class="i-code">0xe87f</span></div>
</div>
<div class="row">
<div title="Code: 0xe87f" class="the-icons span3"><i class="icon-angle-up"></i> <span class="i-name">icon-angle-up</span><span class="i-code">0xe87f</span></div>
<div title="Code: 0xe880" class="the-icons span3"><i class="icon-angle-down"></i> <span class="i-name">icon-angle-down</span><span class="i-code">0xe880</span></div>
<div title="Code: 0xe881" class="the-icons span3"><i class="icon-angle-circled-left"></i> <span class="i-name">icon-angle-circled-left</span><span class="i-code">0xe881</span></div>
<div title="Code: 0xe882" class="the-icons span3"><i class="icon-angle-circled-right"></i> <span class="i-name">icon-angle-circled-right</span><span class="i-code">0xe882</span></div>
<div title="Code: 0xe883" class="the-icons span3"><i class="icon-angle-circled-up"></i> <span class="i-name">icon-angle-circled-up</span><span class="i-code">0xe883</span></div>
</div>
<div class="row">
<div title="Code: 0xe883" class="the-icons span3"><i class="icon-angle-circled-up"></i> <span class="i-name">icon-angle-circled-up</span><span class="i-code">0xe883</span></div>
<div title="Code: 0xe884" class="the-icons span3"><i class="icon-angle-circled-down"></i> <span class="i-name">icon-angle-circled-down</span><span class="i-code">0xe884</span></div>
<div title="Code: 0xe885" class="the-icons span3"><i class="icon-angle-double-left"></i> <span class="i-name">icon-angle-double-left</span><span class="i-code">0xe885</span></div>
<div title="Code: 0xe886" class="the-icons span3"><i class="icon-angle-double-right"></i> <span class="i-name">icon-angle-double-right</span><span class="i-code">0xe886</span></div>
<div title="Code: 0xe887" class="the-icons span3"><i class="icon-angle-double-up"></i> <span class="i-name">icon-angle-double-up</span><span class="i-code">0xe887</span></div>
</div>
<div class="row">
<div title="Code: 0xe887" class="the-icons span3"><i class="icon-angle-double-up"></i> <span class="i-name">icon-angle-double-up</span><span class="i-code">0xe887</span></div>
<div title="Code: 0xe888" class="the-icons span3"><i class="icon-angle-double-down"></i> <span class="i-name">icon-angle-double-down</span><span class="i-code">0xe888</span></div>
<div title="Code: 0xe951" class="the-icons span3"><i class="icon-down"></i> <span class="i-name">icon-down</span><span class="i-code">0xe951</span></div>
<div title="Code: 0xe953" class="the-icons span3"><i class="icon-right"></i> <span class="i-name">icon-right</span><span class="i-code">0xe953</span></div>
<div title="Code: 0xe952" class="the-icons span3"><i class="icon-left"></i> <span class="i-name">icon-left</span><span class="i-code">0xe952</span></div>
</div>
<div class="row">
<div title="Code: 0xe952" class="the-icons span3"><i class="icon-left"></i> <span class="i-name">icon-left</span><span class="i-code">0xe952</span></div>
<div title="Code: 0xe954" class="the-icons span3"><i class="icon-up"></i> <span class="i-name">icon-up</span><span class="i-code">0xe954</span></div>
<div title="Code: 0xe889" class="the-icons span3"><i class="icon-down-big"></i> <span class="i-name">icon-down-big</span><span class="i-code">0xe889</span></div>
<div title="Code: 0xe88a" class="the-icons span3"><i class="icon-left-big"></i> <span class="i-name">icon-left-big</span><span class="i-code">0xe88a</span></div>
<div title="Code: 0xe88b" class="the-icons span3"><i class="icon-right-big"></i> <span class="i-name">icon-right-big</span><span class="i-code">0xe88b</span></div>
</div>
<div class="row">
<div title="Code: 0xe88b" class="the-icons span3"><i class="icon-right-big"></i> <span class="i-name">icon-right-big</span><span class="i-code">0xe88b</span></div>
<div title="Code: 0xe88c" class="the-icons span3"><i class="icon-up-big"></i> <span class="i-name">icon-up-big</span><span class="i-code">0xe88c</span></div>
<div title="Code: 0xe88d" class="the-icons span3"><i class="icon-right-hand"></i> <span class="i-name">icon-right-hand</span><span class="i-code">0xe88d</span></div>
<div title="Code: 0xe88e" class="the-icons span3"><i class="icon-left-hand"></i> <span class="i-name">icon-left-hand</span><span class="i-code">0xe88e</span></div>
</div>
<div class="row">
<div title="Code: 0xe88f" class="the-icons span3"><i class="icon-up-hand"></i> <span class="i-name">icon-up-hand</span><span class="i-code">0xe88f</span></div>
<div title="Code: 0xe890" class="the-icons span3"><i class="icon-down-hand"></i> <span class="i-name">icon-down-hand</span><span class="i-code">0xe890</span></div>
<div title="Code: 0xe802" class="the-icons span3"><i class="icon-music"></i> <span class="i-name">icon-music</span><span class="i-code">0xe802</span></div>
<div title="Code: 0xe892" class="the-icons span3"><i class="icon-right-circled"></i> <span class="i-name">icon-right-circled</span><span class="i-code">0xe892</span></div>
</div>
<div class="row">
<div title="Code: 0xe893" class="the-icons span3"><i class="icon-up-circled"></i> <span class="i-name">icon-up-circled</span><span class="i-code">0xe893</span></div>
<div title="Code: 0xe890" class="the-icons span3"><i class="icon-down-hand"></i> <span class="i-name">icon-down-hand</span><span class="i-code">0xe890</span></div>
<div title="Code: 0xe891" class="the-icons span3"><i class="icon-left-circled"></i> <span class="i-name">icon-left-circled</span><span class="i-code">0xe891</span></div>
<div title="Code: 0xe892" class="the-icons span3"><i class="icon-right-circled"></i> <span class="i-name">icon-right-circled</span><span class="i-code">0xe892</span></div>
<div title="Code: 0xe802" class="the-icons span3"><i class="icon-music"></i> <span class="i-name">icon-music</span><span class="i-code">0xe802</span></div>
</div>
<div class="row">
<div title="Code: 0xe894" class="the-icons span3"><i class="icon-down-circled"></i> <span class="i-name">icon-down-circled</span><span class="i-code">0xe894</span></div>
<div title="Code: 0xe895" class="the-icons span3"><i class="icon-cw"></i> <span class="i-name">icon-cw</span><span class="i-code">0xe895</span></div>
<div title="Code: 0xe896" class="the-icons span3"><i class="icon-ccw"></i> <span class="i-name">icon-ccw</span><span class="i-code">0xe896</span></div>
<div title="Code: 0xe897" class="the-icons span3"><i class="icon-refresh"></i> <span class="i-name">icon-refresh</span><span class="i-code">0xe897</span></div>
</div>
<div class="row">
<div title="Code: 0xe897" class="the-icons span3"><i class="icon-refresh"></i> <span class="i-name">icon-refresh</span><span class="i-code">0xe897</span></div>
<div title="Code: 0xe898" class="the-icons span3"><i class="icon-level-up"></i> <span class="i-name">icon-level-up</span><span class="i-code">0xe898</span></div>
<div title="Code: 0xe955" class="the-icons span3"><i class="icon-level-down"></i> <span class="i-name">icon-level-down</span><span class="i-code">0xe955</span></div>
<div title="Code: 0xe956" class="the-icons span3"><i class="icon-shuffle"></i> <span class="i-name">icon-shuffle</span><span class="i-code">0xe956</span></div>
<div title="Code: 0xe957" class="the-icons span3"><i class="icon-exchange"></i> <span class="i-name">icon-exchange</span><span class="i-code">0xe957</span></div>
</div>
<div class="row">
<div title="Code: 0xe957" class="the-icons span3"><i class="icon-exchange"></i> <span class="i-name">icon-exchange</span><span class="i-code">0xe957</span></div>
<div title="Code: 0xe958" class="the-icons span3"><i class="icon-collapse"></i> <span class="i-name">icon-collapse</span><span class="i-code">0xe958</span></div>
<div title="Code: 0xe899" class="the-icons span3"><i class="icon-collapse-top"></i> <span class="i-name">icon-collapse-top</span><span class="i-code">0xe899</span></div>
<div title="Code: 0xe89a" class="the-icons span3"><i class="icon-expand"></i> <span class="i-name">icon-expand</span><span class="i-code">0xe89a</span></div>
<div title="Code: 0xe89b" class="the-icons span3"><i class="icon-play"></i> <span class="i-name">icon-play</span><span class="i-code">0xe89b</span></div>
</div>
<div class="row">
<div title="Code: 0xe89b" class="the-icons span3"><i class="icon-play"></i> <span class="i-name">icon-play</span><span class="i-code">0xe89b</span></div>
<div title="Code: 0xe89c" class="the-icons span3"><i class="icon-play-circled"></i> <span class="i-name">icon-play-circled</span><span class="i-code">0xe89c</span></div>
<div title="Code: 0xe89d" class="the-icons span3"><i class="icon-play-circled2"></i> <span class="i-name">icon-play-circled2</span><span class="i-code">0xe89d</span></div>
<div title="Code: 0xe89e" class="the-icons span3"><i class="icon-stop"></i> <span class="i-name">icon-stop</span><span class="i-code">0xe89e</span></div>
<div title="Code: 0xe800" class="the-icons span3"><i class="icon-pause"></i> <span class="i-name">icon-pause</span><span class="i-code">0xe800</span></div>
</div>
<div class="row">
<div title="Code: 0xe800" class="the-icons span3"><i class="icon-pause"></i> <span class="i-name">icon-pause</span><span class="i-code">0xe800</span></div>
<div title="Code: 0xe8a0" class="the-icons span3"><i class="icon-to-end"></i> <span class="i-name">icon-to-end</span><span class="i-code">0xe8a0</span></div>
<div title="Code: 0xe8a1" class="the-icons span3"><i class="icon-to-end-alt"></i> <span class="i-name">icon-to-end-alt</span><span class="i-code">0xe8a1</span></div>
<div title="Code: 0xe8a2" class="the-icons span3"><i class="icon-to-start"></i> <span class="i-name">icon-to-start</span><span class="i-code">0xe8a2</span></div>
<div title="Code: 0xe8a3" class="the-icons span3"><i class="icon-to-start-alt"></i> <span class="i-name">icon-to-start-alt</span><span class="i-code">0xe8a3</span></div>
</div>
<div class="row">
<div title="Code: 0xe8a3" class="the-icons span3"><i class="icon-to-start-alt"></i> <span class="i-name">icon-to-start-alt</span><span class="i-code">0xe8a3</span></div>
<div title="Code: 0xe8a4" class="the-icons span3"><i class="icon-fast-fw"></i> <span class="i-name">icon-fast-fw</span><span class="i-code">0xe8a4</span></div>
<div title="Code: 0xe8a5" class="the-icons span3"><i class="icon-fast-bw"></i> <span class="i-name">icon-fast-bw</span><span class="i-code">0xe8a5</span></div>
<div title="Code: 0xe8a6" class="the-icons span3"><i class="icon-eject"></i> <span class="i-name">icon-eject</span><span class="i-code">0xe8a6</span></div>
<div title="Code: 0xe8a8" class="the-icons span3"><i class="icon-signal"></i> <span class="i-name">icon-signal</span><span class="i-code">0xe8a8</span></div>
</div>
<div class="row">
<div title="Code: 0xe8a8" class="the-icons span3"><i class="icon-signal"></i> <span class="i-name">icon-signal</span><span class="i-code">0xe8a8</span></div>
<div title="Code: 0xe959" class="the-icons span3"><i class="icon-award"></i> <span class="i-name">icon-award</span><span class="i-code">0xe959</span></div>
<div title="Code: 0xe95a" class="the-icons span3"><i class="icon-desktop"></i> <span class="i-name">icon-desktop</span><span class="i-code">0xe95a</span></div>
<div title="Code: 0xe90e" class="the-icons span3"><i class="icon-laptop"></i> <span class="i-name">icon-laptop</span><span class="i-code">0xe90e</span></div>
<div title="Code: 0xe95c" class="the-icons span3"><i class="icon-tablet"></i> <span class="i-name">icon-tablet</span><span class="i-code">0xe95c</span></div>
</div>
<div class="row">
<div title="Code: 0xe95c" class="the-icons span3"><i class="icon-tablet"></i> <span class="i-name">icon-tablet</span><span class="i-code">0xe95c</span></div>
<div title="Code: 0xe8a9" class="the-icons span3"><i class="icon-mobile"></i> <span class="i-name">icon-mobile</span><span class="i-code">0xe8a9</span></div>
<div title="Code: 0xe8aa" class="the-icons span3"><i class="icon-inbox"></i> <span class="i-name">icon-inbox</span><span class="i-code">0xe8aa</span></div>
<div title="Code: 0xe8ab" class="the-icons span3"><i class="icon-globe"></i> <span class="i-name">icon-globe</span><span class="i-code">0xe8ab</span></div>
<div title="Code: 0xe8ac" class="the-icons span3"><i class="icon-sun"></i> <span class="i-name">icon-sun</span><span class="i-code">0xe8ac</span></div>
</div>
<div class="row">
<div title="Code: 0xe8ac" class="the-icons span3"><i class="icon-sun"></i> <span class="i-name">icon-sun</span><span class="i-code">0xe8ac</span></div>
<div title="Code: 0xe8ad" class="the-icons span3"><i class="icon-cloud"></i> <span class="i-name">icon-cloud</span><span class="i-code">0xe8ad</span></div>
<div title="Code: 0xe8ae" class="the-icons span3"><i class="icon-flash"></i> <span class="i-name">icon-flash</span><span class="i-code">0xe8ae</span></div>
<div title="Code: 0xe8af" class="the-icons span3"><i class="icon-moon"></i> <span class="i-name">icon-moon</span><span class="i-code">0xe8af</span></div>
<div title="Code: 0xe8b0" class="the-icons span3"><i class="icon-umbrella"></i> <span class="i-name">icon-umbrella</span><span class="i-code">0xe8b0</span></div>
</div>
<div class="row">
<div title="Code: 0xe8b0" class="the-icons span3"><i class="icon-umbrella"></i> <span class="i-name">icon-umbrella</span><span class="i-code">0xe8b0</span></div>
<div title="Code: 0xe8b1" class="the-icons span3"><i class="icon-flight"></i> <span class="i-name">icon-flight</span><span class="i-code">0xe8b1</span></div>
<div title="Code: 0xe8b2" class="the-icons span3"><i class="icon-fighter-jet"></i> <span class="i-name">icon-fighter-jet</span><span class="i-code">0xe8b2</span></div>
<div title="Code: 0xe8b3" class="the-icons span3"><i class="icon-leaf"></i> <span class="i-name">icon-leaf</span><span class="i-code">0xe8b3</span></div>
<div title="Code: 0xe8b6" class="the-icons span3"><i class="icon-font"></i> <span class="i-name">icon-font</span><span class="i-code">0xe8b6</span></div>
</div>
<div class="row">
<div title="Code: 0xe8b6" class="the-icons span3"><i class="icon-font"></i> <span class="i-name">icon-font</span><span class="i-code">0xe8b6</span></div>
<div title="Code: 0xe8b5" class="the-icons span3"><i class="icon-bold"></i> <span class="i-name">icon-bold</span><span class="i-code">0xe8b5</span></div>
<div title="Code: 0xe8b4" class="the-icons span3"><i class="icon-italic"></i> <span class="i-name">icon-italic</span><span class="i-code">0xe8b4</span></div>
<div title="Code: 0xe8b7" class="the-icons span3"><i class="icon-text-height"></i> <span class="i-name">icon-text-height</span><span class="i-code">0xe8b7</span></div>
<div title="Code: 0xe8b8" class="the-icons span3"><i class="icon-text-width"></i> <span class="i-name">icon-text-width</span><span class="i-code">0xe8b8</span></div>
</div>
<div class="row">
<div title="Code: 0xe8b8" class="the-icons span3"><i class="icon-text-width"></i> <span class="i-name">icon-text-width</span><span class="i-code">0xe8b8</span></div>
<div title="Code: 0xe95d" class="the-icons span3"><i class="icon-align-left"></i> <span class="i-name">icon-align-left</span><span class="i-code">0xe95d</span></div>
<div title="Code: 0xe95e" class="the-icons span3"><i class="icon-align-center"></i> <span class="i-name">icon-align-center</span><span class="i-code">0xe95e</span></div>
<div title="Code: 0xe95f" class="the-icons span3"><i class="icon-align-right"></i> <span class="i-name">icon-align-right</span><span class="i-code">0xe95f</span></div>
<div title="Code: 0xe960" class="the-icons span3"><i class="icon-align-justify"></i> <span class="i-name">icon-align-justify</span><span class="i-code">0xe960</span></div>
</div>
<div class="row">
<div title="Code: 0xe960" class="the-icons span3"><i class="icon-align-justify"></i> <span class="i-name">icon-align-justify</span><span class="i-code">0xe960</span></div>
<div title="Code: 0xe8b9" class="the-icons span3"><i class="icon-list"></i> <span class="i-name">icon-list</span><span class="i-code">0xe8b9</span></div>
<div title="Code: 0xe8ba" class="the-icons span3"><i class="icon-indent-left"></i> <span class="i-name">icon-indent-left</span><span class="i-code">0xe8ba</span></div>
<div title="Code: 0xe8bb" class="the-icons span3"><i class="icon-indent-right"></i> <span class="i-name">icon-indent-right</span><span class="i-code">0xe8bb</span></div>
<div title="Code: 0xe8bc" class="the-icons span3"><i class="icon-list-bullet"></i> <span class="i-name">icon-list-bullet</span><span class="i-code">0xe8bc</span></div>
</div>
<div class="row">
<div title="Code: 0xe8bc" class="the-icons span3"><i class="icon-list-bullet"></i> <span class="i-name">icon-list-bullet</span><span class="i-code">0xe8bc</span></div>
<div title="Code: 0xe8bd" class="the-icons span3"><i class="icon-list-numbered"></i> <span class="i-name">icon-list-numbered</span><span class="i-code">0xe8bd</span></div>
<div title="Code: 0xe8be" class="the-icons span3"><i class="icon-strike"></i> <span class="i-name">icon-strike</span><span class="i-code">0xe8be</span></div>
<div title="Code: 0xe8bf" class="the-icons span3"><i class="icon-underline"></i> <span class="i-name">icon-underline</span><span class="i-code">0xe8bf</span></div>
<div title="Code: 0xe8c0" class="the-icons span3"><i class="icon-superscript"></i> <span class="i-name">icon-superscript</span><span class="i-code">0xe8c0</span></div>
</div>
<div class="row">
<div title="Code: 0xe8c0" class="the-icons span3"><i class="icon-superscript"></i> <span class="i-name">icon-superscript</span><span class="i-code">0xe8c0</span></div>
<div title="Code: 0xe8c1" class="the-icons span3"><i class="icon-subscript"></i> <span class="i-name">icon-subscript</span><span class="i-code">0xe8c1</span></div>
<div title="Code: 0xe8c2" class="the-icons span3"><i class="icon-table"></i> <span class="i-name">icon-table</span><span class="i-code">0xe8c2</span></div>
<div title="Code: 0xe8c3" class="the-icons span3"><i class="icon-columns"></i> <span class="i-name">icon-columns</span><span class="i-code">0xe8c3</span></div>
<div title="Code: 0xe8c4" class="the-icons span3"><i class="icon-crop"></i> <span class="i-name">icon-crop</span><span class="i-code">0xe8c4</span></div>
</div>
<div class="row">
<div title="Code: 0xe8c4" class="the-icons span3"><i class="icon-crop"></i> <span class="i-name">icon-crop</span><span class="i-code">0xe8c4</span></div>
<div title="Code: 0xe8c5" class="the-icons span3"><i class="icon-scissors"></i> <span class="i-name">icon-scissors</span><span class="i-code">0xe8c5</span></div>
<div title="Code: 0xe8c6" class="the-icons span3"><i class="icon-paste"></i> <span class="i-name">icon-paste</span><span class="i-code">0xe8c6</span></div>
<div title="Code: 0xe8c7" class="the-icons span3"><i class="icon-briefcase"></i> <span class="i-name">icon-briefcase</span><span class="i-code">0xe8c7</span></div>
<div title="Code: 0xe8c8" class="the-icons span3"><i class="icon-suitcase"></i> <span class="i-name">icon-suitcase</span><span class="i-code">0xe8c8</span></div>
</div>
<div class="row">
<div title="Code: 0xe8c8" class="the-icons span3"><i class="icon-suitcase"></i> <span class="i-name">icon-suitcase</span><span class="i-code">0xe8c8</span></div>
<div title="Code: 0xe961" class="the-icons span3"><i class="icon-ellipsis"></i> <span class="i-name">icon-ellipsis</span><span class="i-code">0xe961</span></div>
<div title="Code: 0xe962" class="the-icons span3"><i class="icon-ellipsis-vert"></i> <span class="i-name">icon-ellipsis-vert</span><span class="i-code">0xe962</span></div>
<div title="Code: 0xe963" class="the-icons span3"><i class="icon-off"></i> <span class="i-name">icon-off</span><span class="i-code">0xe963</span></div>
<div title="Code: 0xe964" class="the-icons span3"><i class="icon-road"></i> <span class="i-name">icon-road</span><span class="i-code">0xe964</span></div>
</div>
<div class="row">
<div title="Code: 0xe964" class="the-icons span3"><i class="icon-road"></i> <span class="i-name">icon-road</span><span class="i-code">0xe964</span></div>
<div title="Code: 0xe8c9" class="the-icons span3"><i class="icon-list-alt"></i> <span class="i-name">icon-list-alt</span><span class="i-code">0xe8c9</span></div>
<div title="Code: 0xe8ca" class="the-icons span3"><i class="icon-qrcode"></i> <span class="i-name">icon-qrcode</span><span class="i-code">0xe8ca</span></div>
<div title="Code: 0xe8cb" class="the-icons span3"><i class="icon-barcode"></i> <span class="i-name">icon-barcode</span><span class="i-code">0xe8cb</span></div>
<div title="Code: 0xe8cc" class="the-icons span3"><i class="icon-book"></i> <span class="i-name">icon-book</span><span class="i-code">0xe8cc</span></div>
</div>
<div class="row">
<div title="Code: 0xe8cc" class="the-icons span3"><i class="icon-book"></i> <span class="i-name">icon-book</span><span class="i-code">0xe8cc</span></div>
<div title="Code: 0xe8cd" class="the-icons span3"><i class="icon-ajust"></i> <span class="i-name">icon-ajust</span><span class="i-code">0xe8cd</span></div>
<div title="Code: 0xe8ce" class="the-icons span3"><i class="icon-tint"></i> <span class="i-name">icon-tint</span><span class="i-code">0xe8ce</span></div>
<div title="Code: 0xe8cf" class="the-icons span3"><i class="icon-check"></i> <span class="i-name">icon-check</span><span class="i-code">0xe8cf</span></div>
<div title="Code: 0xe8d0" class="the-icons span3"><i class="icon-check-empty"></i> <span class="i-name">icon-check-empty</span><span class="i-code">0xe8d0</span></div>
</div>
<div class="row">
<div title="Code: 0xe8d0" class="the-icons span3"><i class="icon-check-empty"></i> <span class="i-name">icon-check-empty</span><span class="i-code">0xe8d0</span></div>
<div title="Code: 0xe8d1" class="the-icons span3"><i class="icon-circle"></i> <span class="i-name">icon-circle</span><span class="i-code">0xe8d1</span></div>
<div title="Code: 0xe8d2" class="the-icons span3"><i class="icon-circle-empty"></i> <span class="i-name">icon-circle-empty</span><span class="i-code">0xe8d2</span></div>
<div title="Code: 0xe8d3" class="the-icons span3"><i class="icon-asterisk"></i> <span class="i-name">icon-asterisk</span><span class="i-code">0xe8d3</span></div>
<div title="Code: 0xe8d4" class="the-icons span3"><i class="icon-gift"></i> <span class="i-name">icon-gift</span><span class="i-code">0xe8d4</span></div>
</div>
<div class="row">
<div title="Code: 0xe8d4" class="the-icons span3"><i class="icon-gift"></i> <span class="i-name">icon-gift</span><span class="i-code">0xe8d4</span></div>
<div title="Code: 0xe8d5" class="the-icons span3"><i class="icon-fire"></i> <span class="i-name">icon-fire</span><span class="i-code">0xe8d5</span></div>
<div title="Code: 0xe8d6" class="the-icons span3"><i class="icon-magnet"></i> <span class="i-name">icon-magnet</span><span class="i-code">0xe8d6</span></div>
<div title="Code: 0xe8d8" class="the-icons span3"><i class="icon-ticket"></i> <span class="i-name">icon-ticket</span><span class="i-code">0xe8d8</span></div>
<div title="Code: 0xe965" class="the-icons span3"><i class="icon-credit-card"></i> <span class="i-name">icon-credit-card</span><span class="i-code">0xe965</span></div>
</div>
<div class="row">
<div title="Code: 0xe965" class="the-icons span3"><i class="icon-credit-card"></i> <span class="i-name">icon-credit-card</span><span class="i-code">0xe965</span></div>
<div title="Code: 0xe966" class="the-icons span3"><i class="icon-floppy"></i> <span class="i-name">icon-floppy</span><span class="i-code">0xe966</span></div>
<div title="Code: 0xe967" class="the-icons span3"><i class="icon-megaphone"></i> <span class="i-name">icon-megaphone</span><span class="i-code">0xe967</span></div>
<div title="Code: 0xe8d9" class="the-icons span3"><i class="icon-key"></i> <span class="i-name">icon-key</span><span class="i-code">0xe8d9</span></div>
<div title="Code: 0xe8da" class="the-icons span3"><i class="icon-fork"></i> <span class="i-name">icon-fork</span><span class="i-code">0xe8da</span></div>
</div>
<div class="row">
<div title="Code: 0xe8da" class="the-icons span3"><i class="icon-fork"></i> <span class="i-name">icon-fork</span><span class="i-code">0xe8da</span></div>
<div title="Code: 0xe8db" class="the-icons span3"><i class="icon-rocket"></i> <span class="i-name">icon-rocket</span><span class="i-code">0xe8db</span></div>
<div title="Code: 0xe8dc" class="the-icons span3"><i class="icon-bug"></i> <span class="i-name">icon-bug</span><span class="i-code">0xe8dc</span></div>
<div title="Code: 0xe8dd" class="the-icons span3"><i class="icon-certificate"></i> <span class="i-name">icon-certificate</span><span class="i-code">0xe8dd</span></div>
<div title="Code: 0xe8de" class="the-icons span3"><i class="icon-tasks"></i> <span class="i-name">icon-tasks</span><span class="i-code">0xe8de</span></div>
</div>
<div class="row">
<div title="Code: 0xe8de" class="the-icons span3"><i class="icon-tasks"></i> <span class="i-name">icon-tasks</span><span class="i-code">0xe8de</span></div>
<div title="Code: 0xe8df" class="the-icons span3"><i class="icon-filter"></i> <span class="i-name">icon-filter</span><span class="i-code">0xe8df</span></div>
<div title="Code: 0xe8e0" class="the-icons span3"><i class="icon-beaker"></i> <span class="i-name">icon-beaker</span><span class="i-code">0xe8e0</span></div>
<div title="Code: 0xe8e1" class="the-icons span3"><i class="icon-magic"></i> <span class="i-name">icon-magic</span><span class="i-code">0xe8e1</span></div>
<div title="Code: 0xe8e2" class="the-icons span3"><i class="icon-truck"></i> <span class="i-name">icon-truck</span><span class="i-code">0xe8e2</span></div>
</div>
<div class="row">
<div title="Code: 0xe8e2" class="the-icons span3"><i class="icon-truck"></i> <span class="i-name">icon-truck</span><span class="i-code">0xe8e2</span></div>
<div title="Code: 0xe8e3" class="the-icons span3"><i class="icon-money"></i> <span class="i-name">icon-money</span><span class="i-code">0xe8e3</span></div>
<div title="Code: 0xe8e4" class="the-icons span3"><i class="icon-euro"></i> <span class="i-name">icon-euro</span><span class="i-code">0xe8e4</span></div>
<div title="Code: 0xe8e5" class="the-icons span3"><i class="icon-pound"></i> <span class="i-name">icon-pound</span><span class="i-code">0xe8e5</span></div>
<div title="Code: 0xe8e6" class="the-icons span3"><i class="icon-dollar"></i> <span class="i-name">icon-dollar</span><span class="i-code">0xe8e6</span></div>
</div>
<div class="row">
<div title="Code: 0xe8e6" class="the-icons span3"><i class="icon-dollar"></i> <span class="i-name">icon-dollar</span><span class="i-code">0xe8e6</span></div>
<div title="Code: 0xe8e7" class="the-icons span3"><i class="icon-rupee"></i> <span class="i-name">icon-rupee</span><span class="i-code">0xe8e7</span></div>
<div title="Code: 0xe8e8" class="the-icons span3"><i class="icon-yen"></i> <span class="i-name">icon-yen</span><span class="i-code">0xe8e8</span></div>
<div title="Code: 0xe8e9" class="the-icons span3"><i class="icon-renminbi"></i> <span class="i-name">icon-renminbi</span><span class="i-code">0xe8e9</span></div>
<div title="Code: 0xe8ea" class="the-icons span3"><i class="icon-won"></i> <span class="i-name">icon-won</span><span class="i-code">0xe8ea</span></div>
</div>
<div class="row">
<div title="Code: 0xe8ea" class="the-icons span3"><i class="icon-won"></i> <span class="i-name">icon-won</span><span class="i-code">0xe8ea</span></div>
<div title="Code: 0xe8eb" class="the-icons span3"><i class="icon-bitcoin"></i> <span class="i-name">icon-bitcoin</span><span class="i-code">0xe8eb</span></div>
<div title="Code: 0xe8ec" class="the-icons span3"><i class="icon-sort"></i> <span class="i-name">icon-sort</span><span class="i-code">0xe8ec</span></div>
<div title="Code: 0xe8ed" class="the-icons span3"><i class="icon-sort-down"></i> <span class="i-name">icon-sort-down</span><span class="i-code">0xe8ed</span></div>
<div title="Code: 0xe8ee" class="the-icons span3"><i class="icon-sort-up"></i> <span class="i-name">icon-sort-up</span><span class="i-code">0xe8ee</span></div>
</div>
<div class="row">
<div title="Code: 0xe8ee" class="the-icons span3"><i class="icon-sort-up"></i> <span class="i-name">icon-sort-up</span><span class="i-code">0xe8ee</span></div>
<div title="Code: 0xe8ef" class="the-icons span3"><i class="icon-sort-alt-up"></i> <span class="i-name">icon-sort-alt-up</span><span class="i-code">0xe8ef</span></div>
<div title="Code: 0xe8f0" class="the-icons span3"><i class="icon-sort-alt-down"></i> <span class="i-name">icon-sort-alt-down</span><span class="i-code">0xe8f0</span></div>
<div title="Code: 0xe8f1" class="the-icons span3"><i class="icon-sort-name-up"></i> <span class="i-name">icon-sort-name-up</span><span class="i-code">0xe8f1</span></div>
<div title="Code: 0xe8f2" class="the-icons span3"><i class="icon-sort-name-down"></i> <span class="i-name">icon-sort-name-down</span><span class="i-code">0xe8f2</span></div>
</div>
<div class="row">
<div title="Code: 0xe8f2" class="the-icons span3"><i class="icon-sort-name-down"></i> <span class="i-name">icon-sort-name-down</span><span class="i-code">0xe8f2</span></div>
<div title="Code: 0xe8f3" class="the-icons span3"><i class="icon-sort-number-up"></i> <span class="i-name">icon-sort-number-up</span><span class="i-code">0xe8f3</span></div>
<div title="Code: 0xe8f4" class="the-icons span3"><i class="icon-sort-number-down"></i> <span class="i-name">icon-sort-number-down</span><span class="i-code">0xe8f4</span></div>
<div title="Code: 0xe8f5" class="the-icons span3"><i class="icon-hammer"></i> <span class="i-name">icon-hammer</span><span class="i-code">0xe8f5</span></div>
<div title="Code: 0xe8f6" class="the-icons span3"><i class="icon-gauge"></i> <span class="i-name">icon-gauge</span><span class="i-code">0xe8f6</span></div>
</div>
<div class="row">
<div title="Code: 0xe8f6" class="the-icons span3"><i class="icon-gauge"></i> <span class="i-name">icon-gauge</span><span class="i-code">0xe8f6</span></div>
<div title="Code: 0xe8f7" class="the-icons span3"><i class="icon-sitemap"></i> <span class="i-name">icon-sitemap</span><span class="i-code">0xe8f7</span></div>
<div title="Code: 0xe8f8" class="the-icons span3"><i class="icon-spinner"></i> <span class="i-name">icon-spinner</span><span class="i-code">0xe8f8</span></div>
<div title="Code: 0xe8f9" class="the-icons span3"><i class="icon-coffee"></i> <span class="i-name">icon-coffee</span><span class="i-code">0xe8f9</span></div>
<div title="Code: 0xe8fa" class="the-icons span3"><i class="icon-food"></i> <span class="i-name">icon-food</span><span class="i-code">0xe8fa</span></div>
</div>
<div class="row">
<div title="Code: 0xe8fa" class="the-icons span3"><i class="icon-food"></i> <span class="i-name">icon-food</span><span class="i-code">0xe8fa</span></div>
<div title="Code: 0xe8fb" class="the-icons span3"><i class="icon-beer"></i> <span class="i-name">icon-beer</span><span class="i-code">0xe8fb</span></div>
<div title="Code: 0xe8fc" class="the-icons span3"><i class="icon-user-md"></i> <span class="i-name">icon-user-md</span><span class="i-code">0xe8fc</span></div>
<div title="Code: 0xe8fd" class="the-icons span3"><i class="icon-stethoscope"></i> <span class="i-name">icon-stethoscope</span><span class="i-code">0xe8fd</span></div>
<div title="Code: 0xe8fe" class="the-icons span3"><i class="icon-ambulance"></i> <span class="i-name">icon-ambulance</span><span class="i-code">0xe8fe</span></div>
</div>
<div class="row">
<div title="Code: 0xe8fe" class="the-icons span3"><i class="icon-ambulance"></i> <span class="i-name">icon-ambulance</span><span class="i-code">0xe8fe</span></div>
<div title="Code: 0xe8ff" class="the-icons span3"><i class="icon-medkit"></i> <span class="i-name">icon-medkit</span><span class="i-code">0xe8ff</span></div>
<div title="Code: 0xe900" class="the-icons span3"><i class="icon-h-sigh"></i> <span class="i-name">icon-h-sigh</span><span class="i-code">0xe900</span></div>
<div title="Code: 0xe901" class="the-icons span3"><i class="icon-hospital"></i> <span class="i-name">icon-hospital</span><span class="i-code">0xe901</span></div>
<div title="Code: 0xe902" class="the-icons span3"><i class="icon-building"></i> <span class="i-name">icon-building</span><span class="i-code">0xe902</span></div>
</div>
<div class="row">
<div title="Code: 0xe902" class="the-icons span3"><i class="icon-building"></i> <span class="i-name">icon-building</span><span class="i-code">0xe902</span></div>
<div title="Code: 0xe903" class="the-icons span3"><i class="icon-smile"></i> <span class="i-name">icon-smile</span><span class="i-code">0xe903</span></div>
<div title="Code: 0xe904" class="the-icons span3"><i class="icon-frown"></i> <span class="i-name">icon-frown</span><span class="i-code">0xe904</span></div>
<div title="Code: 0xe905" class="the-icons span3"><i class="icon-meh"></i> <span class="i-name">icon-meh</span><span class="i-code">0xe905</span></div>
<div title="Code: 0xe906" class="the-icons span3"><i class="icon-anchor"></i> <span class="i-name">icon-anchor</span><span class="i-code">0xe906</span></div>
</div>
<div class="row">
<div title="Code: 0xe906" class="the-icons span3"><i class="icon-anchor"></i> <span class="i-name">icon-anchor</span><span class="i-code">0xe906</span></div>
<div title="Code: 0xe907" class="the-icons span3"><i class="icon-terminal"></i> <span class="i-name">icon-terminal</span><span class="i-code">0xe907</span></div>
<div title="Code: 0xe908" class="the-icons span3"><i class="icon-eraser"></i> <span class="i-name">icon-eraser</span><span class="i-code">0xe908</span></div>
<div title="Code: 0xe909" class="the-icons span3"><i class="icon-puzzle"></i> <span class="i-name">icon-puzzle</span><span class="i-code">0xe909</span></div>
<div title="Code: 0xe90a" class="the-icons span3"><i class="icon-shield"></i> <span class="i-name">icon-shield</span><span class="i-code">0xe90a</span></div>
</div>
<div class="row">
<div title="Code: 0xe90a" class="the-icons span3"><i class="icon-shield"></i> <span class="i-name">icon-shield</span><span class="i-code">0xe90a</span></div>
<div title="Code: 0xe90b" class="the-icons span3"><i class="icon-extinguisher"></i> <span class="i-name">icon-extinguisher</span><span class="i-code">0xe90b</span></div>
<div title="Code: 0xe90c" class="the-icons span3"><i class="icon-bullseye"></i> <span class="i-name">icon-bullseye</span><span class="i-code">0xe90c</span></div>
<div title="Code: 0xe90d" class="the-icons span3"><i class="icon-resize-full"></i> <span class="i-name">icon-resize-full</span><span class="i-code">0xe90d</span></div>
<div title="Code: 0xe83d" class="the-icons span3"><i class="icon-split"></i> <span class="i-name">icon-split</span><span class="i-code">0xe83d</span></div>
</div>
<div class="row">
<div title="Code: 0xe83d" class="the-icons span3"><i class="icon-split"></i> <span class="i-name">icon-split</span><span class="i-code">0xe83d</span></div>
<div title="Code: 0xe8a7" class="the-icons span3"><i class="icon-target"></i> <span class="i-name">icon-target</span><span class="i-code">0xe8a7</span></div>
<div title="Code: 0xe829" class="the-icons span3"><i class="icon-layers"></i> <span class="i-name">icon-layers</span><span class="i-code">0xe829</span></div>
<div title="Code: 0xe90f" class="the-icons span3"><i class="icon-chart-bar"></i> <span class="i-name">icon-chart-bar</span><span class="i-code">0xe90f</span></div>
<div title="Code: 0xe913" class="the-icons span3"><i class="icon-link"></i> <span class="i-name">icon-link</span><span class="i-code">0xe913</span></div>
</div>
<div class="row">
<div title="Code: 0xe913" class="the-icons span3"><i class="icon-link"></i> <span class="i-name">icon-link</span><span class="i-code">0xe913</span></div>
<div title="Code: 0xe822" class="the-icons span3"><i class="icon-download"></i> <span class="i-name">icon-download</span><span class="i-code">0xe822</span></div>
<div title="Code: 0xe827" class="the-icons span3"><i class="icon-upload"></i> <span class="i-name">icon-upload</span><span class="i-code">0xe827</span></div>
<div title="Code: 0xe910" class="the-icons span3"><i class="icon-download-cloud"></i> <span class="i-name">icon-download-cloud</span><span class="i-code">0xe910</span></div>
<div title="Code: 0xe911" class="the-icons span3"><i class="icon-upload-cloud"></i> <span class="i-name">icon-upload-cloud</span><span class="i-code">0xe911</span></div>
</div>
<div class="row">
<div title="Code: 0xe911" class="the-icons span3"><i class="icon-upload-cloud"></i> <span class="i-name">icon-upload-cloud</span><span class="i-code">0xe911</span></div>
<div title="Code: 0xe912" class="the-icons span3"><i class="icon-share"></i> <span class="i-name">icon-share</span><span class="i-code">0xe912</span></div>
<div title="Code: 0xe841" class="the-icons span3"><i class="icon-hdd"></i> <span class="i-name">icon-hdd</span><span class="i-code">0xe841</span></div>
<div title="Code: 0xe89f" class="the-icons span3"><i class="icon-trash"></i> <span class="i-name">icon-trash</span><span class="i-code">0xe89f</span></div>
<div title="Code: 0xe8d7" class="the-icons span3"><i class="icon-folder"></i> <span class="i-name">icon-folder</span><span class="i-code">0xe8d7</span></div>
</div>
<div class="row">
<div title="Code: 0xe8d7" class="the-icons span3"><i class="icon-folder"></i> <span class="i-name">icon-folder</span><span class="i-code">0xe8d7</span></div>
<div title="Code: 0xe844" class="the-icons span3"><i class="icon-code"></i> <span class="i-name">icon-code</span><span class="i-code">0xe844</span></div>
<div title="Code: 0xe83b" class="the-icons span3"><i class="icon-comment"></i> <span class="i-name">icon-comment</span><span class="i-code">0xe83b</span></div>
<div title="Code: 0xe81e" class="the-icons span3"><i class="icon-folder-open"></i> <span class="i-name">icon-folder-open</span><span class="i-code">0xe81e</span></div>
<div title="Code: 0xe83c" class="the-icons span3"><i class="icon-comment-alt"></i> <span class="i-name">icon-comment-alt</span><span class="i-code">0xe83c</span></div>
<div title="Code: 0xe83e" class="the-icons span3"><i class="icon-chat"></i> <span class="i-name">icon-chat</span><span class="i-code">0xe83e</span></div>
</div>
<div class="row">
<div title="Code: 0xe891" class="the-icons span3"><i class="icon-left-circled"></i> <span class="i-name">icon-left-circled</span><span class="i-code">0xe891</span></div>
<div title="Code: 0xe81e" class="the-icons span3"><i class="icon-folder-open"></i> <span class="i-name">icon-folder-open</span><span class="i-code">0xe81e</span></div>
<div title="Code: 0xe893" class="the-icons span3"><i class="icon-up-circled"></i> <span class="i-name">icon-up-circled</span><span class="i-code">0xe893</span></div>
</div>
</div>
<div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>

BIN
public/res/libs/fontello/font/fontello.eot
View File

Binary file not shown.

9
public/res/libs/fontello/font/fontello.svg
View File

@ -82,7 +82,6 @@
<glyph glyph-name="retweet" unicode="&#xe943;" d="m714 11q0-8-5-13t-13-5h-535q-5 0-8 1t-5 4t-3 4t-2 7t0 6v335h-107q-15 0-25 11t-11 25q0 13 8 23l179 214q11 12 27 12t28-12l178-214q9-10 9-23q0-15-11-25t-25-11h-107v-214h321q9 0 14-6l89-108q4-6 4-11z m357 232q0-14-8-23l-179-214q-11-13-27-13t-27 13l-179 214q-8 9-8 23q0 14 10 25t26 11h107v214h-322q-9 0-14 7l-89 107q-4 5-4 11q0 7 5 12t13 6h536q4 0 7-1t5-4t3-5t2-6t1-7v-334h107q14 0 25-11t10-25z" horiz-adv-x="1071.4" />
<glyph glyph-name="keyboard" unicode="&#xe944;" d="m214 198v-53q0-9-9-9h-53q-9 0-9 9v53q0 9 9 9h53q9 0 9-9z m72 143v-53q0-9-9-9h-125q-9 0-9 9v53q0 9 9 9h125q9 0 9-9z m-72 143v-54q0-9-9-9h-53q-9 0-9 9v54q0 9 9 9h53q9 0 9-9z m572-286v-53q0-9-9-9h-482q-9 0-9 9v53q0 9 9 9h482q9 0 9-9z m-357 143v-53q0-9-9-9h-54q-9 0-9 9v53q0 9 9 9h54q9 0 9-9z m-72 143v-54q0-9-9-9h-53q-9 0-9 9v54q0 9 9 9h53q9 0 9-9z m214-143v-53q0-9-8-9h-54q-9 0-9 9v53q0 9 9 9h54q8 0 8-9z m-71 143v-54q0-9-9-9h-53q-9 0-9 9v54q0 9 9 9h53q9 0 9-9z m214-143v-53q0-9-9-9h-53q-9 0-9 9v53q0 9 9 9h53q9 0 9-9z m215-143v-53q0-9-9-9h-54q-9 0-9 9v53q0 9 9 9h54q9 0 9-9z m-286 286v-54q0-9-9-9h-54q-9 0-9 9v54q0 9 9 9h54q9 0 9-9z m143 0v-54q0-9-9-9h-54q-9 0-9 9v54q0 9 9 9h54q9 0 9-9z m143 0v-196q0-9-9-9h-125q-9 0-9 9v53q0 9 9 9h62v134q0 9 9 9h54q9 0 9-9z m71-420v500h-929v-500h929z m71 500v-500q0-29-21-50t-50-21h-929q-29 0-50 21t-21 50v500q0 30 21 51t50 21h929q30 0 50-21t21-51z" horiz-adv-x="1071.4" />
<glyph glyph-name="gamepad" unicode="&#xe849;" d="m464 243v71q0 8-5 13t-13 5h-107v107q0 8-5 13t-13 5h-71q-8 0-13-5t-5-13v-107h-107q-8 0-13-5t-5-13v-71q0-8 5-13t13-5h107v-107q0-8 5-13t13-5h71q8 0 13 5t5 13v107h107q8 0 13 5t5 13z m322-36q0 30-21 51t-51 21t-50-21t-21-51t21-50t50-21t51 21t21 50z m143 143q0 30-21 51t-51 20t-50-20t-21-51t21-50t50-21t51 21t21 50z m142-71q0-119-83-202t-202-84q-107 0-189 71h-123q-81-71-188-71q-119 0-202 84t-84 202t84 202t202 83h500q118 0 202-83t83-202z" horiz-adv-x="1071.4" />
<glyph glyph-name="chat" unicode="&#xe84b;" d="m786 421q0-77-53-143t-143-104t-197-38q-48 0-98 9q-70-49-155-72q-21-5-48-9h-2q-6 0-12 5t-6 12q-1 1-1 3t1 4t1 3l1 3t2 3t2 3t3 3t2 2q3 3 13 14t15 16t12 17t14 21t11 25q-69 40-108 98t-40 125q0 78 53 144t143 104t197 38t197-38t143-104t53-144z m214-142q0-67-40-126t-108-98q5-14 11-25t14-21t13-16t14-17t13-14q0 0 2-2t3-3t2-3t2-3l1-3t1-3t1-4t-1-3q-2-8-7-13t-13-4q-27 4-48 9q-85 23-155 72q-50-9-98-9q-151 0-263 74q32-3 49-3q90 0 172 25t148 72q69 52 107 119t37 141q0 43-13 85q72-39 114-99t42-128z" horiz-adv-x="1000" />
<glyph glyph-name="comment-empty" unicode="&#xe84c;" d="m500 636q-114 0-213-39t-157-105t-59-142q0-62 40-119t113-98l48-28l-15-54q-13-50-39-95q85 35 154 95l24 21l31-3q39-5 73-5q114 0 213 39t157 105t59 142t-59 142t-157 105t-213 39z m500-286q0-97-67-179t-182-130t-251-48q-39 0-81 4q-110-97-257-135q-27-7-63-12h-3q-8 0-15 6t-9 15v1q-2 2 0 7t1 5t2 5l4 5t4 5t4 5q4 5 17 19t20 22t17 22t18 28t15 33t15 42q-88 50-138 123t-51 157q0 97 67 179t182 130t251 48t251-48t182-130t67-179z" horiz-adv-x="1000" />
<glyph glyph-name="chat-empty" unicode="&#xe84d;" d="m393 636q-85 0-160-29t-118-79t-44-107q0-45 30-88t83-73l54-32l-19-46q19 11 34 21l25 18l30-6q43-8 85-8q85 0 159 29t118 79t44 106t-44 107t-118 79t-159 29z m0 71q106 0 197-38t143-104t53-144t-53-143t-143-104t-197-38q-48 0-98 9q-70-49-155-72q-21-5-48-9h-2q-6 0-12 5t-6 12q-1 1-1 3t1 4t1 3l1 3t2 3t2 3t3 3t2 2q3 3 13 14t15 16t12 17t14 21t11 25q-69 40-108 98t-40 125q0 78 53 144t143 104t197 38z m459-652q5-14 11-25t14-21t13-16t14-17t13-14q0 0 2-2t3-3t2-3t2-3l1-3t1-3t1-4t-1-3q-2-8-7-13t-13-4q-27 4-48 9q-85 23-155 72q-50-9-98-9q-151 0-263 74q32-3 49-3q90 0 172 25t148 72q69 52 107 119t37 141q0 43-13 85q72-39 114-99t42-128q0-67-40-126t-108-98z" horiz-adv-x="1000" />
<glyph glyph-name="bell" unicode="&#xe84e;" d="m473-96q0 8-9 8q-33 0-56 24t-24 57q0 9-9 9t-9-9q0-41 29-70t69-28q9 0 9 9z m-371 160h724q-91 101-137 230t-46 270q0 143-179 143t-178-143q0-141-46-270t-138-230z m827 0q0-29-22-50t-50-21h-250q0-59-42-101t-101-42t-101 42t-42 101h-250q-29 0-50 21t-21 50q106 90 160 222t54 278q0 92 54 146t147 66q-4 10-4 20q0 23 15 38t38 16t38-16t16-38q0-10-5-20q94-11 148-66t53-146q0-146 54-278t161-222z" horiz-adv-x="928.6" />
@ -164,9 +163,9 @@
<glyph glyph-name="left-hand" unicode="&#xe88e;" d="m768 64h18v357h-18q-20 0-38 7t-35 21t-28 25t-27 31q-1 1-2 2t-2 3t-3 2q-40 46-62 81q-8 13-21 38q-1 2-6 13t-11 20t-11 20t-12 17t-10 6q-40 0-64-17t-25-54q0-24 8-47t19-38t18-31t8-27h-321q-28 0-50-22t-22-50q0-29 22-50t50-21h185q-9-9-14-26t-6-31q0-39 30-67q-10-18-10-38t9-41t27-30q-2-13-2-31q0-47 27-70t75-23q47 0 102 18t109 35t93 18z m161 36q0 15-11 25t-25 11t-25-11t-11-25t11-25t25-11t25 11t11 25z m71 321v-357q0-29-21-50t-50-21h-161q-33 0-125-33q-106-39-176-39q-80 0-129 44t-48 121l0 3q-34 42-34 99q0 12 2 24q-19 32-21 67h-94q-59 0-101 42t-42 101q0 57 42 100t101 42h209q-13 34-13 72q0 68 46 105t115 37q21 0 39-9t30-28t23-35t21-40t18-35q20-30 56-72q1-1 8-9t10-12t12-12t13-13t13-10t13-8t12-2h161q29 0 50-21t21-51z" horiz-adv-x="1000" />
<glyph glyph-name="up-hand" unicode="&#xe88f;" d="m714-43q0 15-10 25t-25 11t-26-11t-10-25t10-25t26-11t25 11t10 25z m72 426q0 106-93 106q-15 0-32-3q-9 17-29 27t-41 9t-39-10q-27 30-66 30q-14 0-31-6t-26-14v185q0 29-22 50t-50 22q-28 0-50-22t-21-50v-321q-11 0-27 8t-31 19t-38 18t-47 8q-37 0-55-25t-17-64q0-13 78-50q25-14 36-21q36-22 81-62q45-40 59-57q32-38 32-78v-18h357v18q0 40 18 93t36 108t18 100z m71 3q0-74-38-179q-33-92-33-125v-161q0-29-21-50t-51-21h-357q-29 0-50 21t-21 50v161q0 6-3 12t-8 13t-10 13t-12 13t-12 12t-12 10t-10 8q-41 36-72 56q-11 7-34 18t-40 21t-36 23t-27 30t-10 39q0 70 37 115t106 46q38 0 71-13v209q0 58 43 101t100 42q58 0 101-42t42-101v-94q35-2 66-21q12 2 24 2q57 0 100-34q77 1 122-47t45-127z" horiz-adv-x="857.1" />
<glyph glyph-name="down-hand" unicode="&#xe890;" d="m786 314q0 47-18 102t-36 109t-18 93v18h-357v-18q0-20-7-38t-20-35t-26-28t-30-27q-5-4-8-7q-45-40-81-62q-12-8-38-21q-1-1-12-6t-20-11t-20-11t-17-12t-7-10q0-40 17-65t55-24q24 0 47 8t38 18t31 19t27 8v-321q0-28 21-50t50-22q29 0 50 22t22 50v184q25-19 57-19q39 0 66 30q18-11 39-11t41 10t29 27q14-2 32-2q47 0 70 27t23 75z m-72 429q0 14-10 25t-25 11t-26-11t-10-25t10-25t26-11t25 11t10 25z m143-427q0-79-43-128t-121-48l-3 0q-43-34-100-34q-12 0-24 2q-30-17-66-21v-94q0-59-42-101t-101-42q-58 0-100 42t-43 101v208q-30-12-71-12q-68 0-105 46t-38 115q0 21 10 39t27 30t36 23t40 21t34 18q31 20 72 56q2 1 10 8t12 10t12 12t12 13t10 13t8 13t3 12v160q0 30 21 51t50 21h357q30 0 51-21t21-51v-160q0-33 33-125q38-106 38-177z" horiz-adv-x="857.1" />
<glyph glyph-name="music" unicode="&#xe802;" d="m857 725v-625q0-28-19-50t-48-33t-58-18t-53-6t-54 6t-58 18t-48 33t-19 50t19 50t48 33t58 18t54 6q58 0 107-22v300l-429-132v-396q0-28-19-50t-48-33t-58-18t-53-6t-54 6t-58 18t-48 33t-19 50t19 50t48 34t58 17t54 6q58 0 107-21v539q0 17 10 32t28 19l464 143q7 3 16 3q22 0 38-16t15-38z" horiz-adv-x="857.1" />
<glyph glyph-name="left-circled" unicode="&#xe891;" d="m714 314v72q0 14-10 25t-25 10h-281l106 106q11 11 11 25t-11 25l-51 51q-10 10-25 10t-25-10l-202-202l-51-51q-10-10-10-25t10-25l51-51l202-202q10-10 25-10t25 10l51 51q10 10 10 25t-10 25l-106 106h281q14 0 25 10t10 25z m143 36q0-117-57-215t-156-156t-215-58t-216 58t-155 156t-58 215t58 215t155 156t216 58t215-58t156-156t57-215z" horiz-adv-x="857.1" />
<glyph glyph-name="right-circled" unicode="&#xe892;" d="m717 350q0 15-10 25l-51 51l-202 202q-10 10-25 10t-25-10l-51-51q-10-10-10-25t10-25l106-106h-280q-15 0-26-10t-10-25v-72q0-14 10-25t26-10h280l-106-106q-10-10-10-25t10-25l51-51q10-10 25-10t25 10l202 202l51 51q10 10 10 25z m140 0q0-117-57-215t-156-156t-215-58t-216 58t-155 156t-58 215t58 215t155 156t216 58t215-58t156-156t57-215z" horiz-adv-x="857.1" />
<glyph glyph-name="up-circled" unicode="&#xe893;" d="m717 351q0 15-11 25l-202 202l-50 50q-10 11-25 11t-26-11l-50-50l-202-202q-10-10-10-25t10-26l50-50q11-10 26-10t25 10l105 105v-280q0-14 11-25t25-11h71q15 0 25 11t11 25v280l105-105q11-11 26-11t25 11l50 50q11 11 11 26z m140-1q0-117-57-215t-156-156t-215-58t-216 58t-155 156t-58 215t58 215t155 156t216 58t215-58t156-156t57-215z" horiz-adv-x="857.1" />
<glyph glyph-name="music" unicode="&#xe802;" d="m857 725v-625q0-28-19-50t-48-33t-58-18t-53-6t-54 6t-58 18t-48 33t-19 50t19 50t48 33t58 18t54 6q58 0 107-22v300l-429-132v-396q0-28-19-50t-48-33t-58-18t-53-6t-54 6t-58 18t-48 33t-19 50t19 50t48 34t58 17t54 6q58 0 107-21v539q0 17 10 32t28 19l464 143q7 3 16 3q22 0 38-16t15-38z" horiz-adv-x="857.1" />
<glyph glyph-name="down-circled" unicode="&#xe894;" d="m717 349q0 16-11 26l-50 50q-10 10-25 10t-26-10l-105-105v280q0 15-11 25t-25 11h-71q-15 0-25-11t-11-25v-280l-105 105q-11 11-25 11t-26-11l-50-50q-10-10-10-26t10-25l202-202l50-50q11-10 26-10t25 10l50 50l202 202q11 10 11 25z m140 1q0-117-57-215t-156-156t-215-58t-216 58t-155 156t-58 215t58 215t155 156t216 58t215-58t156-156t57-215z" horiz-adv-x="857.1" />
<glyph glyph-name="cw" unicode="&#xe895;" d="m857 707v-250q0-14-10-25t-26-11h-250q-23 0-32 23q-10 22 7 38l77 77q-82 77-194 77q-58 0-111-23t-91-61t-62-91t-22-111t22-111t62-91t91-61t111-23q66 0 125 29t100 82q4 6 13 7q8 0 14-5l76-77q5-4 6-11t-5-13q-60-74-147-114t-182-41q-87 0-167 34t-136 92t-92 137t-34 166t34 166t92 137t136 92t167 34q82 0 158-31t137-88l72 72q16 18 39 8q22-9 22-33z" horiz-adv-x="857.1" />
<glyph glyph-name="ccw" unicode="&#xe896;" d="m857 350q0-87-34-166t-91-137t-137-92t-166-34q-96 0-183 41t-147 114q-4 6-4 13t5 11l76 77q6 5 14 5q9-1 13-7q41-53 100-82t126-29q58 0 110 23t92 61t61 91t22 111t-22 111t-61 91t-92 61t-110 23q-55 0-105-20t-90-57l77-77q17-16 8-38q-10-23-33-23h-250q-15 0-25 11t-11 25v250q0 24 22 33q22 10 39-8l72-72q60 57 137 88t159 31q87 0 166-34t137-92t91-137t34-166z" horiz-adv-x="857.1" />
@ -321,8 +320,10 @@
<glyph glyph-name="folder" unicode="&#xe8d7;" d="m0-52l0 715l139 0l68 90l217 0l68-90l508 0l0-715l-1000 0z" horiz-adv-x="1000" />
<glyph glyph-name="code" unicode="&#xe844;" d="m1000 849l500-500l-500-500l-154 154l346 346l-346 346z m-692-500l346-346l-154-154l-500 500l500 500l154-154z" horiz-adv-x="1500" />
<glyph glyph-name="comment" unicode="&#xe83b;" d="m1137 749v-532q0-41-29-70t-71-30h-168v-268l-267 268h-502q-41 0-70 30t-30 70v532q0 41 30 71t70 29h937q41 0 71-29t29-71z" horiz-adv-x="1137" />
<glyph glyph-name="comment-alt" unicode="&#xe83c;" d="m1179 385q0-126-79-233t-215-170t-296-62q-122 0-234 39l2-3l-357-107q44 59 71 126t31 106l4 38q-106 120-106 266q0 126 79 233t215 169t295 62t296-62t215-169t79-233z" horiz-adv-x="1179" />
<glyph glyph-name="chat" unicode="&#xe83e;" d="m1179 385q0-126-79-233t-215-170t-296-62q-122 0-234 39l2-3l-357-107q44 59 71 126t31 106l4 38q-106 120-106 266q0 126 79 233t215 169t295 62t296-62t215-169t79-233z m-250 0q0 29-21 50t-51 21q-29 0-50-21t-21-50q0-30 21-51t50-21q30 0 51 21t21 51z m-250 0q0 29-21 50t-51 21q-29 0-50-21t-21-50q0-30 21-51t50-21q30 0 51 21t21 51z m-250 0q0 29-21 50t-51 21q-29 0-50-21t-21-50q0-30 21-51t50-21q30 0 51 21t21 51z" horiz-adv-x="1179" />
<glyph glyph-name="folder-open" unicode="&#xe81e;" d="m1313 632h-1235q9 48 27 67q16 17 31 17h4q4-1 8-1q12 0 26 4q18 6 25 29l24 72q77 29 208 29q89 0 164-29l25-72q24-23 33-26t43-3h485q84 0 110-22q12-11 22-65z m78-164v-10l-68-523q-5-35-33-61t-65-25h-1058q-36 0-65 25t-34 61l-67 523q-1 3-1 10q0 33 23 55t55 21h1235q33 0 56-21t22-55z" horiz-adv-x="1391" />
<glyph glyph-name="left-circled" unicode="&#xe891;" d="m714 314v72q0 14-10 25t-25 10h-281l106 106q11 11 11 25t-11 25l-51 51q-10 10-25 10t-25-10l-202-202l-51-51q-10-10-10-25t10-25l51-51l202-202q10-10 25-10t25 10l51 51q10 10 10 25t-10 25l-106 106h281q14 0 25 10t10 25z m143 36q0-117-57-215t-156-156t-215-58t-216 58t-155 156t-58 215t58 215t155 156t216 58t215-58t156-156t57-215z" horiz-adv-x="857.1" />
<glyph glyph-name="up-circled" unicode="&#xe893;" d="m717 351q0 15-11 25l-202 202l-50 50q-10 11-25 11t-26-11l-50-50l-202-202q-10-10-10-25t10-26l50-50q11-10 26-10t25 10l105 105v-280q0-14 11-25t25-11h71q15 0 25 11t11 25v280l105-105q11-11 26-11t25 11l50 50q11 11 11 26z m140-1q0-117-57-215t-156-156t-215-58t-216 58t-155 156t-58 215t58 215t155 156t216 58t215-58t156-156t57-215z" horiz-adv-x="857.1" />
</font>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 140 KiB

After

Width:  |  Height:  |  Size: 140 KiB

BIN
public/res/libs/fontello/font/fontello.ttf
View File

Binary file not shown.

BIN
public/res/libs/fontello/font/fontello.woff
View File

Binary file not shown.

7
public/res/libs/prism-markdown.js
View File

@ -1,3 +1,4 @@
// Credit to https://editorially.com/
Prism.languages.md = (function() {
var urlPattern = /\b((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>\[\]'"]+|\([^\s()<>\[\]'"]*\))+(?:\([^\s()<>\[\]'"]*\)|[^\s`!()\[\]{}:'".,<>?«»“”‘’]))/gi;
@ -254,7 +255,7 @@ Prism.languages.md = (function() {
strong: md.strong,
em: md.em,
strike: md.strike,
conflict: /\/\/\//g,
conflict: /\/\//g,
comment: Prism.languages.markup.comment,
tag: Prism.languages.markup.tag,
entity: Prism.languages.markup.entity
@ -274,7 +275,7 @@ Prism.languages.md = (function() {
fn: md.fn,
link: md.link,
linkref: md.linkref,
conflict: /\/\/\//g,
conflict: /\/\//g,
};
md.strong.inside.rest = rest;
md.em.inside.rest = rest;
@ -285,7 +286,7 @@ Prism.languages.md = (function() {
strong: md.strong,
em: md.em,
strike: md.strike,
conflict: /\/\/\//g,
conflict: /\/\//g,
comment: Prism.languages.markup.comment,
tag: Prism.languages.markup.tag,
entity: Prism.languages.markup.entity

544
public/res/providers/gdriveProviderBuilder.js
View File

@ -10,10 +10,11 @@ define([
"settings",
"eventMgr",
"fileMgr",
"editor",
"helpers/googleHelper",
"text!html/dialogExportGdrive.html",
"text!html/dialogAutoSyncGdrive.html",
], function($, _, constants, utils, storage, logger, Provider, settings, eventMgr, fileMgr, googleHelper, dialogExportGdriveHTML, dialogAutoSyncGdriveHTML) {
], function($, _, constants, utils, storage, logger, Provider, settings, eventMgr, fileMgr, editor, googleHelper, dialogExportGdriveHTML, dialogAutoSyncGdriveHTML) {
return function(providerId, providerName, accountIndex) {
var accountId = 'google.gdrive' + accountIndex;
@ -280,269 +281,320 @@ define([
pagedownEditor = pagedownEditorParam;
});
var realtimeContext;
eventMgr.addListener('onContentChanged', function(aceEditorParam) {
});
// Realtime closure
(function() {
var realtimeContext;
// Start realtime synchronization
gdriveProvider.startRealtimeSync = function(fileDesc, syncAttributes) {
var context = {
fileDesc: fileDesc
};
realtimeContext = context;
googleHelper.loadRealtime(syncAttributes.id, fileDesc.content, accountId, function(err, doc) {
if(err || !doc) {
return;
}
// If user just switched to another document or file has just been
// reselected
if(context !== realtimeContext) {
return doc.close();
}
logger.log("Starting Google Drive realtime synchronization");
context.document = doc;
var model = doc.getModel();
context.model = realtimeString;
var realtimeString = model.getRoot().get('content');
context.string = realtimeString;
// Saves model content checksum
function updateContentState() {
syncAttributes.contentCRC = utils.crc32(realtimeString.getText());
utils.storeAttributes(syncAttributes);
}
var debouncedRefreshPreview = _.debounce(pagedownEditor.refreshPreview, 100);
// Listen to insert text events
realtimeString.addEventListener(gapi.drive.realtime.EventType.TEXT_INSERTED, function(e) {
if(aceEditor !== undefined && (isAceUpToDate === false || e.isLocal === false)) {
// Update ACE editor
var position = aceEditor.session.doc.indexToPosition(e.index);
aceEditor.session.insert(position, e.text);
isAceUpToDate = true;
}
// If modifications come down from a collaborator
if(e.isLocal === false) {
logger.log("Google Drive realtime document updated from server");
updateContentState();
aceEditor === undefined && debouncedRefreshPreview();
}
function toRealtimeDiscussion(context, discussion) {
var commentList = context.model.createList();
discussion.commentList && discussion.commentList.forEach(function(comment) {
commentList.push({
author: comment.author,
content: comment.content
});
});
// Listen to delete text events
realtimeString.addEventListener(gapi.drive.realtime.EventType.TEXT_DELETED, function(e) {
if(aceEditor !== undefined && (isAceUpToDate === false || e.isLocal === false)) {
// Update ACE editor
var range = (function(posStart, posEnd) {
return new Range(posStart.row, posStart.column, posEnd.row, posEnd.column);
})(aceEditor.session.doc.indexToPosition(e.index), aceEditor.session.doc.indexToPosition(e.index + e.text.length));
aceEditor.session.remove(range);
isAceUpToDate = true;
}
// If modifications come down from a collaborator
if(e.isLocal === false) {
logger.log("Google Drive realtime document updated from server");
updateContentState();
aceEditor === undefined && debouncedRefreshPreview();
}
});
doc.addEventListener(gapi.drive.realtime.EventType.DOCUMENT_SAVE_STATE_CHANGED, function(e) {
// Save success event
if(e.isPending === false && e.isSaving === false) {
logger.log("Google Drive realtime document successfully saved on server");
updateContentState();
}
var realtimeDiscussion = context.model.createMap({
discussionIndex: discussion.discussionIndex,
selectionStart: discussion.selectionStart,
selectionEnd: discussion.selectionEnd,
type: discussion.type,
commentList: commentList
});
return realtimeDiscussion;
}
// Try to merge offline modifications
var localContent = fileDesc.content;
var localContentChanged = syncAttributes.contentCRC != utils.crc32(localContent);
var remoteContent = realtimeString.getText();
var remoteContentCRC = utils.crc32(remoteContent);
var remoteContentChanged = syncAttributes.contentCRC != remoteContentCRC;
var fileContentChanged = localContent != remoteContent;
model.beginCompoundOperation('Open and merge');
if(fileContentChanged === true && localContentChanged === true) {
if(remoteContentChanged === true) {
// Conflict detected
fileMgr.createFile(fileDesc.title + " (backup)", localContent);
eventMgr.onMessage('Conflict detected on "' + fileDesc.title + '". A backup has been created locally.');
function fromRealtimeDiscussion(realtimeDiscussion) {
var discussion = {
discussionIndex: realtimeDiscussion.get('discussionIndex'),
selectionStart: realtimeDiscussion.get('selectionStart'),
selectionEnd: realtimeDiscussion.get('selectionEnd')
};
var type = realtimeDiscussion.get('type');
type && (discussion.type = type);
var commentList = realtimeDiscussion.get('discussionIndex').asArray();
commentList.length && (discussion.commentList = commentList);
return discussion;
}
function mergeDiscussion(localDiscussion, realtimeDiscussion, takeServer) {
if(!takeServer) {
realtimeDiscussion.set('selectionStart', localDiscussion.selectionStart);
realtimeDiscussion.set('selectionEnd', localDiscussion.selectionEnd);
}
function isInDiscussion(comment, commentList) {
return commentList.some(function(commentInDiscussion) {
if(comment.author == commentInDiscussion.author && comment.content == commentInDiscussion.content) {
return true;
}
});
}
var realtimeCommentList = realtimeDiscussion.get('commentList');
function checkLocalComment(comment, index) {
if(!isInDiscussion(comment, realtimeCommentList.asArray())) {
if(takeServer) {
localDiscussion.splice(index, 1);
return true;
}
else {
realtimeDiscussion.get('commentList').push(comment);
}
}
}
while(localDiscussion.commentList.some(checkLocalComment)) {}
function checkRealtimeComment(comment, index) {
if(!isInDiscussion(comment, localDiscussion.commentList)) {
if(!takeServer) {
realtimeCommentList.remove(index);
return true;
}
else {
localDiscussion.commentList.push(comment);
}
}
}
while(realtimeCommentList.asArray().some(checkRealtimeComment)) {}
}
function mergeDiscussionList(context, takeServer) {
var localDiscussionList = context.fileDesc.discussionList;
_.each(localDiscussionList, function(localDiscussion) {
var realtimeDiscussion = context.discussionList.get(localDiscussion.discussionIndex);
if(realtimeDiscussion) {
mergeDiscussion(localDiscussion, realtimeDiscussion, takeServer);
}
else {
// Add local modifications if no collaborators change
realtimeString.setText(localContent);
realtimeDiscussion = toRealtimeDiscussion(context, localDiscussion);
context.discussionList.set(localDiscussion.discussionIndex, realtimeDiscussion);
}
}
// Update content state according to collaborators changes
if(remoteContentChanged === true) {
logger.log("Google Drive realtime document updated from server");
aceEditor !== undefined && aceEditor.setValue(remoteContent, -1);
updateContentState();
aceEditor === undefined && debouncedRefreshPreview();
}
var realtimeDiscussionList = model.getRoot().get('discussionList');
context.discussionList = realtimeDiscussionList;
if(!realtimeDiscussionList) {
realtimeDiscussionList = model.createMap();
model.getRoot().set('discussionList', realtimeDiscussionList);
}
mergeDiscussionList(context, remoteContentChanged === true);
model.endCompoundOperation();
// Save undo/redo buttons default actions
undoExecute = pagedownEditor.uiManager.buttons.undo.execute;
redoExecute = pagedownEditor.uiManager.buttons.redo.execute;
setUndoRedoButtonStates = pagedownEditor.uiManager.setUndoRedoButtonStates;
// Set temporary actions for undo/redo buttons
pagedownEditor.uiManager.buttons.undo.execute = function() {
if(model.canUndo) {
// This flag is used to avoid replaying editor's own
// modifications (assuming it's synchronous)
isAceUpToDate = false;
model.undo();
}
};
pagedownEditor.uiManager.buttons.redo.execute = function() {
if(model.canRedo) {
// This flag is used to avoid replaying editor's own
// modifications (assuming it's synchronous)
isAceUpToDate = false;
model.redo();
}
};
// Add event handler for model's UndoRedoStateChanged events
pagedownEditor.uiManager.setUndoRedoButtonStates = function() {
setTimeout(function() {
pagedownEditor.uiManager.setButtonState(pagedownEditor.uiManager.buttons.undo, model.canUndo);
pagedownEditor.uiManager.setButtonState(pagedownEditor.uiManager.buttons.redo, model.canRedo);
}, 50);
};
pagedownEditor.uiManager.setUndoRedoButtonStates();
model.addEventListener(gapi.drive.realtime.EventType.UNDO_REDO_STATE_CHANGED, function() {
pagedownEditor.uiManager.setUndoRedoButtonStates();
});
}, function(err) {
logger.error(err);
if(err.type == "token_refresh_required") {
googleHelper.refreshGdriveToken(accountId);
}
else if(err.type == "not_found") {
eventMgr.onError('"' + fileDesc.title + '" has been removed from ' + providerName + '.');
fileDesc.removeSyncLocation(syncAttributes);
eventMgr.onSyncRemoved(fileDesc, syncAttributes);
gdriveProvider.stopRealtimeSync();
}
else if(err.isFatal) {
eventMgr.onError('An error has forced real time synchronization to stop.');
gdriveProvider.stopRealtimeSync();
}
});
};
function mergeDiscussion(localDiscussion, realtimeDiscussion, takeServer) {
if(takeServer) {
localDiscussion.selectionStart = realtimeDiscussion.get('selectionStart');
localDiscussion.selectionEnd = realtimeDiscussion.get('selectionEnd');
}
else {
realtimeDiscussion.set('selectionStart', localDiscussion.selectionStart);
realtimeDiscussion.set('selectionEnd', localDiscussion.selectionEnd);
}
function isCommentInDiscussion(comment, commentList) {
return commentList.some(function(commentInDiscussion) {
return comment.author == commentInDiscussion.author && comment.content == commentInDiscussion.content;
context.discussionList.keys().forEach(function(discussionIndex) {
var realtimeDiscussion = context.discussionList.get(discussionIndex);
var localDiscussion = localDiscussionList[discussionIndex];
if(localDiscussion) {
mergeDiscussion(localDiscussion, realtimeDiscussion, takeServer);
}
else {
var discussion = {
discussionIndex: discussionIndex,
selectionStart: realtimeDiscussion.get('selectionStart'),
selectionEnd: realtimeDiscussion.get('selectionEnd'),
commentList: realtimeDiscussion.get('commentList').asArray()
};
localDiscussionList[discussionIndex] = discussion;
eventMgr.onCommentsChanged(context.fileDesc);
}
});
context.fileDesc.discussionList = localDiscussionList; // Write in localStorage
}
var realtimeCommentList = realtimeDiscussion.get('commentList').asArray();
localDiscussion.commentList.forEach(function(comment) {
if(!isCommentInDiscussion(comment, realtimeCommentList)) {
realtimeDiscussion.get('commentList').push(comment);
function updateCRCs() {
var context = realtimeContext;
if(!context) {
return;
}
});
realtimeCommentList.forEach(function(comment) {
if(!isCommentInDiscussion(comment, localDiscussion.commentList)) {
localDiscussion.commentList.push(comment);
context.syncAttributes.contentCRC = utils.crc32(context.string.getText());
var discussionList = {};
context.discussionList.keys().forEach(function(discussionIndex) {
var discussion = fromRealtimeDiscussion(context.discussionList.get(discussionIndex));
discussionList[discussion.discussionIndex] = discussion;
});
context.syncAttributes.discussionListCRC = utils.crc32(JSON.stringify(discussionList));
utils.storeAttributes(context.syncAttributes);
}
var onChanges = _.debounce(function() {
var context = realtimeContext;
if(!context) {
return;
}
});
}
context.isServerChange = false;
}, 0);
function createRealtimeDiscussion(context, discussion) {
var commentList = context.model.createList(discussion.commentList);
var realtimeDiscussion = context.model.createMap({
selectionStart: discussion.selectionStart,
selectionEnd: discussion.selectionEnd,
commentList: commentList
});
context.discussionList.set(discussion.discussionIndex, realtimeDiscussion);
}
eventMgr.addListener('onContentChanged', onChanges);
eventMgr.addListener('onDiscussionCreated', onChanges);
eventMgr.addListener('onDiscussionRemoved', onChanges);
eventMgr.addListener('onCommentsChanged', onChanges);
function mergeDiscussionList(context, takeServer) {
var localDiscussionList = context.fileDesc.discussionList;
_.each(localDiscussionList, function(localDiscussion) {
var realtimeDiscussion = context.discussionList.get(localDiscussion.discussionIndex);
if(realtimeDiscussion) {
mergeDiscussion(localDiscussion, realtimeDiscussion, takeServer);
}
else {
createRealtimeDiscussion(context, localDiscussion);
}
});
context.discussionList.keys().forEach(function(discussionIndex) {
var localDiscussion = localDiscussionList[discussionIndex];
var realtimeDiscussion = context.discussionList.get(discussionIndex);
if(localDiscussion) {
mergeDiscussion(localDiscussion, realtimeDiscussion, takeServer);
}
else {
var discussion = {
discussionIndex: discussionIndex,
selectionStart: realtimeDiscussion.get('selectionStart'),
selectionEnd: realtimeDiscussion.get('selectionEnd'),
commentList: realtimeDiscussion.get('commentList').asArray()
// Start realtime synchronization
gdriveProvider.startRealtimeSync = function(fileDesc, syncAttributes) {
var context = {
fileDesc: fileDesc,
syncAttributes: syncAttributes
};
realtimeContext = context;
googleHelper.loadRealtime(syncAttributes.id, fileDesc.content, accountId, function(err, doc) {
if(err || !doc) {
return;
}
// If user just switched to another document or file has just been
// reselected
if(context !== realtimeContext) {
return doc.close();
}
logger.log("Starting Google Drive realtime synchronization");
context.document = doc;
var model = doc.getModel();
context.model = model;
var realtimeString = model.getRoot().get('content');
context.string = realtimeString;
// Saves model content checksum
function updateContentState() {
syncAttributes.contentCRC = utils.crc32(realtimeString.getText());
utils.storeAttributes(syncAttributes);
}
var debouncedRefreshPreview = _.debounce(pagedownEditor.refreshPreview, 100);
// Listen to insert text events
realtimeString.addEventListener(gapi.drive.realtime.EventType.TEXT_INSERTED, function(evt) {
if(aceEditor !== undefined && (isAceUpToDate === false || e.isLocal === false)) {
// Update ACE editor
var position = aceEditor.session.doc.indexToPosition(e.index);
aceEditor.session.insert(position, e.text);
isAceUpToDate = true;
}
// If modifications come down from a collaborator
if(e.isLocal === false) {
logger.log("Google Drive realtime document updated from server");
updateContentState();
aceEditor === undefined && debouncedRefreshPreview();
}
});
// Listen to delete text events
realtimeString.addEventListener(gapi.drive.realtime.EventType.TEXT_DELETED, function(e) {
if(aceEditor !== undefined && (isAceUpToDate === false || e.isLocal === false)) {
// Update ACE editor
var range = (function(posStart, posEnd) {
return new Range(posStart.row, posStart.column, posEnd.row, posEnd.column);
})(aceEditor.session.doc.indexToPosition(e.index), aceEditor.session.doc.indexToPosition(e.index + e.text.length));
aceEditor.session.remove(range);
isAceUpToDate = true;
}
// If modifications come down from a collaborator
if(e.isLocal === false) {
logger.log("Google Drive realtime document updated from server");
updateContentState();
aceEditor === undefined && debouncedRefreshPreview();
}
});
doc.addEventListener(gapi.drive.realtime.EventType.DOCUMENT_SAVE_STATE_CHANGED, function(e) {
// Save success event
if(e.isPending === false && e.isSaving === false) {
logger.log("Google Drive realtime document successfully saved on server");
updateContentState();
}
});
// Try to merge offline modifications
var localContent = fileDesc.content;
var localContentChanged = syncAttributes.contentCRC != utils.crc32(localContent);
var remoteContent = realtimeString.getText();
var remoteContentCRC = utils.crc32(remoteContent);
var remoteContentChanged = syncAttributes.contentCRC != remoteContentCRC;
var fileContentChanged = localContent != remoteContent;
model.beginCompoundOperation('Open and merge');
if(fileContentChanged === true && localContentChanged === true) {
if(remoteContentChanged === true) {
// Conflict detected
fileMgr.createFile(fileDesc.title + " (backup)", localContent);
eventMgr.onMessage('Conflict detected on "' + fileDesc.title + '". A backup has been created locally.');
}
else {
// Add local modifications if no collaborators change
realtimeString.setText(localContent);
}
}
// Update content state according to collaborators changes
if(remoteContentChanged === true) {
logger.log("Google Drive realtime document updated from server");
aceEditor !== undefined && aceEditor.setValue(remoteContent, -1);
updateContentState();
aceEditor === undefined && debouncedRefreshPreview();
}
var realtimeDiscussionList = model.getRoot().get('discussionList');
if(!realtimeDiscussionList) {
realtimeDiscussionList = model.createMap();
model.getRoot().set('discussionList', realtimeDiscussionList);
}
context.discussionList = realtimeDiscussionList;
mergeDiscussionList(context, remoteContentChanged === true);
model.endCompoundOperation();
// Save undo/redo buttons default actions
undoExecute = pagedownEditor.uiManager.buttons.undo.execute;
redoExecute = pagedownEditor.uiManager.buttons.redo.execute;
setUndoRedoButtonStates = pagedownEditor.uiManager.setUndoRedoButtonStates;
// Set temporary actions for undo/redo buttons
pagedownEditor.uiManager.buttons.undo.execute = function() {
if(model.canUndo) {
// This flag is used to avoid replaying editor's own
// modifications (assuming it's synchronous)
isAceUpToDate = false;
model.undo();
}
};
localDiscussionList[discussionIndex] = discussion;
eventMgr.onCommentsChanged(context.fileDesc);
pagedownEditor.uiManager.buttons.redo.execute = function() {
if(model.canRedo) {
// This flag is used to avoid replaying editor's own
// modifications (assuming it's synchronous)
isAceUpToDate = false;
model.redo();
}
};
// Add event handler for model's UndoRedoStateChanged events
pagedownEditor.uiManager.setUndoRedoButtonStates = function() {
setTimeout(function() {
pagedownEditor.uiManager.setButtonState(pagedownEditor.uiManager.buttons.undo, model.canUndo);
pagedownEditor.uiManager.setButtonState(pagedownEditor.uiManager.buttons.redo, model.canRedo);
}, 50);
};
pagedownEditor.uiManager.setUndoRedoButtonStates();
model.addEventListener(gapi.drive.realtime.EventType.UNDO_REDO_STATE_CHANGED, function() {
pagedownEditor.uiManager.setUndoRedoButtonStates();
});
}, function(err) {
logger.error(err);
if(err.type == "token_refresh_required") {
googleHelper.refreshGdriveToken(accountId);
}
else if(err.type == "not_found") {
eventMgr.onError('"' + fileDesc.title + '" has been removed from ' + providerName + '.');
fileDesc.removeSyncLocation(syncAttributes);
eventMgr.onSyncRemoved(fileDesc, syncAttributes);
gdriveProvider.stopRealtimeSync();
}
else if(err.isFatal) {
eventMgr.onError('An error has forced real time synchronization to stop.');
gdriveProvider.stopRealtimeSync();
}
});
};
// Stop realtime synchronization
gdriveProvider.stopRealtimeSync = function() {
logger.log("Stopping Google Drive realtime synchronization");
if(realtimeContext !== undefined) {
realtimeContext.document && realtimeContext.document.close();
realtimeContext = undefined;
}
});
context.fileDesc.discussionList = localDiscussionList; // Write in localStorage
}
eventMgr.addListener('onCommentsChanged', function(fileDesc, discussion) {
if(realtimeContext === undefined || realtimeContext.fileDesc !== fileDesc) {
return;
}
if(!realtimeContext.discussionList.has(discussion.discussionIndex)) {
createRealtimeDiscussion(realtimeContext, discussion);
}
});
// Stop realtime synchronization
gdriveProvider.stopRealtimeSync = function() {
logger.log("Stopping Google Drive realtime synchronization");
if(realtimeContext !== undefined) {
realtimeContext.document && realtimeContext.document.close();
realtimeContext = undefined;
}
if(setUndoRedoButtonStates !== undefined) {
// Set back original undo/redo actions
pagedownEditor.uiManager.buttons.undo.execute = undoExecute;
pagedownEditor.uiManager.buttons.redo.execute = redoExecute;
pagedownEditor.uiManager.setUndoRedoButtonStates = setUndoRedoButtonStates;
pagedownEditor.uiManager.setUndoRedoButtonStates();
}
};
if(setUndoRedoButtonStates !== undefined) {
// Set back original undo/redo actions
pagedownEditor.uiManager.buttons.undo.execute = undoExecute;
pagedownEditor.uiManager.buttons.redo.execute = redoExecute;
pagedownEditor.uiManager.setUndoRedoButtonStates = setUndoRedoButtonStates;
pagedownEditor.uiManager.setUndoRedoButtonStates();
}
};
})();
// Initialize the AutoSync dialog fields
gdriveProvider.setAutosyncDialogConfig = function() {
var config = gdriveProvider.autosyncConfig;

8
public/res/styles/base.less
View File

@ -309,6 +309,14 @@ kbd {
}
}
.icon-comment-alt, .icon-chat {
font-size: 92%;
&:before {
margin-left: 0.1em;
margin-right: 0.4em;
}
}
.icon-file {
font-size: 104%;
margin-left: 0;

25
public/res/styles/main.less
View File

@ -129,10 +129,10 @@
@alert-border-radius: 0;
@label-warning-bg: spin(darken(@logo-yellow, 4%), -6);
@label-danger-bg: spin(darken(@logo-orange, 4%), -4);
@state-warning-text: spin(darken(@logo-yellow, 18%), -6);
@state-warning-text: spin(darken(@logo-yellow, 15%), -6);
@state-warning-bg: fade(spin(@logo-yellow, -6), 12%);
@state-warning-border: fade(spin(@logo-yellow, -6), 24%);
@state-danger-text: spin(darken(@logo-orange, 20%), -4);
@state-danger-text: spin(darken(@logo-orange, 18%), -4);
@state-danger-bg: fade(spin(@logo-orange, -4), 10%);
@state-danger-border: fade(spin(@logo-orange, -4), 20%);
@ -451,19 +451,17 @@ a {
.button-open-discussion {
&.some {
color: lighten(@alert-warning-text, 10%);
color: lighten(@alert-warning-text, 8%);
&:hover,
&:focus {
.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
background-color: @alert-warning-bg !important;
//color: @alert-warning-text;
}
}
&.replied {
color: lighten(@alert-danger-text, 10%);
color: lighten(@alert-danger-text, 8%);
&:hover,
&:focus {
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
background-color: @alert-danger-bg !important;
//color: @alert-danger-text;
}
}
}
@ -1084,13 +1082,10 @@ a {
top: 0;
.discussion {
font-size: 17px;
&:before {
margin-right: 0;
}
&.new {
display: none;
color: fade(@tertiary-color, 20%);
&:hover, &.active, &.active:hover {
display: inline-block;
color: fade(@tertiary-color, 35%) !important;
}
}
@ -1108,6 +1103,9 @@ a {
}
&.icon-split {
font-size: 22px;
&:before {
margin-right: 0;
}
}
position: absolute;
cursor: pointer;
@ -1116,9 +1114,6 @@ a {
}
}
}
&.has-selection > .editor-margin .discussion.new {
display: inline-block;
}
.comment-highlight {
background-color: fade(@label-warning-bg, 30%);