diff --git a/app/theme/client/imports/components/gridOfIcons.css b/app/theme/client/imports/components/gridOfIcons.css
new file mode 100644
index 000000000000..c016e82078d6
--- /dev/null
+++ b/app/theme/client/imports/components/gridOfIcons.css
@@ -0,0 +1,189 @@
+.grid-of-icons {
+ flex: 5 auto;
+ margin: 15px 0 0 0;
+}
+/* Основные стили */
+.cbp-ig-grid {
+ list-style: none;
+ padding: 0 0 50px 0;
+ margin: 0;
+}
+
+.cbp-ig-grid__elem {
+ text-align: center !important;
+ height: 136px;
+ width: 100%;
+}
+
+.cbp-ig-grid__elem-button {
+ width: 100%;
+ height: 100%;
+ text-align: center !important;
+}
+
+.cbp-ig-grid__elem_icon {
+ font-size: 36px;
+}
+
+/* сброс выравниваний */
+.cbp-ig-grid:before,
+.cbp-ig-grid:after {
+ content: " ";
+ display: table;
+}
+
+.cbp-ig-grid:after {
+ clear: both;
+}
+
+.cbp-ig-grid li {
+ width: 20%;
+ float: left;
+ height: 136px;
+ text-align: center;
+}
+
+/* стили для ссылок */
+.cbp-ig-grid li > a {
+ display: block;
+ height: 40%;
+ color: #47a3da;
+ -webkit-transition: background 0.2s;
+ -moz-transition: background 0.2s;
+ transition: background 0.2s;
+}
+
+/* иконки */
+.cbp-ig-icon {
+ padding: 15px 0 0 0;
+ display: block;
+ -webkit-transition: -webkit-transform 0.2s;
+ transition: -moz-transform 0.2s;
+ transition: transform 0.2s;
+}
+
+.cbp-ig-icon:before {
+ font-size: 7em;
+ speak: none;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+}
+
+/* элемент title */
+.cbp-ig-grid .cbp-ig-title {
+ margin: 10px 0 10px 0;
+ padding: 10px 0 0 0;
+ font-size: 1em;
+ position: relative;
+ -webkit-transition: -webkit-transform 0.2s;
+ -moz-transition: -moz-transform 0.2s;
+ transition: transform 0.2s;
+}
+
+.cbp-ig-grid .cbp-ig-title:before {
+ content: '';
+ position: absolute;
+ background: #47a3da;
+ /* width: 160px; */
+ height: 6px;
+ top: 0px;
+ left: 50%;
+ margin: -10px 0 0 -80px;
+ -webkit-transition: margin-top 0.2s;
+ -moz-transition: margin-top 0.2s;
+ transition: margin-top 0.2s;
+}
+
+.cbp-ig-grid .cbp-ig-category {
+ text-transform: uppercase;
+ display: inline-block;
+ font-size: 1em;
+ letter-spacing: 1px;
+ color: #fff;
+ margin-bottom: 10px;
+ -webkit-transform: translateY(10px);
+ -moz-transform: -moz-translateY(10px);
+ -ms-transform: -ms-translateY(10px);
+ transform: translateY(10px);
+ opacity: 0;
+ -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
+ -moz-transition: -moz-transform 0.3s, opacity 0.2s;
+ -webkit-transition: transform 0.3s, opacity 0.2s;
+ margin-top: 20px;
+}
+
+.cbp-ig-grid li:hover .cbp-ig-category,
+.touch .cbp-ig-grid li .cbp-ig-category {
+ opacity: 1;
+ -webkit-transform: translateY(0px);
+ -moz-transform: translateY(0px);
+ -ms-transform: translateY(0px);
+ transform: translateY(0px);
+}
+
+/* Стили для элементов при наведении мыши */
+
+.cbp-ig-grid li > button:hover {
+ background: #47a3da;
+}
+
+.cbp-ig-grid li > button:hover .cbp-ig-icon {
+ -webkit-transform: translateY(10px);
+ -moz-transform: translateY(10px);
+ -ms-transform: translateY(10px);
+ transform: translateY(10px);
+}
+
+.cbp-ig-grid li > button:hover .cbp-ig-icon:before,
+.cbp-ig-grid li > button:hover .cbp-ig-title {
+ color: #fff;
+}
+
+.cbp-ig-grid li > button:hover .cbp-ig-title {
+ -webkit-transform: translateY(-15px);
+ -moz-transform: translateY(-15px);
+ -ms-transform: translateY(-15px);
+ transform: translateY(-15px);
+}
+
+.cbp-ig-grid li > button:hover .cbp-ig-title:before {
+ background: #fff;
+}
+
+@media screen and (max-width: 100em) {
+ .cbp-ig-grid li {
+ width: 25%;
+ }
+}
+
+@media screen and (max-width: 80em) {
+ .cbp-ig-grid li {
+ width: 33%;
+ }
+}
+
+@media screen and (max-width: 60em) {
+ .cbp-ig-grid li {
+ width: 50%;
+ }
+}
+
+@media screen and (max-width: 40em) {
+ .cbp-ig-grid li {
+ width: 100%;
+ }
+}
+
+@media screen and (max-width: 20em) {
+ .cbp-ig-grid {
+ font-size: 40%;
+ }
+
+ .cbp-ig-grid .cbp-ig-category {
+ margin-top: 20px;
+ }
+}
diff --git a/app/theme/client/main.css b/app/theme/client/main.css
index ed80efaf60f5..7385a63f93c4 100644
--- a/app/theme/client/main.css
+++ b/app/theme/client/main.css
@@ -48,6 +48,7 @@
@import 'imports/components/table.css';
@import 'imports/components/tabs.css';
@import "imports/components/tagPicker.css";
+@import "imports/components/gridOfIcons.css";
/* Modal */
@import 'imports/components/modal/full-modal.css';
diff --git a/app/ui-sidenav/client/sidebarHeader.js b/app/ui-sidenav/client/sidebarHeader.js
index 151e79fc4a4a..8e63226115c2 100644
--- a/app/ui-sidenav/client/sidebarHeader.js
+++ b/app/ui-sidenav/client/sidebarHeader.js
@@ -36,11 +36,13 @@ export const toolbarSearch = {
},
};
-const toolbarButtons = (/* user */) => [{
+const toolbarButtons = (/* user */) => [
+ {
name: t('Home'),
icon: 'home',
condition: () => settings.get('Layout_Show_Home_Button'),
action: () => {
+ menu.close();
FlowRouter.go('home');
},
},
@@ -51,14 +53,6 @@ const toolbarButtons = (/* user */) => [{
toolbarSearch.show(false);
},
},
-{
- name: t('Directory'),
- icon: 'discover',
- action: () => {
- menu.close();
- FlowRouter.go('directory');
- },
-},
{
name: t('Send_email'),
icon: 'mail',
@@ -68,24 +62,6 @@ const toolbarButtons = (/* user */) => [{
FlowRouter.go('manual-mail-sender');
},
},
-{
- name: t('Councils'),
- icon: 'team',
- condition: () => hasPermission('manage-councils'),
- action: () => {
- menu.close();
- FlowRouter.go('councils');
- },
-},
-{
- name: t('Working_group'),
- icon: 'team',
- condition: () => hasPermission('manage-working-group'),
- action: () => {
- menu.close();
- FlowRouter.go('working-group');
- },
-},
{
name: t('Sort'),
icon: 'sort',
@@ -100,139 +76,6 @@ const toolbarButtons = (/* user */) => [{
},
offsetVertical: e.currentTarget.clientHeight + 10,
};
- popover.open(config);
- },
-},
-{
- name: t('Create_new'),
- icon: 'edit-rounded',
- condition: () => hasAtLeastOnePermission(['create-c', 'create-p', 'create-d', 'start-discussion', 'start-discussion-other-user']),
- hasPopup: true,
- action: (e) => {
- const action = (title, content) => (e) => {
- e.preventDefault();
- modal.open({
- title: t(title),
- content,
- data: {
- onCreate() {
- modal.close();
- },
- },
- modifier: 'modal',
- showConfirmButton: false,
- showCancelButton: false,
- confirmOnEnter: false,
- });
- };
-
- const createChannel = action('Create_A_New_Channel', 'createChannel');
- const createDirectMessage = action('Direct_Messages', 'CreateDirectMessage');
- const createDiscussion = action('Discussion_title', 'CreateDiscussion');
-
-
- const items = [
- hasAtLeastOnePermission(['create-c', 'create-p'])
- && {
- icon: 'hashtag',
- name: t('Channel'),
- action: createChannel,
- },
- hasPermission('create-d')
- && {
- icon: 'team',
- name: t('Direct_Messages'),
- action: createDirectMessage,
- },
- settings.get('Discussion_enabled') && hasAtLeastOnePermission(['start-discussion', 'start-discussion-other-user'])
- && {
- icon: 'discussion',
- name: t('Discussion'),
- action: createDiscussion,
- },
- ].filter(Boolean);
-
- if (items.length === 1) {
- return items[0].action(e);
- }
-
- const config = {
- columns: [
- {
- groups: [
- {
- items,
- },
- ],
- },
- ],
- currentTarget: e.currentTarget,
- offsetVertical: e.currentTarget.clientHeight + 10,
- };
- popover.open(config);
- },
-},
-{
- name: t('Options'),
- icon: 'menu',
- condition: () => AccountBox.getItems().length || hasAtLeastOnePermission(['manage-emoji', 'manage-oauth-apps', 'manage-outgoing-integrations', 'manage-incoming-integrations', 'manage-own-outgoing-integrations', 'manage-own-incoming-integrations', 'manage-selected-settings', 'manage-sounds', 'view-logs', 'view-privileged-setting', 'view-room-administration', 'view-statistics', 'view-user-administration', 'access-setting-permissions']),
- hasPopup: true,
- action: (e) => {
- let adminOption;
- if (hasAtLeastOnePermission(['manage-emoji', 'manage-oauth-apps', 'manage-outgoing-integrations', 'manage-incoming-integrations', 'manage-own-outgoing-integrations', 'manage-own-incoming-integrations', 'manage-selected-settings', 'manage-sounds', 'view-logs', 'view-privileged-setting', 'view-room-administration', 'view-statistics', 'view-user-administration', 'access-setting-permissions'])) {
- adminOption = {
- icon: 'customize',
- name: t('Administration'),
- type: 'open',
- id: 'administration',
- action: () => {
- FlowRouter.go('admin', { group: 'info' });
- popover.close();
- },
- };
- }
-
- const config = {
- popoverClass: 'sidebar-header',
- columns: [
- {
- groups: [
- {
- items: AccountBox.getItems().map((item) => {
- let action;
-
- if (item.href || item.sideNav) {
- action = () => {
- if (item.href) {
- FlowRouter.go(item.href);
- popover.close();
- }
- if (item.sideNav) {
- SideNav.setFlex(item.sideNav);
- SideNav.openFlex();
- popover.close();
- }
- };
- }
-
- return {
- icon: item.icon,
- name: t(item.name),
- type: 'open',
- id: item.name,
- href: item.href,
- sideNav: item.sideNav,
- action,
- };
- }).concat([adminOption]),
- },
- ],
- },
- ],
- currentTarget: e.currentTarget,
- offsetVertical: e.currentTarget.clientHeight + 10,
- };
-
popover.open(config);
},
}];
diff --git a/app/ui/client/views/app/home.html b/app/ui/client/views/app/home.html
index dfcf2fea1243..de386fe0030c 100644
--- a/app/ui/client/views/app/home.html
+++ b/app/ui/client/views/app/home.html
@@ -4,5 +4,24 @@
{{{body}}}
+
+ {{> gridOfIcons}}
+
+
+
+
+ {{#each toolbarButtons}}
+ -
+
+
+ {{/each}}
+
+
+
diff --git a/app/ui/client/views/app/home.js b/app/ui/client/views/app/home.js
index ade5be9ca31f..08a33af2459e 100644
--- a/app/ui/client/views/app/home.js
+++ b/app/ui/client/views/app/home.js
@@ -1,6 +1,144 @@
import { Template } from 'meteor/templating';
import { settings } from '../../../../settings';
+import { t } from '/app/utils';
+import { FlowRouter } from "meteor/kadira:flow-router";
+import { AccountBox, menu, modal, popover } from '/app/ui-utils';
+import { hasAtLeastOnePermission, hasPermission } from '/app/authorization';
+
+
+const toolbarButtons = () => [
+ {
+ name: t('Directory'),
+ icon: 'discover',
+ action: () => {
+ menu.close();
+ FlowRouter.go('directory');
+ },
+ },
+ {
+ name: t('Send_email'),
+ icon: 'mail',
+ condition: () => hasPermission('send-mail-manually'),
+ action: () => {
+ menu.close();
+ FlowRouter.go('manual-mail-sender');
+ },
+ },
+ {
+ name: t('Councils'),
+ icon: 'team',
+ condition: () => hasPermission('manage-councils'),
+ action: () => {
+ menu.close();
+ FlowRouter.go('councils');
+ },
+ },
+ {
+ name: t('Working_group'),
+ icon: 'team',
+ condition: () => hasPermission('manage-working-group'),
+ action: () => {
+ menu.close();
+ FlowRouter.go('working-group');
+ },
+ },
+ {
+ name: t('Create_new'),
+ icon: 'edit-rounded',
+ condition: () => hasAtLeastOnePermission(['create-c', 'create-p', 'create-d', 'start-discussion', 'start-discussion-other-user']),
+ hasPopup: true,
+ action: (e) => {
+ const action = (title, content) => (e) => {
+ e.preventDefault();
+ modal.open({
+ title: t(title),
+ content,
+ data: {
+ onCreate() {
+ modal.close();
+ },
+ },
+ modifier: 'modal',
+ showConfirmButton: false,
+ showCancelButton: false,
+ confirmOnEnter: false,
+ });
+ };
+
+ const createChannel = action('Create_A_New_Channel', 'createChannel');
+ const createDirectMessage = action('Direct_Messages', 'CreateDirectMessage');
+ const createDiscussion = action('Discussion_title', 'CreateDiscussion');
+
+
+ const items = [
+ hasAtLeastOnePermission(['create-c', 'create-p'])
+ && {
+ icon: 'hashtag',
+ name: t('Channel'),
+ action: createChannel,
+ },
+ hasPermission('create-d')
+ && {
+ icon: 'team',
+ name: t('Direct_Messages'),
+ action: createDirectMessage,
+ },
+ settings.get('Discussion_enabled') && hasAtLeastOnePermission(['start-discussion', 'start-discussion-other-user'])
+ && {
+ icon: 'discussion',
+ name: t('Discussion'),
+ action: createDiscussion,
+ },
+ ].filter(Boolean);
+
+ if (items.length === 1) {
+ return items[0].action(e);
+ }
+
+ const config = {
+ columns: [
+ {
+ groups: [
+ {
+ items,
+ },
+ ],
+ },
+ ],
+ currentTarget: e.currentTarget,
+ offsetVertical: e.currentTarget.clientHeight + 10,
+ };
+ popover.open(config);
+ },
+ },
+ {
+ name: t('Administration'),
+ icon: 'customize',
+ condition: () => AccountBox.getItems().length || hasAtLeastOnePermission(['manage-emoji', 'manage-oauth-apps', 'manage-outgoing-integrations', 'manage-incoming-integrations', 'manage-own-outgoing-integrations', 'manage-own-incoming-integrations', 'manage-selected-settings', 'manage-sounds', 'view-logs', 'view-privileged-setting', 'view-room-administration', 'view-statistics', 'view-user-administration', 'access-setting-permissions']),
+ action: () => {
+ menu.close();
+ FlowRouter.go('admin', { group: 'info' });
+ },
+ },
+ {
+ name: t('Errands_from_me'),
+ icon: 'errand',
+ //condition: () => hasPermission('manage-working-errand'),
+ action: () => {
+ menu.close();
+ FlowRouter.go('/errands/initiated_by_me');
+ },
+ },
+ {
+ name: t('Errands_for_me'),
+ icon: 'errand',
+ //condition: () => hasPermission('manage-working-errand'),
+ action: () => {
+ menu.close();
+ FlowRouter.go('/errands/charged_to_me');
+ },
+ }];
Template.home.helpers({
title() {
@@ -9,4 +147,24 @@ Template.home.helpers({
body() {
return settings.get('Layout_Home_Body');
},
+ toolbarButtons() {
+ console.log(toolbarButtons().filter((button) => !button.condition || button.condition()));
+ return toolbarButtons().filter((button) => !button.condition || button.condition());
+ },
+});
+
+Template.gridOfIcons.helpers({
+ toolbarButtons() {
+ return toolbarButtons().filter((button) => !button.condition || button.condition());
+ },
+});
+
+Template.gridOfIcons.events({
+ 'click .js-button'(e) {
+ console.log(this.action);
+ if (document.activeElement === e.currentTarget) {
+ e.currentTarget.blur();
+ }
+ return this.action && this.action.apply(this, [e]);
+ },
});