Small improvements

This commit is contained in:
RainLoop Team 2015-07-29 22:13:49 +04:00
parent 5123841540
commit c99a46a118
29 changed files with 459 additions and 26 deletions

4
.gitignore vendored
View file

@ -5,6 +5,10 @@
/npm-debug.log
/rainloop.sublime-project
/rainloop.sublime-workspace
/rainloop/v/0.0.0/static/fonts/*
!/rainloop/v/0.0.0/static/fonts/.gitempty
/rainloop/v/0.0.0/static/svg/*
!/rainloop/v/0.0.0/static/svg/.gitempty
/rainloop/v/0.0.0/static/css/*.css
/rainloop/v/0.0.0/static/js/**/*.js
/node_modules

View file

@ -283,6 +283,11 @@
AbstractApp.prototype.bootstart = function ()
{
if (window.console && Utils.isFunc(window.console.log))
{
window.console.log('Psss, hacker! There is nothing interesting :)');
}
Events.pub('rl.bootstart');
var
@ -293,10 +298,11 @@
ko.components.register('SaveTrigger', require('Component/SaveTrigger'));
ko.components.register('Input', require('Component/Input'));
ko.components.register('Select', require('Component/Select'));
ko.components.register('TextArea', require('Component/TextArea'));
ko.components.register('Radio', require('Component/Radio'));
ko.components.register('TextArea', require('Component/TextArea'));
ko.components.register('x-script', require('Component/Script'));
ko.components.register('svg-icon', require('Component/SvgIcon'));
if (/**false && /**/Settings.settingsGet('MaterialDesign') && Globals.bAnimationSupported)
{

35
dev/Component/SvgIcon.js Normal file
View file

@ -0,0 +1,35 @@
(function () {
'use strict';
var
$ = require('$'),
sUrl = null,
getUtl = function () {
if (!sUrl)
{
sUrl = 'rainloop/v/' + ($('#rlAppVersion').attr('content') || '0.0.0') + '/static/css/svg/icons.svg';
}
return sUrl;
}
;
module.exports = {
viewModel: {
createViewModel: function(oParams, oComponentInfo) {
var icon = oParams.icon || 'null';
if (oComponentInfo.element && oComponentInfo.element)
{
$(oComponentInfo.element).replaceWith(
'<svg class="svg-icon svg-icon-' + icon + '"><use xlink:href="' + getUtl() + '#svg-icon-' + icon + '"></use></svg>');
}
}
},
'template': '<b></b>'
};
}());

View file

@ -43,6 +43,9 @@
this.actionValueSecond = ko.observable('');
this.actionValueThird = ko.observable('');
this.actionValueFourth = ko.observable('');
this.actionValueFourth.error = ko.observable(false);
this.actionMarkAsRead = ko.observable(false);
this.actionKeep = ko.observable(true);
@ -55,6 +58,8 @@
this.actionValue.error(false);
this.actionValueSecond('');
this.actionValueThird('');
this.actionValueFourth('');
this.actionValueFourth.error(false);
}, this);
var fGetRealFolderName = function (sFolderFullNameRaw) {
@ -189,6 +194,14 @@
return false;
}
if (Enums.FiltersAction.Vacation === this.actionType() &&
('' === this.actionValueFourth() || -1 === this.actionValueFourth().indexOf('@'))
)
{
this.actionValueFourth.error(true);
return false;
}
this.name.error(false);
this.actionValue.error(false);
@ -209,6 +222,7 @@
'ActionValue': this.actionValue(),
'ActionValueSecond': this.actionValueSecond(),
'ActionValueThird': this.actionValueThird(),
'ActionValueFourth': this.actionValueFourth(),
'ActionType': this.actionType(),
'Stop': this.actionNoStop() ? '0' : '1',
@ -228,6 +242,11 @@
Utils.delegateRunOnDestroy(oConditionToDelete);
};
FilterModel.prototype.setRecipients = function ()
{
this.actionValueFourth(require('Stores/User/Account').accountsEmails().join(', '));
};
FilterModel.prototype.parse = function (oItem)
{
var bResult = false;
@ -255,6 +274,7 @@
this.actionValue(Utils.pString(oItem['ActionValue']));
this.actionValueSecond(Utils.pString(oItem['ActionValueSecond']));
this.actionValueThird(Utils.pString(oItem['ActionValueThird']));
this.actionValueFourth(Utils.pString(oItem['ActionValueFourth']));
this.actionNoStop(!oItem['Stop']);
this.actionKeep(!!oItem['Keep']);
@ -288,6 +308,7 @@
oClone.actionValueSecond(this.actionValueSecond());
oClone.actionValueThird(this.actionValueThird());
oClone.actionValueFourth(this.actionValueFourth());
oClone.actionKeep(this.actionKeep());
oClone.actionNoStop(this.actionNoStop());

View file

@ -10,5 +10,10 @@
.button-delete {
cursor: pointer;
}
.setRecipientsBtn {
margin-top: -2px;
margin-left: 5px;
}
}
}

