RocketChat#722 [NEW] Добавлена сетка иконок на главную страницу

sibdigital · Oct 15, 2020 · 4f1ae42 · 4f1ae42
1 parent e8b0638
commit 4f1ae42
Show file tree

Hide file tree

Showing 5 changed files with 370 additions and 160 deletions.
diff --git a/app/theme/client/imports/components/gridOfIcons.css 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
@@ -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
@@ -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);
 	},
 }];