Skip to content

Commit

Permalink
Add search option in the header in mobile view
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kailash0311
Kailash0311 committed Dec 17, 2019
1 parent eec16a2 commit d5943a2
Show file tree
Hide file tree
Showing 10 changed files with 270 additions and 187 deletions.
7 changes: 7 additions & 0 deletions app/search/client/provider/result.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,13 @@ Meteor.startup(function() {
context: ['search'],
action() {
const { msg: message } = messageArgs(this);
if (Session.get('openSearchPage')) {
Session.set('openSearchPage', false);
window.setTimeout(() => {
RoomHistoryManager.getSurroundingMessages(message, 50);
}, 400);
return;
}
if (Session.get('openedRoom') === message.rid) {
return RoomHistoryManager.getSurroundingMessages(message, 50);
}
Expand Down
12 changes: 7 additions & 5 deletions app/search/client/search/search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@
{{/if}}
{{else}}
<div class="rocket-search-tab list-view {{provider.key}}">
{{#if provider.description}}
<div class="title">
<p>{{{_ provider.description}}}</p>
</div>
{{/if}}
{{#unless isMobile}}
{{#if provider.description}}
<div class="title">
<p>{{{_ provider.description}}}</p>
</div>
{{/if}}
{{/unless}}
<div class="control rocket-search-input">
<form class="search-form" role="form">
<div class="rc-input">
Expand Down
5 changes: 5 additions & 0 deletions app/search/client/search/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { TAPi18n } from 'meteor/rocketchat:tap-i18n';
import toastr from 'toastr';
import _ from 'underscore';

import { isMobile } from '../../../utils/client';

Template.RocketSearch.onCreated(function() {
this.provider = new ReactiveVar();
this.isActive = new ReactiveVar(false);
Expand Down Expand Up @@ -143,6 +145,9 @@ Template.RocketSearch.events = {
};

Template.RocketSearch.helpers({
isMobile() {
return isMobile();
},
error() {
return Template.instance().error.get();
},
Expand Down
23 changes: 16 additions & 7 deletions app/theme/client/imports/components/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -420,12 +420,7 @@
display: none;
}

&__block {
margin: 0 0.25rem;
}

&__block-action {
order: 2;

& + & {
border-left: 1px var(--color-gray) solid;
Expand All @@ -435,10 +430,24 @@
border-left: 0;
}
}
.rc-room-actions {
&__action {
.rc-room-actions__button {
.tab-button-icon {
height: 1.2em;
}
}
}
}
}

&__favorite {
&__search-button {
margin: 0 0.25em;
order: 1;
&__action {
&__icon {
height: 1.2em;
}
}
}

&__data {
Expand Down
4 changes: 4 additions & 0 deletions app/ui-flextab/client/flexTabBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { hasAllPermission } from '../../authorization';
import { popover, TabBar, Layout } from '../../ui-utils';
import { t } from '../../utils';
import { settings } from '../../settings';
import { isMobile } from '../../utils/client';

const commonHelpers = {
title() {
Expand Down Expand Up @@ -53,6 +54,9 @@ const filterButtons = (button, anonymous, rid) => {
if (button.groups.indexOf(Template.instance().tabBar.currentGroup()) === -1) {
return false;
}
if (button.id === 'rocket-search' && isMobile()) {
return false;
}
if (button.id === 'addUsers' && !canShowAddUsersButton(rid)) {
return false;
}
Expand Down
3 changes: 1 addition & 2 deletions app/ui-utils/client/lib/RoomHistoryManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,8 +227,7 @@ export const RoomHistoryManager = new class {
if (!message || !message.rid) {
return;
}

const instance = Blaze.getView($('.messages-box .wrapper')[0]).templateInstance();
const instance = Blaze.getView($('.messages-box .wrapper')[0]).parentView.templateInstance();

if (ChatMessage.findOne({ _id: message._id, _hidden: { $ne: true } })) {
const wrapper = $('.messages-box .wrapper');
Expand Down
139 changes: 80 additions & 59 deletions app/ui/client/components/header/headerRoom.html
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,98 @@
<template name="headerRoom">
<header class="rc-header rc-header--room" >
<div class="rc-header__wrap">

<div class="rc-header__block rc-header--burger">
{{> burger}}
</div>

{{#if isDiscussion}}
<div class="rc-header__block rc-header__block--action js-open-parent-channel rc-tooltip rc-tooltip--down rc-tooltip--start" aria-label={{_ "Back_to_room"}}>
<span class="rc-header__first-icon">{{> icon block="rc-header__icon rc-header__icon" icon="back"}}</span>
{{#if openSearchPage}}
<header class="contextual-bar__header contextual-bar__header--empty">
<button class ="js-close-search" aria-label="{{_ "Close"}}" style="font-size: 1.2em;">
{{> icon icon="back"}}
</button>
<div class="contextual-bar__header-data">
{{> icon block="contextual-bar__header-icon" icon=icon}}
<h1 class="contextual-bar__header-title">Search Messages</h1>
</div>
{{/if}}
</header>
{{else}}
<header class="rc-header rc-header--room" >
<div class="rc-header__wrap">

{{#if isToggleFavoriteButtonVisible}}
<div class="rc-header__block rc-header__favorite rc-header__block--action">
<button aria-label="{{toggleFavoriteButtonIconLabel}}" type="button" class="rc-header__toggle-favorite rc-header__first-icon js-favorite">
{{> icon block="rc-header__icon" icon=toggleFavoriteButtonIcon}}
</button>
<div class="rc-header__block rc-header--burger">
{{> burger}}
</div>
{{/if}}

<!-- TODO: fix it style and helper -->
{{#if tokenAccessChannel}}
<i class="icon-tokenpass" aria-label="{{_ "Tokenpass_Channel_Label"}}"></i>
{{/if}}
{{#if isDiscussion}}
<div class="rc-header__block rc-header__block--action js-open-parent-channel rc-tooltip rc-tooltip--down rc-tooltip--start" aria-label={{_ "Back_to_room"}}>
<span class="rc-header__first-icon">{{> icon block="rc-header__icon rc-header__icon" icon="back"}}</span>
</div>
{{/if}}

<div class="rc-header__content rc-header__block">
{{#if isDirect}}
<div class="rc-header__block">
<div class="rc-header__image">
{{> avatar username=avatarBackground}}
{{#if isToggleFavoriteButtonVisible}}
<div class="rc-header__block rc-header__favorite rc-header__block--action">
<button aria-label="{{toggleFavoriteButtonIconLabel}}" type="button" class="rc-header__toggle-favorite rc-header__first-icon js-favorite">
{{> icon block="rc-header__icon" icon=toggleFavoriteButtonIcon}}
</button>
</div>
</div>
{{/if}}

<div class="rc-header__data">
{{#unless secondaryName}}
<div class="rc-header__name">{{> icon block="rc-header__icon" icon=roomIcon}}{{roomName}}</div>
{{else}}
<div class="rc-header__name">{{roomName}} <div class="rc-header__username">@{{secondaryName}}</div></div>
{{/unless}}
<!-- TODO: fix it style and helper -->
{{#if tokenAccessChannel}}
<i class="icon-tokenpass" aria-label="{{_ "Tokenpass_Channel_Label"}}"></i>
{{/if}}

<div class="rc-header__content rc-header__block">
{{#if isDirect}}
<span class="rc-header__status">
<div class="rc-header__status-bullet rc-header__status-bullet--{{userStatus}}" title="{{_ userStatus}}"></div>
<div class="rc-header__visual-status">{{userStatusText}}</div>
</span>
{{else}}
{{#if roomTopic}}<span class="rc-header__topic">{{{roomTopic}}}</span>{{/if}}
<div class="rc-header__block">
<div class="rc-header__image">
{{> avatar username=avatarBackground}}
</div>
</div>
{{/if}}

<div class="rc-header__data">
{{#unless secondaryName}}
<div class="rc-header__name">{{> icon block="rc-header__icon" icon=roomIcon}}{{roomName}}</div>
{{else}}
<div class="rc-header__name">{{roomName}} <div class="rc-header__username">@{{secondaryName}}</div></div>
{{/unless}}

{{#if isDirect}}
<span class="rc-header__status">
<div class="rc-header__status-bullet rc-header__status-bullet--{{userStatus}}" title="{{_ userStatus}}"></div>
<div class="rc-header__visual-status">{{userStatusText}}</div>
</span>
{{else}}
{{#if roomTopic}}<span class="rc-header__topic">{{{roomTopic}}}</span>{{/if}}
{{/if}}
</div>

{{#if sentimentSmile}}
<span class="sentiment">{{sentimentSmile}}</span>
{{/if}}
{{#if isTranslated}}
<i class="icon-language" aria-label="{{_ "Translated"}}"></i>
{{/if}}
</div>

{{#if sentimentSmile}}
<span class="sentiment">{{sentimentSmile}}</span>
{{#if isSection}}
<span class="rc-header__block">{{_ sectionName}}</span>
{{/if}}
{{#if isTranslated}}
<i class="icon-language" aria-label="{{_ "Translated"}}"></i>
{{/if}}
</div>

{{#if isSection}}
<span class="rc-header__block">{{_ sectionName}}</span>
{{/if}}
{{#if encryptionState}}
<div class="rc-header__block rc-header__block-action rc-header__encryption">
<div class="rc-room-actions">
<button aria-label="{{_ 'E2E_Enabled'}}" class="rc-tooltip rc-tooltip--down rc-room-actions__action tab-button rc-header__toggle-encryption js-toggle-encryption {{encryptionState}}">{{> icon icon="key"}}</button>
{{#if encryptionState}}
<div class="rc-header__block rc-header__block-action rc-header__encryption">
<div class="rc-room-actions">
<button aria-label="{{_ 'E2E_Enabled'}}" class="rc-tooltip rc-tooltip--down rc-room-actions__action tab-button rc-header__toggle-encryption js-toggle-encryption {{encryptionState}}">{{> icon icon="key"}}</button>
</div>
</div>
{{/if}}
{{#if showSearchButton}}
{{#with getSearchButton}}
<div class="rc-header__block rc-header__search-button">
<button type="button" class="js-open-search rc-header__search-button__action">
{{> icon block="rc-header__icon rc-header__search-button__action__icon" icon=icon}}
</button>
</div>
{{/with}}
{{/if}}
{{#if Template.contentBlock}}
{{> Template.contentBlock}}
{{/if}}
</div>
{{/if}}
{{#if Template.contentBlock}}
{{> Template.contentBlock}}
{{/if}}
</div>
</header>
</header>
{{/if}}
</template>
29 changes: 26 additions & 3 deletions app/ui/client/components/header/headerRoom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Session } from 'meteor/session';
import { Template } from 'meteor/templating';
import { FlowRouter } from 'meteor/kadira:flow-router';

import { t, roomTypes, handleError } from '../../../../utils';
import { t, roomTypes, handleError, isMobile } from '../../../../utils';
import { TabBar, fireGlobalEvent, call } from '../../../../ui-utils';
import { ChatSubscription, Rooms, ChatRoom } from '../../../../models';
import { settings } from '../../../../settings';
Expand All @@ -29,10 +29,21 @@ Template.headerRoom.helpers({
isToggleFavoriteButtonVisible: () => Template.instance().state.get('favorite') !== null,
toggleFavoriteButtonIconLabel: () => (Template.instance().state.get('favorite') ? t('Unfavorite') : t('Favorite')),
toggleFavoriteButtonIcon: () => (Template.instance().state.get('favorite') ? 'star-filled' : 'star'),

showSearchButton: () => isMobile(),
openSearchPage() {
if (!isMobile()) {
return;
}
return Session.get('openSearchPage');
},
back() {
return Template.instance().data.back;
},
getSearchButton() {
return TabBar.getButtons().filter(function(item) {
return item.id === 'rocket-search';
})[0];
},
avatarBackground() {
const roomData = Session.get(`roomData${ this._id }`);
if (!roomData) { return ''; }
Expand Down Expand Up @@ -136,6 +147,18 @@ Template.headerRoom.helpers({
});

Template.headerRoom.events({
'click .js-open-search'() {
if (!Session.get('openSearchPage')) {
Session.set('openSearchPage', true);
} else {
Session.set('openSearchPage', false);
}
},

'click .js-close-search'() {
Session.set('openSearchPage', !Session.get('openSearchPage'));
},

'click .iframe-toolbar .js-iframe-action'(e) {
fireGlobalEvent('click-toolbar-button', { id: this.id });
e.currentTarget.querySelector('button').blur();
Expand Down Expand Up @@ -203,7 +226,7 @@ const loadUserStatusText = () => {

Template.headerRoom.onCreated(function() {
this.state = new ReactiveDict();

Session.set('openSearchPage', false);
const isFavoritesEnabled = () => settings.get('Favorite_Rooms');

const isDiscussion = (rid) => {
Expand Down
Loading

0 comments on commit d5943a2

Please sign in to comment.