Permalink
Browse files

added section slug in section list title, corporate preset bug fix #60

  • Loading branch information...
1 parent f80a932 commit 4bcbc91738483666b61d262ef6d70b7b97db3d1d @nadimtuhin nadimtuhin committed Sep 6, 2015
@@ -26,7 +26,8 @@ let Section = React.createClass({
active: React.PropTypes.bool,
id: React.PropTypes.number,
index: React.PropTypes.number,
- title: React.PropTypes.string
+ title: React.PropTypes.string,
+ slug: React.PropTypes.string,
},
getInitialState(){
@@ -62,7 +63,7 @@ let Section = React.createClass({
},
render() {
- let {title, index} = this.props;
+ let {title, index, slug} = this.props;
let classes = cx('section', {
'active' : this.props.active
@@ -71,9 +72,11 @@ let Section = React.createClass({
return (
<div className={classes}>
<SectionTitle title={title} index={index} >
- <h3 onClick={this.handleScrollIntoView}>
+ <h3 title={slug} onClick={this.handleScrollIntoView}>
<span className="section-handle">
- <span className="fa fa-ellipsis-v"></span><span className="fa fa-ellipsis-v"></span>
+ <span className="fa fa-ellipsis-v"></span>
+ <span className="fa fa-ellipsis-v"></span>
+ <span className="fa fa-ellipsis-v"></span>
</span>
{title}
</h3>
@@ -1,22 +1,26 @@
-const _ = require('underscore');
-const React = require('react');
-const cx = require('classnames');
-const SortableMixin = require('sortablejs/react-sortable-mixin');
-const Button = require('react-bootstrap/lib/Button');
-const SectionLi = require('./Section.jsx');
-const AppStore = require('../../AppStore.js');
-const AppActions = require('../../AppActions.js');
-// const PureMixin = require('../../../mixins/PureMixin.js');
-const PureMixin = require('react/lib/ReactComponentWithPureRenderMixin');
-
-function setBodyClass(sections){
+const React = require('react');
+const cx = require('classnames');
+const SortableMixin = require('sortablejs/react-sortable-mixin');
+const Button = require('react-bootstrap/lib/Button');
+const SectionLi = require('./Section.jsx');
+const AppStore = require('../../AppStore.js');
+const AppActions = require('../../AppActions.js');
+//const PureMixin = require('react/lib/ReactComponentWithPureRenderMixin');
+
+import toolbelt from '../../../shared/lib/toolbelt.js';
+
+function setBodyClass(sections) {
if (sections === 0) {
jQuery('body').addClass('txop-noblock');
} else {
jQuery('body').removeClass('txop-noblock');
}
}
+function getKey() {
+ return toolbelt.randomId('k_');
+}
+
import "./style.less";
let SectionList = React.createClass({
@@ -35,7 +39,7 @@ let SectionList = React.createClass({
},
componentDidUpdate(){
- setBodyClass(this.props.sections.length)
+ setBodyClass(this.props.sections.length);
},
sortableOptions: {
@@ -48,11 +52,11 @@ let SectionList = React.createClass({
return;
}
- let sections = _.copy(this.props.sections);
- sections = _.move(sections, e.oldIndex, e.newIndex);
+ let sections = toolbelt.copy(this.props.sections);
+ sections = toolbelt.move(sections, e.oldIndex, e.newIndex);
- sections[e.oldIndex].key = _.randomId('s_');
- sections[e.newIndex].key = _.randomId('s_');
+ sections[e.oldIndex].key = getKey();
+ sections[e.newIndex].key = getKey();
AppStore.reorder(sections, e.newIndex);
},
@@ -61,32 +65,31 @@ let SectionList = React.createClass({
AppActions.updateSection(index, section);
},
- render() {
- let sections = this.props.sections;
- let activeSectionIndex = this.props.activeSectionIndex;
+ _renderSectionList(section, index){
+ let active = this.props.activeSectionIndex === index;
- let sectionsClass = cx("list-sections");
+ return (
+ <SectionLi
+ active={active}
+ slug={section.slug}
+ title={section.title}
+ key={section.key}
+ id={section.id}
+ index={index}/>
+ );
+ },
+
+ render() {
+ let {sections, openBlocks} = this.props;
return (
- <div className="op-section-list">
- <div className={sectionsClass}>
- <Button bsStyle='primary' className="btn-block" onClick={this.props.openBlocks}>
- <span className="fa fa-plus"></span> Add Block
- </Button>
-
- <div ref="sections">
- {sections.map((section, index)=> {
- return (
- <SectionLi
- openMenuScreen={this.showMenuScreen}
- active={activeSectionIndex === index}
- id={section.id}
- title={section.title}
- key={section.key}
- index={index}/>
- );
- })}
- </div>
+ <div className="list-sections">
+ <Button bsStyle='primary' className="btn-block" onClick={openBlocks}>
+ <span className="fa fa-plus"></span> Add Block
+ </Button>
+
+ <div ref="sections">
+ {sections.map(this._renderSectionList)}
</div>
</div>
); //end jsx
@@ -1,19 +1,19 @@
-const _ = require('underscore');
-const swal = require('sweetalert');
-const React = require('react');
-const Tab = require('./Tab.jsx');
-const TabPane = require('../../../shared/components/TabPane.jsx');
-const OptionActions = require('../../../Optionspanel/OptionActions.js');
-const SectionTransformer = require('../../../shared/lib/SectionTransformer.js');
-const ODataStore = require('../../../shared/lib/ODataStore.js');
-const AppActions = require('../../AppActions.js');
-const AppStore = require('../../AppStore.js');
-const SectionList = require('../section-list/SectionList.jsx');
-const SectionControls = require('./SectionControls.jsx');
-const Settings = require("./Settings.jsx");
-const Menu = require("./Menu.jsx");
-const $ = jQuery;
-const Footer = require('./../section-list/Footer.jsx');
+const _ = require('underscore');
+const swal = require('sweetalert');
+const React = require('react');
+const Tab = require('./Tab.jsx');
+const TabPane = require('../../../shared/components/TabPane.jsx');
+const OptionActions = require('../../../Optionspanel/OptionActions.js');
+const SectionTransformer = require('../../../shared/onepager/sectionTransformer.js');
+const ODataStore = require('../../../shared/onepager/ODataStore.js');
+const AppActions = require('../../AppActions.js');
+const AppStore = require('../../AppStore.js');
+const SectionList = require('../section-list/SectionList.jsx');
+const SectionControls = require('./SectionControls.jsx');
+const Settings = require("./Settings.jsx");
+const Menu = require("./Menu.jsx");
+const $ = jQuery;
+const Footer = require('./../section-list/Footer.jsx');
const BlockCollection = require('../blocks/BlockCollection.jsx');
@@ -90,24 +90,63 @@ let Sidebar = React.createClass({
});
},
- render() {
- let {sections, blocks, activeSectionIndex, activeSection, isDirty} = this.props;
+ handleTabClick(id){
+ AppStore.setTabState({active: id});
+ },
+
+ _renderTabs(){
+ let handleTabClick = this.handleTabClick;
let isSettingsDirty = this.state.isSettingsDirty;
- let sectionEditable = activeSectionIndex !== null;
- let activeTab = this.props.sidebarTabState.active;
- let sectionSettings = activeSection ? _.pick(activeSection, ['settings', 'contents', 'styles']) : {};
+ let activeTab = this.props.sidebarTabState.active;
+ let {isDirty} = this.props;
+ let buildModeUrl = ODataStore.disableBuildModeUrl;
let saveClasses = cx({
"fa fa-refresh fa-spin": this.state.saving,
"fa fa-check": !this.state.saving
});
- let handleTabClick = function (id) {
- AppStore.setTabState({active: id});
- };
+ return (
+ <ul className='tx-nav tx-nav-tabs'>
+ <Tab onClick={handleTabClick} id='op-sections' icon="cubes" title='Layout' active={activeTab}
+ icon2="arrow-left" parent={true}/>
+ <Tab onClick={handleTabClick} id='op-contents' icon='sliders' title='Contents' active={activeTab}/>
+ <Tab onClick={handleTabClick} id='op-blocks' icon='cube' title='Blocks' active={activeTab}/>
+ <Tab onClick={handleTabClick} id='op-menu' icon='link' title='Menu' active={activeTab}
+ visibleOn="op-sections"/>
+ <Tab onClick={handleTabClick} id='op-settings' icon='cog' title='Global Settings' active={activeTab}
+ visibleOn="op-sections"/>
+
+ <div className="btn-group">
+ {
+ activeTab === 'op-settings' ?
+ <button disabled={!isSettingsDirty} onClick={this.handleGlobalSettingsSave}
+ className='btn btn-primary btn--save'>
+ <span className={saveClasses}></span>
+ </button> :
+ <button disabled={!isDirty} onClick={this.handleSave} className='btn btn-primary btn--save'>
+ <span className={saveClasses}></span>
+ </button>
+ }
+ <a href={buildModeUrl} className="btn btn-primary" data-toggle="tooltip"
+ data-placement="bottom" title="Close">
+ <span className="fa fa-close"></span>
+ </a>
+ </div>
+ </ul>
+ );
+ },
+
+ render() {
+ let {sections, blocks, activeSectionIndex, activeSection} = this.props;
+ let sectionEditable = activeSectionIndex !== null;
+ let activeTab = this.props.sidebarTabState.active;
+ let sectionSettings = activeSection ? _.pick(activeSection, ['settings', 'contents', 'styles']) : {};
+
+ let handleTabClick = this.handleTabClick;
let update = (key, fields)=> {
- let section = _.copy(sections[activeSectionIndex]);
+ let section = _.copy(sections[activeSectionIndex]);
section[key] = fields;
AppActions.updateSection(activeSectionIndex, section);
};
@@ -119,45 +158,23 @@ let Sidebar = React.createClass({
return (
<div className="txop-sidebar op-ui clearfix">
- <ul className='tx-nav tx-nav-tabs'>
- <Tab onClick={handleTabClick} id='op-sections' icon="cubes" title='Layout' active={activeTab} icon2="arrow-left" parent={true}/>
- <Tab onClick={handleTabClick} id='op-contents' icon='sliders' title='Contents' active={activeTab} />
- <Tab onClick={handleTabClick} id='op-blocks' icon='cube' title='Blocks' active={activeTab} />
- <Tab onClick={handleTabClick} id='op-menu' icon='link' title='Menu' active={activeTab} visibleOn="op-sections" />
- <Tab onClick={handleTabClick} id='op-settings' icon='cog' title='Global Settings' active={activeTab} visibleOn="op-sections" />
-
- <div className="btn-group">
- {
- activeTab === 'op-settings' ?
- <button disabled={!isSettingsDirty} onClick={this.handleGlobalSettingsSave} className='btn btn-primary btn--save'>
- <span className={saveClasses}></span>
- </button> :
- <button disabled={!isDirty} onClick={this.handleSave} className='btn btn-primary btn--save'>
- <span className={saveClasses}></span>
- </button>
- }
- <a href={ODataStore.disableBuildModeUrl} className="btn btn-primary" data-toggle="tooltip"
- data-placement="bottom" title="Close">
- <span className="fa fa-close"></span>
- </a>
- </div>
- </ul>
+ {this._renderTabs()}
<div className='tab-content' ref='tabContents'>
<TabPane id='op-sections' active={activeTab}>
- <SectionList
- openBlocks={handleTabClick.bind(this, 'op-blocks')}
- activeSectionIndex={activeSectionIndex}
- blocks={blocks}
- sections={sections} />
+ <SectionList
+ openBlocks={handleTabClick.bind(this, 'op-blocks')}
+ activeSectionIndex={activeSectionIndex}
+ blocks={blocks}
+ sections={sections}/>
</TabPane>
<TabPane id="op-blocks" active={activeTab}>
<BlockCollection blocks={blocks}/>
</TabPane>
<TabPane id='op-menu' active={activeTab}>
- <Menu sections={sections} />
+ <Menu sections={sections}/>
</TabPane>
<TabPane id='op-contents' active={activeTab}>
Oops, something went wrong.

0 comments on commit 4bcbc91

Please sign in to comment.