forked from RocketChat/Rocket.Chat
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Tabbed user interface for custom room types creation
Addresses RocketChat#8264
- Loading branch information
Showing
13 changed files
with
191 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
77 changes: 77 additions & 0 deletions
77
packages/rocketchat-theme/client/imports/components/tab.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| .rc-tabs { | ||
| position: relative; | ||
|
|
||
| display: flex; | ||
|
|
||
| margin: 0 calc(var(--tabs-padding) / -2); | ||
| padding: calc(var(--tabs-padding) / 2); | ||
|
|
||
| list-style: none; | ||
|
|
||
| color: var(--color-gray); | ||
|
|
||
| font-size: 14px; | ||
|
|
||
| &::before { | ||
| position: absolute; | ||
| bottom: 0; | ||
|
|
||
| width: 100%; | ||
| height: 2px; | ||
|
|
||
| content: ''; | ||
|
|
||
| background: var(--color-gray-light); | ||
| } | ||
|
|
||
| &__tab { | ||
| position: relative; | ||
|
|
||
| margin: calc(var(--tabs-padding) / 2); | ||
| padding: 0 5px; | ||
|
|
||
| cursor: pointer; | ||
| transition: all 0.3s; | ||
|
|
||
| &-link { | ||
| color: inherit !important; | ||
| } | ||
|
|
||
| &:hover { | ||
| opacity: 0.5; | ||
| } | ||
|
|
||
| &.active, | ||
| &:active { | ||
| color: #1d74f5; | ||
|
|
||
| &::before { | ||
| position: absolute; | ||
| bottom: calc(var(--tabs-padding) * -1); | ||
| left: 0; | ||
|
|
||
| width: 100%; | ||
| height: 2px; | ||
|
|
||
| content: ''; | ||
|
|
||
| background: #1d74f5; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &__content { | ||
| padding-top: 10px; | ||
| & header h1 { /* in tab-containers, the first heading of the header is the tab strip itself */ | ||
| display: none; | ||
| } | ||
|
|
||
| &.inactive { | ||
| display: none; | ||
| } | ||
|
|
||
| &.active { | ||
| display: block; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -40,3 +40,7 @@ | |
|
|
||
| /* RTL */ | ||
| @import 'imports/general/rtl.css'; | ||
|
|
||
| /* tabs */ | ||
| @import 'imports/components/tab.css'; | ||
|
|
||
19 changes: 19 additions & 0 deletions
19
packages/rocketchat-ui/client/components/tabContainer.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <template name="tabContainer"> | ||
| <div class="rc-tabs__container"> | ||
| <nav class="rc-tabs"> | ||
| {{#each tab in tabs}} | ||
| <li class="rc-tabs__tab {{activeClass tab.template}}"> | ||
| <a class="rc-tabs__tab-link" href="#{{tab.template}}"> | ||
| {{_ tab.label}} | ||
| </a> | ||
| </li> | ||
| {{/each}} | ||
| </nav> | ||
|
|
||
| {{#each tab in tabs}} | ||
| <div class="rc-tabs__content {{activeClass tab.template}}"> | ||
| {{> Template.dynamic template=tab.template }} | ||
| </div> | ||
| {{/each}} | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| Template.tabContainer.helpers({ | ||
| activeClass(templateName) { | ||
| const instance = Template.instance(); | ||
| return instance.activeTemplate.get() === templateName ? 'active' : 'inactive'; | ||
| }, | ||
| }); | ||
|
|
||
| Template.tabContainer.events({ | ||
| 'click .rc-tabs__tab-link'(event, instance) { | ||
| event.preventDefault(); | ||
| const tmp = event.target.href.split('#'); | ||
| instance.activeTemplate.set(tmp[tmp.length - 1]); | ||
| } | ||
| }); | ||
|
|
||
| Template.tabContainer.onCreated(function(){ | ||
| this.activeTemplate = new ReactiveVar(this.data.tabs[0].template); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <template name="createRooms"> | ||
| <section class="create-channel"> | ||
| {{#if tabsNeeded }} | ||
| {{> tabContainer tabs=tabs}} | ||
| {{else}} | ||
| {{> createChannel }} | ||
| {{/if}} | ||
| </section> | ||
|
|
||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| const roomTypesBeforeStandard = function() { | ||
| const orderLow = RocketChat.roomTypes.roomTypesOrder.filter((roomTypeOrder) => roomTypeOrder.identifier === 'c')[0].order; | ||
| return RocketChat.roomTypes.roomTypesOrder.filter( | ||
| (roomTypeOrder) => roomTypeOrder.order < orderLow | ||
| ).map( | ||
| (roomTypeOrder) => { | ||
| return RocketChat.roomTypes.roomTypes[roomTypeOrder.identifier]; | ||
| } | ||
| ).filter((roomType) => roomType.creationTemplate); | ||
| }; | ||
| const roomTypesAfterStandard = function() { | ||
| const orderHigh = RocketChat.roomTypes.roomTypesOrder.filter((roomTypeOrder) => roomTypeOrder.identifier === 'd')[0].order; | ||
| return RocketChat.roomTypes.roomTypesOrder.filter( | ||
| (roomTypeOrder) => roomTypeOrder.order > orderHigh | ||
| ).map( | ||
| (roomTypeOrder) => { | ||
| return RocketChat.roomTypes.roomTypes[roomTypeOrder.identifier]; | ||
| } | ||
| ).filter((roomType) => roomType.creationTemplate); | ||
| }; | ||
|
|
||
| const allTemplatesOrdered = function() { | ||
| return roomTypesBeforeStandard() | ||
| .concat([{ | ||
| creationLabel: 'Create_A_New_Channel', | ||
| creationTemplate: 'createChannel' | ||
| }]) | ||
| .concat(roomTypesAfterStandard()) | ||
| .map((roomtype) => { | ||
| return { | ||
| label: roomtype.creationLabel, | ||
| template: roomtype.creationTemplate | ||
| }; | ||
| }); | ||
| }; | ||
|
|
||
| Template.createRooms.helpers({ | ||
| tabsNeeded() { | ||
| const instance = Template.instance(); | ||
| return !!(instance.data.roomTypesBeforeStandard.length || instance.data.roomTypesAfterStandard.length); | ||
| } | ||
| }); | ||
|
|
||
| Template.createRooms.onCreated(function() { | ||
| this.data.roomTypesBeforeStandard = roomTypesBeforeStandard(); | ||
| this.data.roomTypesAfterStandard = roomTypesAfterStandard(); | ||
| this.data.tabs = allTemplatesOrdered(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters