Merge pull request #8411 from RocketChat/contextual-bar-redesign

[NEW] Contextual Bar Redesign

.docker/Dockerfile.local

@@ -0,0 +1,20 @@
+FROM node:8
+
+ADD . /app
+
+ENV RC_VERSION=0.57.0-designpreview \
+    DEPLOY_METHOD=docker \
+    NODE_ENV=production \
+    PORT=3000 \
+    ROOT_URL=http://localhost:3000
+
+RUN set -x \
+ && cd /app/bundle/programs/server \
+ && npm install \
+ && npm cache clear --force
+
+WORKDIR /app/bundle
+
+EXPOSE 3000
+
+CMD ["node", "main.js"]

.drone.yml

@@ -0,0 +1,44 @@
+pipeline:
+  restore-cache:
+    image: drillster/drone-volume-cache
+    restore: true
+    mount:
+      - /drone/.meteor/
+      - ./node_modules
+      - ./.meteor/local
+    volumes:
+      - /tmp/cache/Rocket.Chat:/cache
+  build:
+    image: ubuntu:16.04
+    environment:
+      - METEOR_ALLOW_SUPERUSER=true
+    commands:
+      - apt update && apt install curl git python g++ build-essential bzip2 -y
+      - export HOME=/drone
+      - export PATH="/drone/.meteor:$PATH"
+      - if [ ! -e "/drone/.meteor/meteor" ]; then export HOME=/drone; curl https://install.meteor.com | sed s/--progress-bar/-sL/g | /bin/sh; fi
+      - which meteor
+      - meteor npm install
+      - set +e
+      - meteor add rocketchat:lib
+      - set -e
+      - mkdir /drone/build
+      - meteor build --allow-superuser --server-only --directory /drone/build
+      - cp .docker/Dockerfile.local /drone/build/Dockerfile
+  rebuild-cache:
+    image: drillster/drone-volume-cache
+    rebuild: true
+    mount:
+      - /drone/.meteor/
+      - ./node_modules
+      - ./.meteor/local
+    volumes:
+      - /tmp/cache/Rocket.Chat:/cache
+  docker:
+    image: plugins/docker
+    repo: rocketchat/rocket.chat
+    dockerfile: /drone/build/Dockerfile
+    storage_driver: overlay
+    context: /drone/build
+    secrets: [ docker_username, docker_password ]
+    tag: designpreview

.drone.yml.sig

