fix sidebar

9 years ago · 503d0103bb
parent c86b87934c
commit 503d0103bb
5 changed files with 173 additions and 122 deletions
--- a/package.json
+++ b/package.json
@ -1,100 +1,109 @@
 {
-	"name": "Rocket.Chat",
-	"description": "The Ultimate Open Source WebChat Platform",
-	"version": "0.57.0-develop",
-	"author": {
-		"name": "Rocket.Chat",
-		"url": "https://rocket.chat/"
-	},
-	"contributors": [{
-		"name": "Aaron Ogle",
-		"email": "aaron.ogle@rocket.chat"
-	}, {
-		"name": "Bradley Hilton",
-		"email": "bradley.hilton@rocket.chat"
-	}, {
-		"name": "Diego Sampaio",
-		"email": "diego.sampaio@rocket.chat"
-	}, {
-		"name": "Gabriel Engel",
-		"email": "gabriel.engel@rocket.chat"
-	}, {
-		"name": "Marcelo Schmidt",
-		"email": "marcelo.schmidt@rocket.chat"
-	}, {
-		"name": "Rodrigo Nascimento",
-		"email": "rodrigo.nascimento@rocket.chat"
-	}, {
-		"name": "Sing Li",
-		"email": "sing.li@rocket.chat"
-	}],
-	"mocha": {
-		"tests": [
-			"packages/**/*.tests.js"
-		],
-		"files": [
-			"packages/**/*.js",
-			"!packages/**/*.tests.js"
-		]
-	},
-	"keywords": [
-		"rocketchat",
-		"rocket",
-		"chat"
-	],
-	"scripts": {
-		"start": "meteor npm i && meteor",
-		"lint": "eslint .",
-		"lint-fix": "eslint . --fix",
-		"stylelint": "stylelint packages/**/*.{less,css}",
-		"test": "node .scripts/start.js",
-		"deploy": "npm run build && pm2 startOrRestart pm2.json",
-		"chimp-watch": "chimp --ddp=http://localhost:3000 --watch --mocha --path=tests/end-to-end",
-		"chimp-test": "chimp tests/chimp-config.js",
-		"postinstall": "cd packages/rocketchat-katex && npm i",
-		"testunit-watch": "mocha --watch --opts ./mocha.opts \"`node -e \"console.log(require('./package.json').mocha.tests.join(' '))\"`\"",
-		"coverage": "nyc -r html mocha --opts ./mocha.opts \"`node -e \"console.log(require('./package.json').mocha.tests.join(' '))\"`\"",
-		"testunit": "mocha --opts ./mocha.opts \"`node -e \"console.log(require('./package.json').mocha.tests.join(' '))\"`\"",
-		"version": "node .scripts/version.js",
-		"set-version": "node .scripts/set-version.js",
-		"release": "npm run set-version --silent"
-	},
-	"license": "MIT",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/RocketChat/Rocket.Chat.git"
-	},
-	"bugs": {
-		"url": "https://github.com/RocketChat/Rocket.Chat/issues",
-		"email": "support@rocket.chat"
-	},
-	"devDependencies": {
-		"babel-mocha-es6-compiler": "^0.1.0",
-		"babel-plugin-array-includes": "^2.0.3",
-		"chimp": "^0.49.0",
-		"conventional-changelog": "^1.1.3",
-		"eslint": "^3.19.0",
-		"postcss-cssnext": "^2.11.0",
-		"postcss-smart-import": "^0.7.2",
-		"stylelint": "^7.10.1",
-		"supertest": "^3.0.0"
-	},
-	"dependencies": {
-		"@google-cloud/storage": "^1.1.1",
-		"aws-sdk": "^2.55.0",
-		"babel-runtime": "^6.23.0",
-		"bcrypt": "^1.0.2",
-		"codemirror": "^5.26.0",
-		"file-type": "^4.3.0",
-		"highlight.js": "^9.12.0",
-		"jquery": "^3.2.1",
-		"mime-db": "^1.28.0",
-		"mime-type": "^3.0.5",
-		"moment": "^2.18.1",
-		"moment-timezone": "^0.5.13",
-		"photoswipe": "^4.1.2",
-		"prom-client": "^9.0.0",
-		"semver": "^5.3.0",
-		"toastr": "^2.1.2"
-	}
+  "name": "Rocket.Chat",
+  "description": "The Ultimate Open Source WebChat Platform",
+  "version": "0.57.0-develop",
+  "author": {
+    "name": "Rocket.Chat",
+    "url": "https://rocket.chat/"
+  },
+  "contributors": [
+    {
+      "name": "Aaron Ogle",
+      "email": "aaron.ogle@rocket.chat"
+    },
+    {
+      "name": "Bradley Hilton",
+      "email": "bradley.hilton@rocket.chat"
+    },
+    {
+      "name": "Diego Sampaio",
+      "email": "diego.sampaio@rocket.chat"
+    },
+    {
+      "name": "Gabriel Engel",
+      "email": "gabriel.engel@rocket.chat"
+    },
+    {
+      "name": "Marcelo Schmidt",
+      "email": "marcelo.schmidt@rocket.chat"
+    },
+    {
+      "name": "Rodrigo Nascimento",
+      "email": "rodrigo.nascimento@rocket.chat"
+    },
+    {
+      "name": "Sing Li",
+      "email": "sing.li@rocket.chat"
+    }
+  ],
+  "mocha": {
+    "tests": [
+      "packages/**/*.tests.js"
+    ],
+    "files": [
+      "packages/**/*.js",
+      "!packages/**/*.tests.js"
+    ]
+  },
+  "keywords": [
+    "rocketchat",
+    "rocket",
+    "chat"
+  ],
+  "scripts": {
+    "start": "meteor npm i && meteor",
+    "lint": "eslint .",
+    "lint-fix": "eslint . --fix",
+    "stylelint": "stylelint packages/**/*.{less,css}",
+    "test": "node .scripts/start.js",
+    "deploy": "npm run build && pm2 startOrRestart pm2.json",
+    "chimp-watch": "chimp --ddp=http://localhost:3000 --watch --mocha --path=tests/end-to-end",
+    "chimp-test": "chimp tests/chimp-config.js",
+    "postinstall": "cd packages/rocketchat-katex && npm i",
+    "testunit-watch": "mocha --watch --opts ./mocha.opts \"`node -e \"console.log(require('./package.json').mocha.tests.join(' '))\"`\"",
+    "coverage": "nyc -r html mocha --opts ./mocha.opts \"`node -e \"console.log(require('./package.json').mocha.tests.join(' '))\"`\"",
+    "testunit": "mocha --opts ./mocha.opts \"`node -e \"console.log(require('./package.json').mocha.tests.join(' '))\"`\"",
+    "version": "node .scripts/version.js",
+    "set-version": "node .scripts/set-version.js",
+    "release": "npm run set-version --silent"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/RocketChat/Rocket.Chat.git"
+  },
+  "bugs": {
+    "url": "https://github.com/RocketChat/Rocket.Chat/issues",
+    "email": "support@rocket.chat"
+  },
+  "devDependencies": {
+    "babel-mocha-es6-compiler": "^0.1.0",
+    "babel-plugin-array-includes": "^2.0.3",
+    "chimp": "^0.49.0",
+    "conventional-changelog": "^1.1.3",
+    "eslint": "^3.19.0",
+    "postcss-cssnext": "^2.11.0",
+    "postcss-smart-import": "^0.7.2",
+    "stylelint": "^7.10.1",
+    "supertest": "^3.0.0",
+  },
+  "dependencies": {
+    "@google-cloud/storage": "^1.1.1",
+    "aws-sdk": "^2.55.0",
+    "babel-runtime": "^6.23.0",
+    "bcrypt": "^1.0.2",
+    "codemirror": "^5.26.0",
+    "file-type": "^4.3.0",
+    "highlight.js": "^9.12.0",
+    "jquery": "^3.2.1",
+    "mime-db": "^1.28.0",
+    "mime-type": "^3.0.5",
+    "moment": "^2.18.1",
+    "moment-timezone": "^0.5.13",
+    "photoswipe": "^4.1.2",
+    "prom-client": "^9.0.0",
+    "semver": "^5.3.0",
+    "toastr": "^2.1.2",
+    "wolfy87-eventemitter": "^5.1.0"
+  }
 }
