Skip to content

Commit

Permalink
Merge pull request #1026 from 3DStreet/style-updates
Browse files Browse the repository at this point in the history 
Style updates
  • Loading branch information
@kfarr
kfarr authored Jan 18, 2025
2 parents 40ace74 + c8660e6 commit e816828
Show file tree
Hide file tree
Showing 17 changed files with 664 additions and 293 deletions.
10 changes: 7 additions & 3 deletions src/editor/components/components/AdvancedComponents.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,13 @@ const AdvancedComponents = ({ entity }) => {

return (
<div className="advanced-components">
<Button variant="toolbtn" onClick={toggleAdvanced}>
{showAdvanced ? 'Hide Advanced' : 'Show Advanced'}
</Button>
<div className="details">
<div className="propertyRow">
<Button variant="toolbtn" onClick={toggleAdvanced}>
{showAdvanced ? 'Hide Advanced' : 'Show Advanced'}
</Button>
</div>
</div>
{showAdvanced &&
definedComponents.sort().map((key) => (
<div key={key} className={'details'}>
Expand Down
4 changes: 2 additions & 2 deletions src/editor/components/components/ComponentsContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,12 @@ export default class ComponentsContainer extends React.Component {
return (
<div className="components">
{entity.hasAttribute('data-no-transform') ? (
<div>
<div className="sidepanelContent">
<br />
<p>⚠️ Transformations disabled for this layer.</p>
</div>
) : (
<div>
<div className="sidepanelContent">
<CommonComponents entity={entity} />
</div>
)}
Expand Down
47 changes: 47 additions & 0 deletions src/editor/components/components/EnviroSidebar.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import PropTypes from 'prop-types';
import PropertyRow from './PropertyRow';

const EnviroSidebar = ({ entity }) => {
const componentName = 'street-environment';
// Check if entity and its components exist
const component = entity?.components?.[componentName];

return (
<div className="enviro-sidebar">
<div className="enviro-controls">
<div className="details">
{component && component.schema && component.data && (
<>
<PropertyRow
key="preset"
name="preset"
label="Preset"
schema={component.schema['preset']}
data={component.data['preset']}
componentname={componentName}
isSingle={false}
entity={entity}
/>
<PropertyRow
key="backgroundColor"
name="backgroundColor"
label="Background Color"
schema={component.schema['backgroundColor']}
data={component.data['backgroundColor']}
componentname={componentName}
isSingle={false}
entity={entity}
/>
</>
)}
</div>
</div>
</div>
);
};

EnviroSidebar.propTypes = {
entity: PropTypes.object.isRequired
};

export default EnviroSidebar;
118 changes: 72 additions & 46 deletions src/editor/components/components/Sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,14 @@ import {
ManagedStreetIcon,
AutoIcon,
ManualIcon,
ArrowLeftHookIcon
ArrowLeftHookIcon,
VideoCameraIcon,
GeospatialIcon,
LayersIcon,
SunIcon
} from '../../icons';
import GeoSidebar from './GeoSidebar'; // Make sure to create and import this new component
import GeoSidebar from './GeoSidebar';
import EnviroSidebar from './EnviroSidebar';
import IntersectionSidebar from './IntersectionSidebar';
import StreetSegmentSidebar from './StreetSegmentSidebar';
import ManagedStreetSidebar from './ManagedStreetSidebar';
Expand All @@ -38,6 +43,28 @@ export default class Sidebar extends React.Component {
};
}

getEntityIcon = (entity) => {
if (entity.getAttribute('managed-street')) {
return <ManagedStreetIcon />;
}
if (entity.getAttribute('street-segment')) {
return <SegmentIcon />;
}

switch (entity.id) {
case 'environment':
return <SunIcon />;
case 'reference-layers':
return <GeospatialIcon />;
case 'street-container':
return <LayersIcon />;
case 'cameraRig':
return <VideoCameraIcon />;
default:
return <Object24Icon />;
}
};

getParentComponentName = (entity) => {
const componentName = entity.getAttribute('data-parent-component');
const parentEntity = entity.parentElement;
Expand Down Expand Up @@ -118,14 +145,10 @@ export default class Sidebar extends React.Component {
{this.state.showSideBar ? (
<>
<div id="layers-title" onClick={this.toggleRightBar}>
<div className={'layersBlock'}>
{entity.getAttribute('managed-street') ? (
<ManagedStreetIcon />
) : entity.getAttribute('street-segment') ? (
<SegmentIcon />
) : (
<Object24Icon />
)}
<div className="layersBlock">
<div className="icon-container">
{this.getEntityIcon(entity)}
</div>
<span>{entityName || formattedMixin}</span>
</div>
<div id="toggle-rightbar">
Expand All @@ -134,10 +157,11 @@ export default class Sidebar extends React.Component {
</div>
<div className="scroll">
{entity.id !== 'reference-layers' &&
entity.id !== 'environment' &&
!entity.getAttribute('street-segment') ? (
<>
{entity.classList.contains('autocreated') && (
<>
<div className="sidepanelContent">
<div className="flex items-center gap-2">
<div className="scale-[0.8] transform">
<AutoIcon />
Expand Down Expand Up @@ -172,36 +196,41 @@ export default class Sidebar extends React.Component {
Convert to Manual
</Button>
</div>
</>
)}
{!!entity.mixinEls.length &&
!entity.classList.contains('autocreated') && (
<Mixins entity={entity} />
)}
{entity.hasAttribute('data-no-transform') ? (
<></>
) : (
<div id="sidebar-buttons">
<Button
variant={'toolbtn'}
onClick={() => renameEntity(entity)}
>
Rename
</Button>
<Button
variant={'toolbtn'}
onClick={() => cloneEntity(entity)}
>
Duplicate
</Button>
<Button
variant={'toolbtn'}
onClick={() => removeSelectedEntity()}
>
Delete
</Button>
</div>
)}
<div className="sidepanelContent">
{!!entity.mixinEls.length &&
!entity.classList.contains('autocreated') && (
<div className="details">
<Mixins entity={entity} />
</div>
)}
{entity.hasAttribute('data-no-transform') ? (
<></>
) : (
<div id="sidebar-buttons">
<Button
variant={'toolbtn'}
onClick={() => renameEntity(entity)}
>
Rename
</Button>
<Button
variant={'toolbtn'}
onClick={() => cloneEntity(entity)}
>
Duplicate
</Button>
<Button
variant={'toolbtn'}
onClick={() => removeSelectedEntity()}
>
Delete
</Button>
</div>
)}
</div>

{entity.getAttribute('intersection') && (
<IntersectionSidebar entity={entity} />
)}
Expand All @@ -223,6 +252,9 @@ export default class Sidebar extends React.Component {
{entity.id === 'reference-layers' && (
<GeoSidebar entity={entity} />
)}
{entity.id === 'environment' && (
<EnviroSidebar entity={entity} />
)}
</>
)}
</div>
Expand All @@ -238,13 +270,7 @@ export default class Sidebar extends React.Component {
{entityName || formattedMixin}
</span>
<div className="relative z-10">
{entity.getAttribute('managed-street') ? (
<ManagedStreetIcon />
) : entity.getAttribute('street-segment') ? (
<SegmentIcon />
) : (
<Object24Icon />
)}
{this.getEntityIcon(entity)}
</div>
</div>
</div>
Expand Down
77 changes: 45 additions & 32 deletions src/editor/components/components/StreetSegmentSidebar.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import PropTypes from 'prop-types';
import PropertyRow from './PropertyRow';
import { StreetSurfaceIcon } from '../../icons';

const StreetSegmentSidebar = ({ entity }) => {
const componentName = 'street-segment';
Expand Down Expand Up @@ -42,39 +43,51 @@ const StreetSegmentSidebar = ({ entity }) => {
isSingle={false}
entity={entity}
/>
<div className="propertyRow">
<div className="text">-----</div>
{/* props for street-segment but formatted as a fake 'surface' component */}
<div className="collapsible component">
<div className="static">
<div className="componentHeader collapsible-header">
<span className="componentTitle" title="Surface">
<StreetSurfaceIcon />
<span>Surface</span>
</span>
</div>
</div>
<div className="content">
<div className="collapsible-content">
<PropertyRow
key="surface"
name="surface"
label="Surface"
schema={component.schema['surface']}
data={component.data['surface']}
componentname={componentName}
isSingle={false}
entity={entity}
/>
<PropertyRow
key="color"
name="color"
label="Color"
schema={component.schema['color']}
data={component.data['color']}
componentname={componentName}
isSingle={false}
entity={entity}
/>
<PropertyRow
key="level"
name="level"
label="Curb Level"
schema={component.schema['level']}
data={component.data['level']}
componentname={componentName}
isSingle={false}
entity={entity}
/>
</div>
</div>
</div>
<PropertyRow
key="surface"
name="surface"
label="Surface"
schema={component.schema['surface']}
data={component.data['surface']}
componentname={componentName}
isSingle={false}
entity={entity}
/>
<PropertyRow
key="color"
name="color"
label="Color"
schema={component.schema['color']}
data={component.data['color']}
componentname={componentName}
isSingle={false}
entity={entity}
/>
<PropertyRow
key="level"
name="level"
label="Curb Level"
schema={component.schema['level']}
data={component.data['level']}
componentname={componentName}
isSingle={false}
entity={entity}
/>
</>
)}
</div>
Expand Down
Loading

0 comments on commit e816828

Please sign in to comment.