View file

@ -17,8 +17,13 @@
}
.open-pgp-key-img {
font-size: 12px;
margin-right: 5px;
margin-right: 10px;
.svg-icon {
width: 12px;
height: 12px;
}
}
.open-pgp-key-id, .open-pgp-key-user {
@ -49,7 +54,11 @@
.delete-open-pgp-key, .view-open-pgp-key {
cursor: pointer;
opacity: 0.5;
opacity: 0.7;
&:hover {
opacity: 0.9;
}
}
}
}

View file

@ -67,6 +67,10 @@ select {
width: 223px;
}
.btn .svg-icon {
vertical-align: middle;
}
.btn-small.btn-small-small {
padding: 3px 9px;
font-size: 11px;

View file

@ -69,3 +69,22 @@
}
}
}
svg-icon {
display: none;
}
.svg-icon {
border: 0;
outline: 0;
height: 16px;
width: 16px;
display: inline-block;
fill: #333;
&.svg-icon-archive {
height: 14px;
width: 14px;
}
}

View file

@ -30,7 +30,7 @@
var self = this;
this.optionsCaption = Translator.i18n('@i18n/Add a public key');
this.optionsCaption = Translator.i18n('PGP_NOTIFICATIONS/ADD_A_PUBLICK_KEY');
this.notification = ko.observable('');
@ -208,6 +208,10 @@
}, 10);
}
else
{
self.submitRequest(false);
}
return bResult;

View file