--- a/packages/rocketchat-lib/lib/core.js
+++ b/packages/rocketchat-lib/lib/core.js
@ -1,8 +1,7 @@
-
+import EventEmitter from 'wolfy87-eventemitter';
+RocketChat = new EventEmitter();
 /*
 * Kick off the global namespace for RocketChat.
 * @namespace RocketChat
 */
-RocketChat = {
-	models: {}
-};
+RocketChat.models = {};
--- a/packages/rocketchat-theme/client/imports/content.css
+++ b/packages/rocketchat-theme/client/imports/content.css
@ -1,5 +1,10 @@
 .main-content {
 	height: auto !important;
 	width: 100% !important;
-	position: static !important;
+	position: static;
+}
+@media (width <= 780px) {
+	.main-content {
+		position: initial;
+	}
 }
--- a/packages/rocketchat-theme/client/imports/general/utils.css
+++ b/packages/rocketchat-theme/client/imports/general/utils.css
@ -51,15 +51,28 @@
 	}
 }

+:root {
+	--rc-popover-open: {
+		display: flex;
+		animation: dropdown-show 0.1s cubic-bezier(0.45, 0.05, 0.55, 0.95);
+	}
+	--rc-popover-open-mobile: {
+		position: fixed;
+    top: 85px;
+    left: 25px;
+    right: 25px;
+	}
+}
+
 .rc-popover-anchor {
 	display: none;

 	&:checked + .rc-popover {
-		display: flex;
-		animation: dropdown-show 0.1s cubic-bezier(0.45, 0.05, 0.55, 0.95);
+		@apply --rc-popover-open;
 	}
 }

