Skip to content

Commit

Permalink
[IMPROVE] new icons (RocketChat#13289)
Browse files Browse the repository at this point in the history
  • Loading branch information
ggazzo authored and Montel committed Feb 13, 2019
1 parent 93d9539 commit ed936ef
Show file tree
Hide file tree
Showing 151 changed files with 1,375 additions and 967 deletions.
25 changes: 11 additions & 14 deletions packages/rocketchat-apps/assets/stylesheets/apps.css
Original file line number Diff line number Diff line change
Expand Up @@ -146,23 +146,20 @@
margin: 0 7px;
}

.installer {
position: relative;

overflow: hidden;

width: 20px;
height: 20px;
&__wrap-actions {
& > .rc-icon--loading {
display: none;
}

&--marketplace-installer {
position: absolute;
top: 0;
&.loading {
& > .rc-icon--loading {
display: block;

width: 818px;
height: 20px;
animation: spin 1s linear infinite;
}

&.play {
animation: play90 steps(40) 4s forwards;
& > .apps-installer {
display: none;
}
}
}
Expand Down
13 changes: 8 additions & 5 deletions packages/rocketchat-apps/client/admin/apps.html
Original file line number Diff line number Diff line change
Expand Up @@ -66,14 +66,17 @@
{{/if}}
</td>
<td>
<!-- {{> icon icon="app-installed"}} -->

{{#if $eq latest._installed true}}
{{> icon icon="app-installed"}}
{{> icon icon="checkmark-circled" block="rc-icon--default-size"}}
{{/if}}
{{#if renderDownloadButton latest}}
<button class="js-install installer" data-app="{{appId}}">
{{> icon block="installer" icon="marketplace-installer"}}
</button>
<div class="rc-apps-marketplace__wrap-actions">
{{> icon block="rc-icon--default-size rc-icon" icon="loading"}}
<button class="js-install apps-installer" data-app="{{appId}}">
{{> icon block="installer rc-icon--default-size" icon="circled-arrow-down"}}
</button>
</div>
{{/if}}
</td>
</tr>
Expand Down
15 changes: 8 additions & 7 deletions packages/rocketchat-apps/client/admin/apps.js
Original file line number Diff line number Diff line change
Expand Up @@ -253,14 +253,15 @@ Template.apps.events({

const url = `${ HOST }/v1/apps/${ this.latest.id }/download/${ this.latest.version }`;

RocketChat.API.post('apps/', { url }).then(() => {
getInstalledApps(template);
}).catch((e) => {
toastr.error((e.xhr.responseJSON && e.xhr.responseJSON.error) || e.message);
});

// play animation
$(e.currentTarget).find('.rc-icon').addClass('play');
e.currentTarget.parentElement.classList.add('loading');

RocketChat.API.post('apps/', { url })
.then(() => {
getApps(template);
getInstalledApps(template);
})
.catch((e) => toastr.error((e.xhr.responseJSON && e.xhr.responseJSON.error) || e.message));
},
'keyup .js-search'(e, t) {
t.searchText.set(e.currentTarget.value);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{{#if selectedMessages}}
<div class="mail-messages__instructions mail-messages__instructions--selected">
<div class="mail-messages__instructions-wrapper">
{{> icon block="mail-messages__instructions-icon" icon="modal-success"}}
{{> icon block="mail-messages__instructions-icon rc-icon--default-size" icon="checkmark-circled"}}
<div class="mail-messages__instructions-text">
<span class="mail-messages__instructions-text-selected">{{selectedMessages.length}} Messages selected</span>
<span>Click here to clear the selection</span>
Expand All @@ -13,7 +13,7 @@
{{else}}
<div class="mail-messages__instructions">
<div class="mail-messages__instructions-wrapper">
{{> icon block="mail-messages__instructions-icon" icon="hand-pointer"}}
{{> icon block="mail-messages__instructions-icon rc-icon--default-size" icon="hand-pointer"}}
<div class="mail-messages__instructions-text">
{{_ "Click_the_messages_you_would_like_to_send_by_email"}}
</div>
Expand All @@ -25,7 +25,7 @@
<div class="rc-input__title">{{_ "To_users"}}</div>
<div class="rc-input__wrapper">
<div class="rc-input__icon">
{{> icon block="rc-input__icon-svg" icon="at"}}
{{> icon block="rc-input__icon-svg rc-icon--default-size" icon="at"}}
</div>
<div class="rc-tags">
{{#each user in selectedUsers}}
Expand All @@ -48,7 +48,7 @@
<div class="rc-input__title">{{_ "To_additional_emails"}}</div>
<div class="rc-input__wrapper">
<div class="rc-input__icon">
{{> icon block="rc-input__icon-svg" icon="mail"}}
{{> icon block="rc-input__icon-svg rc-icon--default-size" icon="mail"}}
</div>
<div class="rc-tags">
{{#each selectedEmails}}
Expand All @@ -64,7 +64,7 @@
<div class="rc-input__title">{{_ "Subject"}}</div>
<div class="rc-input__wrapper">
<div class="rc-input__icon">
{{> icon block="rc-input__icon-svg" icon="edit"}}
{{> icon block="rc-input__icon-svg rc-icon--default-size" icon="edit"}}
</div>
<input type="text" class="rc-input__element" value="{{_ "Mail_Messages_Subject" roomName}}" name="subject" autocomplete="off"/>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
{{#if title_link}}
<a href="{{fixCordova title_link}}" target="_blank" rel="noopener noreferrer">{{#if isFile}} {{_ "Attachment_File_Uploaded"}}: {{/if}}{{title}}</a>
{{#if title_link_download}}
<a class="icon-download attachment-download-icon" href="{{fixCordova title_link}}" target="_blank" download="" rel="noopener noreferrer"></a>
<a class="attachment-download-icon" href="{{fixCordova title_link}}" target="_blank" download="" rel="noopener noreferrer">{{> icon icon="download"}}</a>
{{/if}}
{{else}}
{{title}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,13 +65,12 @@ html.rtl .attachment {
}

& .attachment-title {

color: #13679a;

font-size: 1.02rem;
font-weight: 500;
line-height: 1.5rem;

& > a {
font-weight: 500;
}
}

& .attachment-text {
Expand Down Expand Up @@ -138,11 +137,7 @@ html.rtl .attachment {
}

& .attachment-download-icon {
margin-left: 5px;
padding: 2px 5px;

border-width: 1px;
border-radius: 5px;
padding: 0 5px;
}

& .attachment-canvas {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,13 @@ function job() {

RocketChat.models.Rooms.find({
t: type,
_updatedAt: { $gte: lastPrune },
$or: [{ 'retention.enabled': { $eq: true } }, { 'retention.enabled': { $exists: false } }],
_updatedAt: { $gte: latest },
$or: [
{ 'retention.enabled': { $eq: true } },
{ 'retention.enabled': { $exists: false } },
],
'retention.overrideGlobal': { $ne: true },
}).forEach(({ _id: rid }) => {
}, { fields : { _id: 1 } }).forEach(({ _id: rid }) => {
RocketChat.cleanRoomHistory({ rid, latest, oldest, filesOnly, excludePinned });
});
});
Expand Down
2 changes: 1 addition & 1 deletion packages/rocketchat-ui-account/client/accountProfile.html
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@
<input name="email" type="text" class="rc-input__element" placeholder="{{_ "Email_Placeholder" }}" value="{{email}}" autocomplete="false" {{ifThenElse canChange '' 'disabled'}}>
{{#unless emailVerified}}
<div class="rc-input__icon rc-input__icon--right">
{{> icon block="rc-input__icon-svg" icon="cross-circled"}}
{{> icon block="rc-input__icon-svg" icon="circle-cross"}}
</div>
{{else}}
<div class="rc-input__icon rc-input__icon--right">
Expand Down
2 changes: 1 addition & 1 deletion packages/rocketchat-ui-clean-history/client/lib/startup.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Meteor.startup(() => {
id: 'clean-history',
anonymous: true,
i18nTitle: 'Prune_Messages',
icon: 'trash',
icon: 'eraser',
template: 'cleanHistory',
order: 250,
condition: () => RocketChat.authz.hasAllPermission('clean-channel-history', Session.get('openedRoom')),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@
{{/unless}}
</p>
<div class="pruning-wrapper">
{{> icon icon="loading-thin"}}
{{> icon icon="loading" block="rc-icon"}}
<div class="pruning__text">
{{prunedCount}}
</div>
Expand All @@ -124,7 +124,7 @@
<main class="rc-user-info__pruning">
<p class="pruning__header">{{_ "Prune_finished"}}</p>
<div class="pruning-wrapper prune__finished">
{{> icon icon="loading-thin-done"}}
{{> icon icon="check" block="rc-icon"}}
<div class="pruning__text">
{{prunedCount}}
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,16 @@
color: #12c212;
}

& svg {
& .rc-icon--loading {
width: 16rem;
height: 16rem;
margin: 1rem 0;

animation: pruningSpin 2s linear infinite;
animation: spin 2s linear infinite;
}

& .rc-icon--check {
font-size: 1rem;
}

& .pruning__text {
Expand All @@ -53,13 +57,3 @@
margin-top: calc(-8rem + 1.5em);
}
}

@keyframes pruningSpin {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ Template.uploadedFilesList.helpers({
}

return {
id: 'file-generic',
id: 'clip',
type: 'generic',
extension,
};
Expand Down Expand Up @@ -132,7 +132,7 @@ Template.uploadedFilesList.events({
{
items: [
{
icon: 'import',
icon: 'download',
name: t('Download'),
action: () => {
const a = document.createElement('a');
Expand Down
13 changes: 13 additions & 0 deletions packages/rocketchat-ui-master/public/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
HOW INSERT A NEW ICON

paste your icon on `./icons` folder

run

````
node generateSprite.js
node generateHTML.js
git add icon.html icons icons.svg
....
```
79 changes: 79 additions & 0 deletions packages/rocketchat-ui-master/public/generateHTML.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
const fs = require('fs');

const sort = function(a, b) {
if (a.toLocaleLowerCase() < b.toLocaleLowerCase()) {
return -1;
}
if (a.toLocaleLowerCase() > b.toLocaleLowerCase()) {
return 1;
}
return 0;
};

const iconHTML = (name) => `<div class="icon" title="${ name }"><svg><use href="#icon-${ name }"/></svg></div>`;

const header = `<html><body><style>
* {
box-sizing: border-box;
}
.grid {
display: grid;
grid-auto-flow: dense;
max-width: 380px;
margin: 0 auto;
border: 5px solid #ccc;
grid-template-columns: repeat(auto-fill, 20px);
grid-gap: 5px;
background: #ccc;
}
.icon {
background: white;
}
svg {
display: inline-block;
width: 20px;
height: 20px;
color: blue;
}
</style><div class="grid">`;

const start = async() => {
const html = fs.createWriteStream('icons.html', { flags: 'w' });
html.write(header);
try {
await new Promise((resolve) => {
fs.readdir('./icons', async(err, files) => {
files
.sort(sort)
.filter((file) => {
if (!/\.svg/.test(file)) {
console.log(`invalid extension ${ file }`);
return false;
}
return true;
}).forEach(async(file) => {
const name = file.replace('.svg', '').toLocaleLowerCase();
console.log(name);
html.write(iconHTML(name));
});
resolve();
});

});

} catch (error) {
console.error(error);
} finally {
html.write(fs.readFileSync('./icons.svg'));
html.write('</div></body></html>');
html.end();
}
};

try {
start();

} catch (error) {
console.error(error);
}
Loading

0 comments on commit ed936ef

Please sign in to comment.