@ -494,12 +494,21 @@ gulp.task('fontastic-fonts:clear', function() {
return cleanDir('rainloop/v/' + cfg.devVersion + '/static/css/fonts/rainloop.*');
});
gulp.task('fontastic-svg:clear', function() {
return cleanDir('rainloop/v/' + cfg.devVersion + '/static/css/svg/*.svg');
});
gulp.task('fontastic-fonts:copy', ['fontastic-fonts:clear'], function() {
return gulp.src('vendors/fontastic/fonts/rainloop.*')
.pipe(gulp.dest('rainloop/v/' + cfg.devVersion + '/static/css/fonts'));
});
gulp.task('fontastic', ['fontastic-fonts:copy']);
gulp.task('fontastic-svg:copy', ['fontastic-svg:clear'], function() {
return gulp.src('vendors/fontastic/svg/*.svg')
.pipe(gulp.dest('rainloop/v/' + cfg.devVersion + '/static/css/svg'));
});
gulp.task('fontastic', ['fontastic-fonts:copy', 'fontastic-svg:copy']);
gulp.task('ckeditor:clear', function() {
return cleanDir('rainloop/v/' + cfg.devVersion + '/static/ckeditor');

View file

@ -49,6 +49,11 @@ class Filter
*/
private $sActionValueThird;
/**
* @var string
*/
private $sActionValueFourth;
/**
* @var bool
*/
@ -89,6 +94,7 @@ class Filter
$this->sActionValue = '';
$this->sActionValueSecond = '';
$this->sActionValueThird = '';
$this->sActionValueFourth = '';
$this->bMarkAsRead = false;
$this->bKeep = true;
@ -167,6 +173,14 @@ class Filter
return $this->sActionValueThird;
}
/**
* @return string
*/
public function ActionValueFourth()
{
return $this->sActionValueFourth;
}
/**
* @return bool
*/
@ -236,6 +250,7 @@ class Filter
$this->sActionValue = isset($aFilter['ActionValue']) ? $aFilter['ActionValue'] : '';
$this->sActionValueSecond = isset($aFilter['ActionValueSecond']) ? $aFilter['ActionValueSecond'] : '';
$this->sActionValueThird = isset($aFilter['ActionValueThird']) ? $aFilter['ActionValueThird'] : '';
$this->sActionValueFourth = isset($aFilter['ActionValueFourth']) ? $aFilter['ActionValueFourth'] : '';
$this->bKeep = isset($aFilter['Keep']) ? '1' === (string) $aFilter['Keep'] : true;
$this->bStop = isset($aFilter['Stop']) ? '1' === (string) $aFilter['Stop'] : true;
@ -276,6 +291,7 @@ class Filter
'ActionValue' => $this->ActionValue(),
'ActionValueSecond' => $this->ActionValueSecond(),
'ActionValueThird' => $this->ActionValueThird(),
'ActionValueFourth' => $this->ActionValueFourth(),
'Keep' => $this->Keep(),
'Stop' => $this->Stop(),
'MarkAsRead' => $this->MarkAsRead()

View file

@ -350,6 +350,7 @@ class SieveStorage implements \RainLoop\Providers\Filters\FiltersInterface
$sValue = \trim($oFilter->ActionValue());
$sValueSecond = \trim($oFilter->ActionValueSecond());
$sValueThird = \trim($oFilter->ActionValueThird());
$sValueFourth = \trim($oFilter->ActionValueFourth());
if (0 < \strlen($sValue))
{
$aCapa['vacation'] = true;
@ -367,8 +368,24 @@ class SieveStorage implements \RainLoop\Providers\Filters\FiltersInterface
$iDays = (int) $sValueThird;
}
$aResult[] = $sTab.'vacation :days '.$iDays.' '.$sSubject.'"'.$this->quote($sValue).'";';
$sAddresses = '';
if (0 < \strlen($sValueFourth))
{
$self = $this;
$aAddresses = \explode(',', $sValueFourth);
$aAddresses = \array_filter(\array_map(function ($sEmail) use ($self) {
$sEmail = \trim($sEmail);
return 0 < \strlen($sEmail) ? '"'.$self->quote($sEmail).'"' : '';
}, $aAddresses), 'strlen');
if (0 < \count($aAddresses))
{
$sAddresses = ':addresses ['.\implode(', ', $aAddresses).'] ';
}
}
$aResult[] = $sTab.'vacation :days '.$iDays.' '.$sAddresses.$sSubject.'"'.$this->quote($sValue).'";';
if ($oFilter->Stop())
{
$aResult[] = $sTab.'stop;';
@ -523,7 +540,7 @@ class SieveStorage implements \RainLoop\Providers\Filters\FiltersInterface
*
* @return string
*/
private function quote($sValue)
public function quote($sValue)
{
return \str_replace(array('\\', '"'), array('\\\\', '\\"'), \trim($sValue));
}

View file

@ -266,6 +266,7 @@ class Service
'{{BaseAppOpenPgpScriptLink}}' => $aData['OpenPgpJsLink'],
'{{BaseAppMainCommonScriptLink}}' => $aData['AppJsCommonLink'],
'{{BaseAppMainScriptLink}}' => $aData['AppJsLink'],
'{{BaseVersion}}' => APP_VERSION,
'{{BaseDir}}' => 'ltr'
// '{{BaseDir}}' => \in_array($aData['Language'], array('ar', 'he', 'ur')) ? 'rtl' : 'ltr'
);

View file

@ -19,6 +19,7 @@
<meta name="Author" content="RainLoop Team" />
<meta name="robots" content="noindex,nofollow,noodp" />
<meta name="google" content="notranslate" />
<meta name="app-version" content="{{BaseVersion}}" id="rlAppVersion" />
<title></title>
<style>#rl-content{display:none;}</style>
<link rel="shortcut icon" href="{{BaseAppFaviconPngFile}}" type="image/png" />

View file

@ -31,7 +31,7 @@
<div class="btn-group" data-bind="visible: allowMessageListActions">
<a class="btn first btn-dark-disabled-border button-archive" data-tooltip-join="top"
data-bind="visible: isArchiveVisible, command: archiveCommand, tooltip: 'MESSAGE_LIST/BUTTON_ARCHIVE'">
<i class="icon-archive"></i>
<svg-icon params="icon: 'archive'"></svg-icon>
</a>
<a class="btn btn-dark-disabled-border button-spam" data-tooltip-join="top"
data-bind="visible: isSpamVisible, command: spamCommand, tooltip: 'MESSAGE_LIST/BUTTON_SPAM',
@ -46,7 +46,7 @@
<a class="btn last btn-dark-disabled-border button-delete" data-tooltip-join="top"
data-bind="command: deleteCommand, tooltip: 'MESSAGE_LIST/BUTTON_DELETE',
css: {'first': !isArchiveVisible() && !isSpamVisible() && !isUnSpamVisible()}">
<i class="icon-trash"></i>
<svg-icon params="icon: 'trash'"></svg-icon>
<!--<span data-bind="text: printableMessageCountForDeletion()"></span>-->
</a>
</div>

View file

@ -40,7 +40,7 @@
</div>
<br />
<a class="btn" data-bind="click: addCondition, i18nInit: true">
<i class="icon-plus"></i>
<svg-icon params="icon: 'plus'"></svg-icon>
&nbsp;&nbsp;
<span class="i18n" data-i18n="POPUPS_FILTER/BUTTON_ADD_CONDITION"></span>
</a>

View file

@ -9,7 +9,7 @@
<div class="row" data-bind="visible: inited() && !serverError()">
<div class="span5">
<a class="btn" data-bind="click: addFilter">
<i class="icon-plus"></i>
<svg-icon params="icon: 'plus'"></svg-icon>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_FILTERS/BUTTON_ADD_FILTER"></span>
</a>
@ -93,7 +93,7 @@
</td>
<td>
<span class="delete-filter" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oFilter) { $root.filterForDeletion(oFilter); }">
<i class="icon-trash"></i>
<svg-icon params="icon: 'trash'"></svg-icon>
</span>
</td>
</tr>