+
 .rc-popover {
 	display: none;
 	position: absolute;
@ -71,7 +84,7 @@
 	cursor: default;

 	&--show {
-		display: flex;
+		@apply --rc-popover-open;
 	}

 	&__column {
@ -127,3 +140,16 @@
 		opacity: 1;
 	}
 }
+
+
+@media (width <= 400px) {
+	.rc-popover {
+		&-anchor:checked + .rc-popover {
+			@apply --rc-popover-open-mobile;
+		}
+
+		&--show {
+			@apply --rc-popover-open-mobile;
+		}
+	}
+}
--- a/packages/rocketchat-ui/client/lib/menu.js
+++ b/packages/rocketchat-ui/client/lib/menu.js
@ -1,10 +1,23 @@
-/* globals isRtl */
+import EventEmitter from 'wolfy87-eventemitter';
 const sideNavW = 280;
-this.menu = new class {
+
+window.addEventListener('resize', _.debounce(((event) => {
+	let lastState = window.matchMedia('(min-width: 700px)').matches ? 'mini' : 'large';
+	RocketChat.emit('grid', lastState);
+	return (event) => {
+		const futureState = window.matchMedia('(min-width: 700px)').matches ? 'mini' : 'large';
+		if (lastState != futureState) {
+			lastState = futureState;
+			RocketChat.emit('grid', lastState);
+		}
+	};
+})(), 100));
+
+/* globals isRtl */
+this.menu = new class extends EventEmitter {
 	constructor() {
-		this._onOpen = [];
+		super();
 		this._open = false;
-		this._onClose = [];
 		this.updateUnreadBars = _.throttle(() => {
 			if (this.list == null) {
 				return;
@ -35,6 +48,7 @@ this.menu = new class {
 		this.sideNavW = sideNavW;
 	}
 	init() {
+		this.menu = $('.sidebar');
 		this.mainContent = $('.main-content');

 		this.list = $('.rooms-list');
@ -49,31 +63,29 @@ this.menu = new class {
 	isOpen() {
 		return Session.get('isMenuOpen');
 	}
-	onOpen(fn) {
-		if (typeof fn === 'function') {
-			this._onOpen.push(fn);
-		}
-	}
-	onClose(fn) {
-		if (typeof fn === 'function') {
-			this._onClose.push(fn);
-		}
-	}
 	open() {
 		this._open = true;
 		Session.set('isMenuOpen', this._open);
 		this.mainContent && this.mainContent.css('transform', `translateX(${ isRtl(localStorage.getItem('userLanguage'))?'-':'' }${ this.sideNavW }px)`);
-		setTimeout(() => this._onOpen.forEach(fn => fn.apply(this)), 10);
+		setTimeout(() => this.emit('open'), 10);
 	}

 	close() {
 		this._open = false;
 		Session.set('isMenuOpen', this._open);
 		this.mainContent && this.mainContent .css('transform', 'translateX(0)');
-		setTimeout(() => this._onClose.forEach(fn => fn.apply(this)), 10);
+		setTimeout(() => this.emit('close'), 10);
 	}

 	toggle() {
 		return this.isOpen() ? this.close() : this.open();
 	}
 };
+
+menu.on('close', function() {
+	this.menu.find('[data-popover="anchor"]:checked').prop('checked', false);
+});
+
+RocketChat.on('grid', size => {
+	menu.close();
+});