@@ -0,0 +1 @@
+eyJhbGciOiJIUzI1NiJ9.cGlwZWxpbmU6CiAgcmVzdG9yZS1jYWNoZToKICAgIGltYWdlOiBkcmlsbHN0ZXIvZHJvbmUtdm9sdW1lLWNhY2hlCiAgICByZXN0b3JlOiB0cnVlCiAgICBtb3VudDoKICAgICAgLSAvZHJvbmUvLm1ldGVvci8KICAgICAgLSAuL25vZGVfbW9kdWxlcwogICAgICAtIC4vLm1ldGVvci9sb2NhbAogICAgdm9sdW1lczoKICAgICAgLSAvdG1wL2NhY2hlL1JvY2tldC5DaGF0Oi9jYWNoZQogIGJ1aWxkOgogICAgaW1hZ2U6IHVidW50dToxNi4wNAogICAgZW52aXJvbm1lbnQ6CiAgICAgIC0gTUVURU9SX0FMTE9XX1NVUEVSVVNFUj10cnVlCiAgICBjb21tYW5kczoKICAgICAgLSBhcHQgdXBkYXRlICYmIGFwdCBpbnN0YWxsIGN1cmwgZ2l0IHB5dGhvbiBnKysgYnVpbGQtZXNzZW50aWFsIGJ6aXAyIC15CiAgICAgIC0gZXhwb3J0IEhPTUU9L2Ryb25lCiAgICAgIC0gZXhwb3J0IFBBVEg9Ii9kcm9uZS8ubWV0ZW9yOiRQQVRIIgogICAgICAtIGlmIFsgISAtZSAiL2Ryb25lLy5tZXRlb3IvbWV0ZW9yIiBdOyB0aGVuIGV4cG9ydCBIT01FPS9kcm9uZTsgY3VybCBodHRwczovL2luc3RhbGwubWV0ZW9yLmNvbSB8IHNlZCBzLy0tcHJvZ3Jlc3MtYmFyLy1zTC9nIHwgL2Jpbi9zaDsgZmkKICAgICAgLSB3aGljaCBtZXRlb3IKICAgICAgLSBtZXRlb3IgbnBtIGluc3RhbGwKICAgICAgLSBzZXQgK2UKICAgICAgLSBtZXRlb3IgYWRkIHJvY2tldGNoYXQ6bGliCiAgICAgIC0gc2V0IC1lCiAgICAgIC0gbWtkaXIgL2Ryb25lL2J1aWxkCiAgICAgIC0gbWV0ZW9yIGJ1aWxkIC0tYWxsb3ctc3VwZXJ1c2VyIC0tc2VydmVyLW9ubHkgLS1kaXJlY3RvcnkgL2Ryb25lL2J1aWxkCiAgICAgIC0gY3AgLmRvY2tlci9Eb2NrZXJmaWxlLmxvY2FsIC9kcm9uZS9idWlsZC9Eb2NrZXJmaWxlCiAgcmVidWlsZC1jYWNoZToKICAgIGltYWdlOiBkcmlsbHN0ZXIvZHJvbmUtdm9sdW1lLWNhY2hlCiAgICByZWJ1aWxkOiB0cnVlCiAgICBtb3VudDoKICAgICAgLSAvZHJvbmUvLm1ldGVvci8KICAgICAgLSAuL25vZGVfbW9kdWxlcwogICAgICAtIC4vLm1ldGVvci9sb2NhbAogICAgdm9sdW1lczoKICAgICAgLSAvdG1wL2NhY2hlL1JvY2tldC5DaGF0Oi9jYWNoZQogIGRvY2tlcjoKICAgIGltYWdlOiBwbHVnaW5zL2RvY2tlcgogICAgcmVwbzogcm9ja2V0Y2hhdC9yb2NrZXQuY2hhdAogICAgZG9ja2VyZmlsZTogL2Ryb25lL2J1aWxkL0RvY2tlcmZpbGUKICAgIHN0b3JhZ2VfZHJpdmVyOiBvdmVybGF5CiAgICBjb250ZXh0OiAvZHJvbmUvYnVpbGQKICAgIHNlY3JldHM6IFsgZG9ja2VyX3VzZXJuYW1lLCBkb2NrZXJfcGFzc3dvcmQgXQogICAgdGFnOiBkZXNpZ25wcmV2aWV3Cg.vIwnazoqiKfxsC6hQHJFmB7jE0dvewf69xJgNxUWNic

packages/rocketchat-2fa/client/accountSecurity.html

@@ -1,13 +1,8 @@
 <template name="accountSecurity">
-	<section class="page-container page-home page-static">
-		<header class="fixed-title border-component-color">
-			{{> burger}}
-			<h2>
-				<span class="room-title">{{_ "Security"}}</span>
-			</h2>
-		</header>
-		<div class="content">
-			<div class="rocket-form">
+	<section class="preferences-page">
+			{{> header sectionName="Security"}}
+	<div class="preferences-page__content">
+		<form id="security" autocomplete="off" class="container">
 				<fieldset>
 					<div class="section">
 						<h1>{{_ "Two-factor_authentication"}}</h1>
@@ -30,9 +25,9 @@ <h1>{{_ "Two-factor_authentication"}}</h1>
 
 									<img src="{{imageData}}">
 
-									<form class="inline verify-code">
-										<input type="text" id="testCode" placeholder="{{_ "Enter_authentication_code"}}">
-										<button type="submit" class="button primary">{{_ "Verify"}}</button>
+									<form class="inline">
+										<input type="text" class="rc-input__element" id="testCode" placeholder="{{_ "Enter_authentication_code"}}">
+										<button class="button primary verify-code">{{_ "Verify"}}</button>
 									</form>
 								{{/unless}}
 							{{/if}}
@@ -52,7 +47,7 @@ <h1>{{_ "Backup_codes"}}</h1>
 						</div>
 					</fieldset>
 				{{/if}}
-			</div>
+			</form>
 		</div>
 	</section>
 </template>

packages/rocketchat-2fa/client/accountSecurity.js