View file

@ -9,6 +9,19 @@
size: 1
}
}"></div>
</div>
</div>
<div class="control-group" data-bind="css: {'error': actionValueFourth.error}" style="margin-bottom: 0">
<div class="controls">
<input type="text" class="span5 i18n" data-bind="value: actionValueFourth"
data-i18n="[placeholder]POPUPS_FILTER/VACATION_RECIPIENTS_LABEL" />
<button class="btn setRecipientsBtn" data-bind="click: setRecipients">
<svg-icon params="icon: 'plus'"></svg-icon>
</button>
</div>
</div>
<div class="control-group" style="margin-bottom: 0">
<div class="controls">
<input type="text" class="span5 i18n" data-bind="value: actionValueSecond"
data-i18n="[placeholder]POPUPS_FILTER/VACATION_SUBJECT_LABEL" />
</div>

View file

@ -7,6 +7,6 @@
&nbsp;
<span class="delete-action button-delete pull-right" style="margin-top: 5px;"
data-bind="click: function (oCondition) { $root.removeCondition(oCondition); }">
<i class="icon-trash"></i>
<svg-icon params="icon: 'trash'"></svg-icon>
</span>
</div>

View file

@ -9,6 +9,6 @@
&nbsp;
<span class="delete-action button-delete pull-right" style="margin-top: 5px;"
data-bind="click: function (oCondition) { $root.removeCondition(oCondition); }">
<i class="icon-trash"></i>
<svg-icon params="icon: 'trash'"></svg-icon>
</span>
</div>

View file

@ -7,6 +7,6 @@
&nbsp;
<span class="delete-action button-delete pull-right" style="margin-top: 5px;"
data-bind="click: function (oCondition) { $root.removeCondition(oCondition); }">
<i class="icon-trash"></i>
<svg-icon params="icon: 'trash'"></svg-icon>
</span>
</div>

View file

@ -14,15 +14,15 @@
</td>
<td class="delete-folder-parent">
<span class="delete-folder" data-bind="visible: canBeDeleted() && !deleteAccess(), click: function (oFolder) { $root.folderForDeletion(oFolder); }">
<i class="icon-trash"></i>
<svg-icon params="icon: 'trash'"></svg-icon>
</span>
</td>
<td class="subscribe-folder-parent">
<span class="unsubscribe-folder" data-bind="visible: canBeSubScribed() && !subScribed(), click: function(oFolder) { $root.subscribeFolder(oFolder); }">
<i class="icon-eye"></i>
<svg-icon params="icon: 'eye'"></svg-icon>
</span>
<span class="subscribe-folder" data-bind="visible: canBeSubScribed() && subScribed(), click: function(oFolder) { $root.unSubscribeFolder(oFolder); }">
<i class="icon-eye"></i>
<svg-icon params="icon: 'eye'"></svg-icon>
</span>
</td>
<td class="check-folder-parent" data-bind="visible: $root.displaySpecSetting">

