h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

Added Settings tray with initial sections as details elements

Browse Source
This commit is contained in:
Frank Johnson
2021-09-11 05:43:29 -04:00
parent 0d7e958505
commit e47ad59003
2 changed files with 3 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/web/src/components/IdeSideBar/IdeSideBar.tsx
View File

@@ -5,7 +5,6 @@ import { sidebarTopConfig, sidebarBottomConfig, sidebarCombinedConfig } from './
function TabToggle({ item, className = "", active, onChange, onClick }) { function TabToggle({ item, className = "", active, onChange, onClick }) {
return ( return (
<label <label
key={'tab-'+item.name}
className={`tabToggle${item.disabled ? ' disabled' : ''}${active ? ' active' : ''} ${className}`}> className={`tabToggle${item.disabled ? ' disabled' : ''}${active ? ' active' : ''} ${className}`}>
<input name="sidebar-tabs" <input name="sidebar-tabs"
type="radio" type="radio"
@@ -45,6 +44,7 @@ const IdeSideBar = () => {
active={ selectedTab === topItem.name } active={ selectedTab === topItem.name }
onChange={ () => setSelectedTab(topItem.name) } onChange={ () => setSelectedTab(topItem.name) }
onClick={ onTabClick(topItem.name) } onClick={ onTabClick(topItem.name) }
key={ 'tab-' + i }
/> />
))} ))}
</div> </div>
@@ -55,13 +55,14 @@ const IdeSideBar = () => {
active={ selectedTab === bottomItem.name } active={ selectedTab === bottomItem.name }
onChange={ () => setSelectedTab(bottomItem.name) } onChange={ () => setSelectedTab(bottomItem.name) }
onClick={ onTabClick(bottomItem.name) } onClick={ onTabClick(bottomItem.name) }
key={ 'tab-' + (sidebarTopConfig.length+i) }
/> />
))} ))}
</div> </div>
</fieldset> </fieldset>
{ sidebarCombinedConfig.find(item => item.name === selectedTab)?.panel && ( { sidebarCombinedConfig.find(item => item.name === selectedTab)?.panel && (
<div className="w-56 bg-ch-gray-800 text-ch-gray-300" style={{ height: 'calc(100% - 6px)', margin: '3px'}}> <div className="w-56 bg-ch-gray-800 text-ch-gray-300" style={{ height: 'calc(100% - 6px)', margin: '3px'}}>
<h2 className="py-2 px-4 bg-ch-gray-760 mb-2">{ selectedTab }</h2> <h2 className="flex items-center h-9 px-4 bg-ch-gray-760">{ selectedTab }</h2>
{ sidebarCombinedConfig.find(item => item.name === selectedTab).panel } { sidebarCombinedConfig.find(item => item.name === selectedTab).panel }
</div> </div>
) } ) }

4
app/web/src/index.css
View File

@@ -40,10 +40,6 @@
.tabToggle.disabled { .tabToggle.disabled {
@apply text-ch-gray-550 cursor-not-allowed; @apply text-ch-gray-550 cursor-not-allowed;
} }
.sidebarContainer {
@apply p-2;
}
} }