@@ -29,6 +29,8 @@ Template.accountSecurity.helpers({
 
 Template.accountSecurity.events({
 	'click .enable-2fa'(event, instance) {
+		event.preventDefault();
+
 		Meteor.call('2fa:enable', (error, result) => {
 			instance.imageSecret.set(result.secret);
 			instance.imageData.set(qrcode(result.url, { size: 200 }));
@@ -41,7 +43,9 @@ Template.accountSecurity.events({
 		});
 	},
 
-	'click .disable-2fa'() {
+	'click .disable-2fa'(event) {
+		event.preventDefault();
+
 		modal.open({
 			title: t('Two-factor_authentication'),
 			text: t('Open_your_authentication_app_and_enter_the_code'),
@@ -70,7 +74,7 @@ Template.accountSecurity.events({
 		});
 	},
 
-	'submit .verify-code'(event, instance) {
+	'click .verify-code'(event, instance) {
 		event.preventDefault();
 
 		Meteor.call('2fa:validateTempToken', instance.find('#testCode').value, (error, result) => {
@@ -87,6 +91,8 @@ Template.accountSecurity.events({
 	},
 
 	'click .regenerate-codes'(event, instance) {
+		event.preventDefault();
+
 		modal.open({
 			title: t('Two-factor_authentication'),
 			text: t('Open_your_authentication_app_and_enter_the_code'),

packages/rocketchat-channel-settings-mail-messages/client/views/channelSettingsMailMessages.html

@@ -1,10 +1,10 @@
 <template name="channelSettingsMailMessages">
 	{{#if canSendEmail}}
-		<li>
-			<label>{{_ "Mail_Messages"}}</label>
-			<div>
-				<button type="button" class="button primary mail-messages">{{_ "Choose_messages"}}</button>
+		<label class="rc-user-info__label">
+			{{_ "Mail_Messages"}}
+			<div class="rc-user-info__description">
+				<button type="button" class="rc-button rc-button--outline rc-button--primary mail-messages">{{_ "Choose_messages"}}</button>
 			</div>
-		</li>
+		</label>
 	{{/if}}
 </template>

packages/rocketchat-channel-settings-mail-messages/client/views/mailMessagesInstructions.html

@@ -1,9 +1,6 @@
 <template name="mailMessagesInstructions">
 	<div class="content">
 		<div class="list-view mail-message">
-			<div class="title">
-				<h2>{{_ "Mail_Messages"}}</h2>
-			</div>
 			<p>{{_ "Mail_Messages_Instructions"}}</p>
 			<form>
 				<fieldset>
@@ -26,13 +23,13 @@ <h2>{{_ "Mail_Messages"}}</h2>
 					<div class="input-line double-col">
 						<label>{{_ "Additional_emails"}}</label>
 						<div>
-							<input type="text" name="to_emails" value="" />
+							<input type="text" name="to_emails" value=""  class="rc-input__element"/>
 						</div>
 					</div>
 					<div class="input-line double-col">
 						<label>{{_ "Subject"}}</label>
 						<div>
-							<input type="text" name="subject" value="{{_ "Mail_Messages_Subject" roomName}}" />
+							<input type="text" name="subject" class="rc-input__element" value="{{_ "Mail_Messages_Subject" roomName}}" />
 						</div>
 					</div>
 				</fieldset>
@@ -47,8 +44,8 @@ <h2>{{_ "Mail_Messages"}}</h2>
 				{{{_ "Mail_Message_No_messages_selected_select_all"}}}
 			</div>
 			<p style="margin-top: 30px">
-				<button type="button" class="button cancel">{{_ "Cancel"}}</button>
-				<button type="button" class="button primary send">{{_ "Send"}}</button>
+				<button class="rc-button rc-button--outline cancel">{{_ 'Cancel'}}</button>
+				<button class="rc-button rc-button--primary send">{{_ 'Send'}}</button>
 			</p>
 		</div>
 	</div>

packages/rocketchat-channel-settings/client/startup/tabBar.js

@@ -8,4 +8,14 @@ Meteor.startup(() => {
 		template: 'channelSettings',
 		order: 0
 	});
+
+	RocketChat.TabBar.addButton({
+		groups: ['channel', 'group', 'direct'],
+		id: 'mail-messages',
+		anonymous: true,
+		i18nTitle: 'Mail_Messages',
+		icon: 'mail',
+		template: 'mailMessagesInstructions',
+		order: 10
+	});
 });