View file

@ -12,7 +12,7 @@
&nbsp;&nbsp;
<div style="display: inline-block" data-tooltip-join="left" data-bind="tooltip: isHttps ? '' : 'SETTINGS_OPEN_PGP/GENERATE_ONLY_HTTPS'">
<button class="btn" data-bind="click: generateOpenPgpKey, disable: !isHttps">
<i class="icon-key"></i>
<svg-icon params="icon: 'key'"></svg-icon>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_OPEN_PGP/BUTTON_GENERATE_OPEN_PGP_KEYS"></span>
</button>
@ -30,7 +30,7 @@
<!-- ko foreach: openpgpkeysPrivate -->
<tr class="open-pgp-key-item">
<td>
<i class="open-pgp-key-img icon-lock i18n" data-i18n="[title]SETTINGS_OPEN_PGP/TITLE_PRIVATE"></i>
<span class="open-pgp-key-img i18n" data-i18n="[title]SETTINGS_OPEN_PGP/TITLE_PRIVATE"><svg-icon params="icon: 'lock'"></svg-icon></span>
<span class="open-pgp-key-user" data-bind="text: user"></span>
<a class="btn btn-small btn-small-small btn-danger pull-right button-delete button-delete-transitions" data-bind="css: {'delete-access': deleteAccess()}, click: function(oOpenPGP) { $root.deleteOpenPgpKey(oOpenPGP); }">
<span class="i18n" data-i18n="SETTINGS_OPEN_PGP/DELETING_ASK"></span>
@ -38,12 +38,12 @@
</td>
<td>
<span class="delete-open-pgp-key" data-bind="visible: !deleteAccess(), click: function (oOpenPGP) { $root.openPgpKeyForDeletion(oOpenPGP); }">
<i class="icon-trash"></i>
<svg-icon params="icon: 'trash'"></svg-icon>
</span>
</td>
<td>
<span class="view-open-pgp-key" data-bind="click: function (oOpenPgpKey) { $root.viewOpenPgpKey(oOpenPgpKey); }">
<i class="icon-eye"></i>
<svg-icon params="icon: 'eye'"></svg-icon>
</span>
</td>
</tr>
@ -51,7 +51,7 @@
<!-- ko foreach: openpgpkeysPublic -->
<tr class="open-pgp-key-item">
<td>
<span class="open-pgp-key-img icon-key i18n" data-i18n="[title]SETTINGS_OPEN_PGP/TITLE_PUBLIC"></span>
<span class="open-pgp-key-img i18n" data-i18n="[title]SETTINGS_OPEN_PGP/TITLE_PUBLIC"><svg-icon params="icon: 'key'"></svg-icon></span>
<span class="open-pgp-key-user" data-bind="text: user"></span>
(<span class="open-pgp-key-id" data-bind="text: id"></span>)
<a class="btn btn-small btn-small-small btn-danger pull-right button-delete button-delete-transitions" data-bind="css: {'delete-access': deleteAccess()}, click: function(oOpenPGP) { $root.deleteOpenPgpKey(oOpenPGP); }">
@ -60,12 +60,12 @@
</td>
<td>
<span class="delete-open-pgp-key" data-bind="visible: !deleteAccess(), click: function (oOpenPgpKey) { $root.openPgpKeyForDeletion(oOpenPgpKey); }">
<i class="icon-trash"></i>
<svg-icon params="icon: 'trash'"></svg-icon>
</span>
</td>
<td>
<span class="view-open-pgp-key" data-bind="click: function (oOpenPgpKey) { $root.viewOpenPgpKey(oOpenPgpKey); }">
<i class="icon-eye"></i>
<svg-icon params="icon: 'eye'"></svg-icon>
</span>
</td>
</tr>

View file

