diff --git a/.eslintrc.json b/.eslintrc.json index 013b76d80..98bed6974 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -110,7 +110,6 @@ "Presence": true, "presences": true, "Ps": true, - "ReactiveTabs": false, "Restivus": false, "SimpleSchema": false, "SubsManager": false, diff --git a/.meteor/packages b/.meteor/packages index 3211eb507..d05e51779 100644 --- a/.meteor/packages +++ b/.meteor/packages @@ -50,7 +50,6 @@ http@2.0.0! # force new http package # UI components ostrio:i18n reactive-var@1.0.12 -templates:tabs meteor-autosize shell-server@0.5.0 email@2.2.5 diff --git a/.meteor/versions b/.meteor/versions index 8fa670345..1d612cd97 100644 --- a/.meteor/versions +++ b/.meteor/versions @@ -121,7 +121,6 @@ socket-stream-client@0.5.2 spacebars@1.4.1 spacebars-compiler@1.3.1 standard-minifier-js@2.8.1 -templates:tabs@2.3.0 templating@1.4.1 templating-compiler@1.4.1 templating-runtime@1.5.0 diff --git a/client/components/lib/basicTabs.jade b/client/components/lib/basicTabs.jade new file mode 100644 index 000000000..cb08e81a6 --- /dev/null +++ b/client/components/lib/basicTabs.jade @@ -0,0 +1,11 @@ +template(name="basicTabs") + .basicTabs-container(class="{{name}}") + ul.tabs-list + each tabs + li.tab-item(class="{{isActiveTab slug}} {{class}}") {{name}} + .tabs-content-container + +Template.contentBlock + +template(name="tabContent") + section.tabs-content(class="{{isActiveTab slug}}" data-tab="{{slug}}") + +Template.contentBlock diff --git a/client/components/lib/basicTabs.js b/client/components/lib/basicTabs.js new file mode 100644 index 000000000..65892a2fa --- /dev/null +++ b/client/components/lib/basicTabs.js @@ -0,0 +1,50 @@ +const { ReactiveVar } = require('meteor/reactive-var'); + +Template.basicTabs.onCreated(function () { + const activeTab = this.data.activeTab + ? { slug: this.data.activeTab } + : this.data.tabs[0]; + this._activeTab = new ReactiveVar(activeTab); + + this.isActiveSlug = (slug) => { + const current = this._activeTab.get(); + return current && current.slug === slug; + }; +}); + +Template.basicTabs.helpers({ + isActiveTab(slug) { + if (Template.instance().isActiveSlug(slug)) { + return 'active'; + } + }, +}); + +Template.basicTabs.events({ + 'click .tab-item'(e, t) { + t._activeTab.set(this); + }, +}); + +function findBasicTabsInstance() { + let view = Blaze.currentView; + while (view) { + if (view.name === 'Template.basicTabs' && view.templateInstance) { + const inst = view.templateInstance(); + if (inst && inst.isActiveSlug) { + return inst; + } + } + view = view.parentView; + } + return null; +} + +Template.tabContent.helpers({ + isActiveTab(slug) { + const inst = findBasicTabsInstance(); + if (inst && inst.isActiveSlug(slug)) { + return 'active'; + } + }, +}); diff --git a/client/components/main/layouts.css b/client/components/main/layouts.css index 16209e766..5aed5a8c3 100644 --- a/client/components/main/layouts.css +++ b/client/components/main/layouts.css @@ -477,9 +477,39 @@ a:not(.disabled).is-active i.fa { .viewer a:hover { color: #333; } +.basicTabs-container .tabs-list { + text-align: left; + width: 100%; +} +.basicTabs-container .tabs-list .tab-item { + font-weight: 600; + font-size: 13px; + display: inline-block; + padding: 13px 15px; + margin: 0; + list-style: none; + cursor: pointer; + user-select: none; +} +.basicTabs-container .tabs-list .tab-item.active { + border-radius: 5px 5px 0 0; + border: 1px solid #ddd; + border-bottom: none; + margin-bottom: -1px !important; + padding: 12px 14px 14px 14px !important; + background-color: #fff; + color: #333; +} .basicTabs-container .tabs-content-container { padding: 0; padding-top: 15px; + border-top: 1px solid #ddd; +} +.basicTabs-container .tabs-content { + display: none; +} +.basicTabs-container .tabs-content.active { + display: block; } .no-scrollbars { scrollbar-width: none; diff --git a/client/config/reactiveTabs.js b/client/config/reactiveTabs.js deleted file mode 100644 index 5365c6d13..000000000 --- a/client/config/reactiveTabs.js +++ /dev/null @@ -1,4 +0,0 @@ -// XXX Since Blaze doesn't have a clean high component API, component API are -// also tweaky to use. I guess React would be a solution. -const template = 'basicTabs'; -ReactiveTabs.createInterface({ template });