@ -369,6 +369,7 @@ STOP_LABEL = "Don't stop processing rules"
EMAIL_LABEL = "Email"
VACATION_SUBJECT_LABEL = "Subject (optional)"
VACATION_MESSAGE_LABEL = "Message"
VACATION_RECIPIENTS_LABEL = "Recipients (comma separated)"
REJECT_MESSAGE_LABEL = "Reject message"
ALL_INCOMING_MESSAGES_DESC = "All incoming messages"
@ -654,6 +655,7 @@ NO_PUBLIC_KEYS_FOUND = "No public keys found"
NO_PUBLIC_KEYS_FOUND_FOR = "No public keys found for \"%EMAIL%\" email"
NO_PRIVATE_KEY_FOUND = "No private key found"
NO_PRIVATE_KEY_FOUND_FOR = "No private key found for \"%EMAIL%\" email"
ADD_A_PUBLICK_KEY = "Add a public key"
UNVERIFIRED_SIGNATURE = "Unverified signature"
DECRYPTION_ERROR = "OpenPGP decryption error"
GOOD_SIGNATURE = "Good signature from %USER%"

View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="svg-icon-plus" viewBox="0 0 512 512">
<path d="m288 224l0-128-64 0 0 128-128 0 0 64 128 0 0 128 64 0 0-128 128 0 0-64z"/>
</symbol>
</svg>

After

Width:  |  Height:  |  Size: 235 B

253
vendors/fontastic/svg/demo.html vendored Normal file
View file

@ -0,0 +1,253 @@
<!DOCTYPE html>
<html>
<head>
<title>RainLoop Svg SVG Sprite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;vertical-align:baseline}
body{line-height:1;color:#000;background:#fff}
ol,ul{list-style:none}
table{border-collapse:separate;border-spacing:0;vertical-align:middle}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
a img{border:none}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
body{font-family:'Dosis','Tahoma',sans-serif}
.container{margin:15px auto;width:80%}
h1{margin:40px 0 20px;font-weight:700;font-size:38px;line-height:32px;color:#fb565e}
h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercase;font-weight:500; color: #fb565e;}
p {margin: 10px 0 ; line-height:1.3em; color: #454545;}
.small{font-size:14px;color:#a5adb4;}
.small a{color:#a5adb4;}
.small a:hover{color:#fb565e}
.glyphs{margin:0 0 60px 0;padding:30px 0 20px 30px;color:rgba(0,0,0,0.8);border:1px solid #d8e0e5;-webkit-border-radius:3px;border-radius:3px;}
.glyphs li{margin:0 30px 20px 0;padding:0;display:inline-block;overflow:hidden}
.glyphs input{margin:0;margin-top:5px;padding:8px;line-height:16px;font-size:16px;display:block;width:150px;height:40px;border:1px solid #d8e0e5;-webkit-border-radius:5px;border-radius:5px;background:#fff;outline:0;float:right;}
.glyphs input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}
.glyphs input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}
/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/
.hljs {
display: block; padding: 0.5em;
color: #333;
background: #f8f8f8
}
.hljs-comment,
.hljs-template_comment,
.diff .hljs-header,
.hljs-javadoc {
color: #998;
font-style: italic
}
.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.javascript .hljs-title,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
color: #333;
font-weight: bold
}
.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
color: #099;
}
.hljs-string,
.hljs-tag .hljs-value,
.hljs-phpdoc,
.tex .hljs-formula {
color: #d14
}
.hljs-title,
.hljs-id,
.coffeescript .hljs-params,
.scss .hljs-preprocessor {
color: #900;
font-weight: bold
}
.javascript .hljs-title,
.lisp .hljs-title,
.clojure .hljs-title,
.hljs-subst {
font-weight: normal
}
.hljs-class .hljs-title,
.haskell .hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
color: #458;
font-weight: bold
}
.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rules .hljs-property,
.django .hljs-tag .hljs-keyword {
color: #000080;
font-weight: normal
}
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body {
color: #008080
}
.hljs-regexp {
color: #009926
}
.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
color: #990073
}
.hljs-built_in,
.lisp .hljs-title,
.clojure .hljs-built_in {
color: #0086b3
}
.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
color: #999;
font-weight: bold
}
.hljs-deletion {
background: #fdd
}
.hljs-addition {
background: #dfd
}
.diff .hljs-change {
background: #0086b3
}
.hljs-chunk {
color: #aaa
}
.tip {
font-size: 16px;
line-height: 25px;
margin-bottom: 30px;
}
.tip > .number {
display: inline-block;
font-size: 16px;
line-height: 16px;
margin-right: 12px;
padding: 3px 7px;
-webkit-border-radius: 50px;
border-radius: 50px;
background-color: #fb565e;
color: #fff;
text-align: center;
}
code {
background: #faf9ff;
border: 1px solid #bab9c0;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 0 4px;
font-size: 14px;
}
pre code {
display: block;
padding: 4px 6px;
}
[class^="svg-icon-"],
[class*=" svg-icon-"] {
margin: 10px;
height: 32px;
width: 32px;
float: left;
fill: currentColor;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="svg-icon-plus" viewBox="0 0 512 512">
<path d="m288 224l0-128-64 0 0 128-128 0 0 64 128 0 0 128 64 0 0-128 128 0 0-64z"/>
</symbol>
</svg>
<div class="container">
<p class="small">This SVG sprite was created with <a href="http://fontastic.me/">Fontastic</a></p>
<h2>icons reference</h2>
<ul class="glyphs">
<li>
<svg class="svg-icon-plus">
<use xlink:href="#svg-icon-plus"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="svg-icon-plus"><use xlink:href="#svg-icon-plus"></use></svg>'>
</li>
</ul>
<h2>How to add SVG sprite icons to your project?</h2>
<div class="tip"><p></p><div class="number">1</div>Upload the icons.svg file to your server. In our examples below we assume that the sprite file will be available at: <code>http://yoursite.com/images/icons.svg</code><p></p></div><div class="tip"><p></p><div class="number">2</div>Go to "Icons Reference" and choose an icon that you want to have on your HTML page. Then click and copy its markup to your HTML page. For instance, the markup for a twitter icon could look like this:<p></p><pre><code><span class="hljs-tag">&lt;<span class="hljs-title">svg</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-twitter"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">use</span> <span class="hljs-attribute">xlink:href</span>=<span class="hljs-value">"#icon-twitter"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">use</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">svg</span>&gt;</span>
</code></pre></div><div class="tip"><p></p><div class="number">3</div>Now it's time to add the sprite file URL to the icon markup. In the example below, the URL is <code>/images/icons.svg</code>. So now the twitter icon markup could look like this:<p></p><pre><code><span class="hljs-tag">&lt;<span class="hljs-title">svg</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-twitter"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">use</span> <span class="hljs-attribute">xlink:href</span>=<span class="hljs-value">"/images/icons.svg#icon-twitter"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">use</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">svg</span>&gt;</span>
</code></pre></div><div class="tip"><p></p><div class="number">4</div>Add the code below to the CSS file that you use for your html page:<p></p><pre><code><span class="hljs-attr_selector">[class^="icon-"]</span>, <span class="hljs-attr_selector">[class*=" icon-"]</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">32</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">32</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> inline-block</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">fill</span>:<span class="hljs-value"> currentColor</span></span>;
<span class="hljs-rule">}</span></span>
</code></pre><p>You can use <code>height</code> and <code>width</code> properties to control icon size. To define icon color use <code>fill</code> property. Note: <code>currentColor</code> keyword inherits the color value of a parent element.</p></div><div class="tip"><p></p><div class="number">5</div>For IE capability you can use a great polyfill: <a href="https://github.com/jonathantneal/svg4everybody" target="blank">svg4everybody</a><p></p></div><div class="tip"><p> <b>Remember: </b>with Icon Cloud you don't have to worry about IE capability, the sprite file and other stuff. We'll take care of all of that for you, just click the "Publish" button and give it a try.</p></div>
</div>
<script type="text/javascript">
(function() {
var glyphs, _i, _len, _ref;
_ref = document.getElementsByClassName('glyphs');
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
glyphs = _ref[_i];
glyphs.addEventListener('click', function(event) {
if (event.target.tagName === 'INPUT') {
return event.target.select();
}
});
}
}).call(this);
</script>
</body>
</html>

7
vendors/fontastic/svg/icons.svg vendored Normal file
View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="svg-icon-plus" viewBox="0 0 512 512">
<path d="m288 224l0-128-64 0 0 128-128 0 0 64 128 0 0 128 64 0 0-128 128 0 0-64z"/>
</symbol>
</svg>

After

Width:  |  Height:  |  Size: 235 B