From f6f27321ff8df650de6e5535d23178ba48d2d36a Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Wed, 15 Jan 2025 14:25:47 -0800 Subject: [PATCH 01/17] v1 working last issue is text wrapping --- src/editor/components/scenegraph/GeoLayer.js | 21 +-- src/editor/icons/icons.jsx | 144 +++++++++++++++++++ src/editor/lib/entity.js | 15 ++ src/editor/style/entity.scss | 59 +++++++- src/editor/style/scenegraph.scss | 9 +- 5 files changed, 235 insertions(+), 13 deletions(-) diff --git a/src/editor/components/scenegraph/GeoLayer.js b/src/editor/components/scenegraph/GeoLayer.js index ac687344d..29f8ba157 100644 --- a/src/editor/components/scenegraph/GeoLayer.js +++ b/src/editor/components/scenegraph/GeoLayer.js @@ -3,6 +3,7 @@ import useStore from '@/store'; import { useAuthContext, useGeoContext } from '@/editor/contexts/index.js'; import Events from '@/editor/lib/Events'; import posthog from 'posthog-js'; +import { GeospatialIcon } from '../../icons'; const GeoLayer = () => { const [clicked, setClicked] = useState(false); @@ -75,17 +76,19 @@ const GeoLayer = () => { return (
{visibilityButton} - - {!streetGeo ? ( - <> - Set Location 🌎 - - ) : ( - Geospatial Layer 🌎 - )} +
+ +
+ + Geospatial + {!streetGeo && Set Location}
); diff --git a/src/editor/icons/icons.jsx b/src/editor/icons/icons.jsx index 10d15a79a..3e98bd699 100644 --- a/src/editor/icons/icons.jsx +++ b/src/editor/icons/icons.jsx @@ -1,3 +1,132 @@ +export const SunIcon = () => ( + + + + + + + + + + + +); + +export const GeospatialIcon = () => ( + + + + + + + + + + + +); + +export const GeospatialIconWhite = () => ( + + + +); + export const ArrowLeftHookIcon = () => ( ( ); +export const VideoCameraIcon = () => ( + + + +); + export const Rotate24Icon = () => ( , + environment: , + 'street-container': +}; const ICONS = { camera: 'fa-camera', mesh: 'fa-cube', @@ -606,10 +612,19 @@ export function printEntity(entity) { icons += ` `; } + // Icons for new entities -- if entity id matches ICONS_NEW then use icon + let icon = null; + for (let entityId in ICONS_NEW) { + if (entityId === entity.id) { + icon = ICONS_NEW[entityId]; + } + } + // Custom display name for a layer if available, otherwise use entity name or tag let displayName = getEntityDisplayName(entity); return ( + {icon && {icon}} {displayName &&  {displayName}} {!!icons && ( span { display: flex; @@ -100,6 +102,10 @@ .entityPrint { flex-basis: 237px; margin-left: 10.5px; + min-width: 0; // Important for text-overflow to work + display: flex; + align-items: center; + gap: 4px; } } } @@ -165,7 +171,6 @@ color: variables.$blue-100; } .entityIcons { - display: none; margin-left: 2px; } .entityActions { From 228c1cb1674051c266f11776976a29fcddea2e36 Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Wed, 15 Jan 2025 14:48:45 -0800 Subject: [PATCH 02/17] handle long entity names --- src/editor/components/scenegraph/Entity.js | 2 +- src/editor/style/entity.scss | 3 +++ src/editor/style/scenegraph.scss | 21 +++++++++++++-------- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/editor/components/scenegraph/Entity.js b/src/editor/components/scenegraph/Entity.js index 335a6af5f..4479d937d 100644 --- a/src/editor/components/scenegraph/Entity.js +++ b/src/editor/components/scenegraph/Entity.js @@ -78,7 +78,7 @@ export default class Entity extends React.Component { ); } else { - collapse = ; + collapse = ; } // Visibility button. diff --git a/src/editor/style/entity.scss b/src/editor/style/entity.scss index b4ff80237..a7f6ed8f4 100644 --- a/src/editor/style/entity.scss +++ b/src/editor/style/entity.scss @@ -6,6 +6,9 @@ overflow: hidden; text-overflow: ellipsis; min-width: 0; // Required for text-overflow to work in flex containers + flex: 1; // Allow the container to grow + margin-left: 10.5px; + gap: 4px; } .entityName { diff --git a/src/editor/style/scenegraph.scss b/src/editor/style/scenegraph.scss index 1442ef914..1aa435391 100644 --- a/src/editor/style/scenegraph.scss +++ b/src/editor/style/scenegraph.scss @@ -99,14 +99,6 @@ align-items: center; flex-direction: row; position: relative; - .entityPrint { - flex-basis: 237px; - margin-left: 10.5px; - min-width: 0; // Important for text-overflow to work - display: flex; - align-items: center; - gap: 4px; - } } } .entity:first-child { @@ -208,6 +200,19 @@ width: 14px; right: 0px; position: absolute; + &::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-45%, -50%); + width: 20px; + height: 20px; + background: variables.$darkgray-800; + border-radius: 50%; + z-index: -1; + } + z-index: 1; } .fa-eye, .fa-eye-slash { From b6c936b344683b5e2f7153afc2477a3e62a7adfd Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Wed, 15 Jan 2025 14:57:07 -0800 Subject: [PATCH 03/17] fix geo spacing --- src/editor/components/scenegraph/GeoLayer.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/editor/components/scenegraph/GeoLayer.js b/src/editor/components/scenegraph/GeoLayer.js index 29f8ba157..f84709124 100644 --- a/src/editor/components/scenegraph/GeoLayer.js +++ b/src/editor/components/scenegraph/GeoLayer.js @@ -79,13 +79,16 @@ const GeoLayer = () => { className={`layersBlock py-2 pl-4 ${clicked ? 'bg-violet-600' : 'hover:bg-violet-600 hover:shadow-lg'} cursor-pointer`} > {visibilityButton} -
+
Geospatial {!streetGeo && Set Location} From bfe609035369bec556f58e9a27225ced89ff4bfe Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Wed, 15 Jan 2025 15:05:15 -0800 Subject: [PATCH 04/17] remove old icons --- src/editor/lib/entity.js | 29 ++++------------------------- 1 file changed, 4 insertions(+), 25 deletions(-) diff --git a/src/editor/lib/entity.js b/src/editor/lib/entity.js index 024ac6ccb..c122e85cc 100644 --- a/src/editor/lib/entity.js +++ b/src/editor/lib/entity.js @@ -587,36 +587,21 @@ export function getEntityDisplayName(entity) { /** * Entity representation. */ -const ICONS_NEW = { +const ICONS = { cameraRig: , environment: , 'street-container': }; -const ICONS = { - camera: 'fa-camera', - mesh: 'fa-cube', - light: 'fa-lightbulb-o', - text: 'fa-font' -}; + export function printEntity(entity) { if (!entity) { return ''; } - // Icons. - let icons = ''; - for (let objType in ICONS) { - if (!entity.getObject3D(objType)) { - continue; - } - icons += ` `; - } - - // Icons for new entities -- if entity id matches ICONS_NEW then use icon let icon = null; - for (let entityId in ICONS_NEW) { + for (let entityId in ICONS) { if (entityId === entity.id) { - icon = ICONS_NEW[entityId]; + icon = ICONS[entityId]; } } @@ -626,12 +611,6 @@ export function printEntity(entity) { {icon && {icon}} {displayName &&  {displayName}} - {!!icons && ( - - )} ); } From a745d18c151ba35996e41d3760aca6a152b8bf35 Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Wed, 15 Jan 2025 21:36:46 -0800 Subject: [PATCH 05/17] add custom enviro sidebar --- .../components/components/EnviroSidebar.js | 47 +++++++++++++++++++ src/editor/components/components/Sidebar.js | 7 ++- 2 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 src/editor/components/components/EnviroSidebar.js diff --git a/src/editor/components/components/EnviroSidebar.js b/src/editor/components/components/EnviroSidebar.js new file mode 100644 index 000000000..158a159ef --- /dev/null +++ b/src/editor/components/components/EnviroSidebar.js @@ -0,0 +1,47 @@ +import PropTypes from 'prop-types'; +import PropertyRow from './PropertyRow'; + +const GeoSidebar = ({ entity }) => { + const componentName = 'street-environment'; + // Check if entity and its components exist + const component = entity?.components?.[componentName]; + + return ( +
+
+
+ {component && component.schema && component.data && ( + <> + + + + )} +
+
+
+ ); +}; + +GeoSidebar.propTypes = { + entity: PropTypes.object.isRequired +}; + +export default GeoSidebar; diff --git a/src/editor/components/components/Sidebar.js b/src/editor/components/components/Sidebar.js index 817a1eeb4..b0e92a400 100644 --- a/src/editor/components/components/Sidebar.js +++ b/src/editor/components/components/Sidebar.js @@ -20,7 +20,8 @@ import { ManualIcon, ArrowLeftHookIcon } 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'; @@ -134,6 +135,7 @@ export default class Sidebar extends React.Component {
{entity.id !== 'reference-layers' && + entity.id !== 'environment' && !entity.getAttribute('street-segment') ? ( <> {entity.classList.contains('autocreated') && ( @@ -223,6 +225,9 @@ export default class Sidebar extends React.Component { {entity.id === 'reference-layers' && ( )} + {entity.id === 'environment' && ( + + )} )}
From 7d7cb5b7d47f6045880e4c001f98f8ed775310c8 Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Wed, 15 Jan 2025 22:05:01 -0800 Subject: [PATCH 06/17] remove qr -- for now --- .../modals/GeoModal/GeoModal.component.jsx | 39 +------------------ 1 file changed, 1 insertion(+), 38 deletions(-) diff --git a/src/editor/components/modals/GeoModal/GeoModal.component.jsx b/src/editor/components/modals/GeoModal/GeoModal.component.jsx index 646ccf7d2..a2b5ba481 100644 --- a/src/editor/components/modals/GeoModal/GeoModal.component.jsx +++ b/src/editor/components/modals/GeoModal/GeoModal.component.jsx @@ -2,7 +2,7 @@ import { useState, useCallback, useEffect } from 'react'; import { SavingModal } from '../SavingModal'; import styles from './GeoModal.module.scss'; -import { Mangnifier20Icon, Save24Icon, QR32Icon } from '../../../icons'; +import { Mangnifier20Icon, Save24Icon } from '../../../icons'; import { httpsCallable } from 'firebase/functions'; import { firebaseConfig, functions } from '../../../services/firebase.js'; @@ -16,7 +16,6 @@ import { } from '@react-google-maps/api'; import GeoImg from '../../../../../ui_assets/geo.png'; import { roundCoord } from '../../../../../src/utils.js'; -import { QrCode } from '../../components/QrCode'; import useStore from '@/store.js'; const GeoModal = () => { @@ -29,7 +28,6 @@ const GeoModal = () => { lng: -122.4151768 }); const [autocomplete, setAutocomplete] = useState(null); - const [qrCodeUrl, setQrCodeUrl] = useState(null); const [isWorking, setIsWorking] = useState(false); const setModal = useStore((state) => state.setModal); const isOpen = useStore((state) => state.modal === 'geo'); @@ -113,25 +111,6 @@ const GeoModal = () => { } }; - const onQRHandler = () => { - let currentSceneId = STREET.utils.getCurrentSceneId(); - const PROTOCOL = 'https://'; - const HOSTNAME = window.location.host; // such as 'dev-3dstreet.web.app' - const QUERYSTRING = '?viewer=ar'; - const HASH = '#/scenes/' + currentSceneId + '.json'; - const AR_URL = PROTOCOL + HOSTNAME + QUERYSTRING + HASH; - const APPCLIP_PREFIX = 'https://launchar.app/l/gy8Ma2?url='; // via https://launchar.app/projects/ - const APPCLIP_URL = APPCLIP_PREFIX + encodeURIComponent(AR_URL); - setQrCodeUrl(APPCLIP_URL); - setTimeout( - () => - document - .getElementById('qrCodeContainer') - ?.scrollIntoView({ behavior: 'smooth' }), - 100 - ); - }; - const onSaveHandler = async () => { setIsWorking(true); const latitude = markerPosition.lat; @@ -222,26 +201,10 @@ const GeoModal = () => { - {qrCodeUrl && ( -
- -
Click on the QR Code to download it
-
- )} -
- {!qrCodeUrl && ( - - )} +
+
+ +
+
{showAdvanced && definedComponents.sort().map((key) => (
diff --git a/src/editor/components/components/ComponentsContainer.js b/src/editor/components/components/ComponentsContainer.js index 600671c5d..b59d27bcc 100644 --- a/src/editor/components/components/ComponentsContainer.js +++ b/src/editor/components/components/ComponentsContainer.js @@ -32,12 +32,12 @@ export default class ComponentsContainer extends React.Component { return (
{entity.hasAttribute('data-no-transform') ? ( -
+

⚠️ Transformations disabled for this layer.

) : ( -
+
)} diff --git a/src/editor/components/components/Sidebar.js b/src/editor/components/components/Sidebar.js index b0e92a400..6883d1b4f 100644 --- a/src/editor/components/components/Sidebar.js +++ b/src/editor/components/components/Sidebar.js @@ -139,7 +139,7 @@ export default class Sidebar extends React.Component { !entity.getAttribute('street-segment') ? ( <> {entity.classList.contains('autocreated') && ( - <> +
@@ -174,36 +174,39 @@ export default class Sidebar extends React.Component { Convert to Manual
- - )} - {!!entity.mixinEls.length && - !entity.classList.contains('autocreated') && ( - - )} - {entity.hasAttribute('data-no-transform') ? ( - <> - ) : ( - )} +
+ {!!entity.mixinEls.length && + !entity.classList.contains('autocreated') && ( + + )} + {entity.hasAttribute('data-no-transform') ? ( + <> + ) : ( + + )} +
+ {entity.getAttribute('intersection') && ( )} diff --git a/src/editor/style/components.scss b/src/editor/style/components.scss index 481ec3d00..f182435d9 100644 --- a/src/editor/style/components.scss +++ b/src/editor/style/components.scss @@ -1,9 +1,5 @@ @use './variables.scss'; -.components { - color: variables.$lightgray-100; - width: 364px; -} div.vec2, div.vec3, div.vec4 { @@ -24,24 +20,57 @@ div.vec4 { color: variables.$white; } } -.componentTitle span { - max-width: 200px; - overflow: hidden; - text-overflow: ellipsis; - text-transform: capitalize; - white-space: nowrap; - color: variables.$white; - font-weight: 500; - vertical-align: bottom !important; +.componentTitle { + display: flex; + align-items: center; + + span { + overflow: hidden; + white-space: nowrap; + color: variables.$white; + font-weight: 500; + font-size: 16px; + text-transform: uppercase; + } } -.collapsible .static { - cursor: pointer; - height: 16px; - padding: 20px 10px 12px 0px; - vertical-align: bottom; - font-size: 16px; - &:hover { - background: variables.$darkgray-500; +.componentHeader.collapsible-header { + display: flex; + align-items: center; + flex: 1; +} +.sidepanelContent { + padding: 0 0 0 15px; +} +.collapsible { + .static { + padding: 6px 20px; + cursor: pointer; + display: flex; + align-items: center; + height: auto; + background: variables.$black; + + .collapse-button { + border: 6px solid transparent; + width: 0; + height: 0; + margin: 0 8px; + } + + &:hover { + background: variables.$black-400; + } + } + + &.collapsed .static .collapse-button { + border-left-color: variables.$lightgray-100; + transform: translateY(-1px); + } + + &:not(.collapsed) .static .collapse-button { + border-top-color: variables.$lightgray-100; + transform: translateY(1px); + transform: translateX(-2px); } } .collapsible.component ~ .collapsible.component { @@ -87,6 +116,7 @@ div.vec4 { margin-top: 7px; } .details .propertyRow { + padding: 0 0 0 15px; width: 100%; display: flex; align-items: center; @@ -117,7 +147,8 @@ div.vec4 { .propertyRow { font-size: 14px; min-height: 30px; - margin-top: 20px; + margin-top: 10px; + margin-bottom: 10px; > input.string, > input.number, > .inputBlock > input.number, diff --git a/src/editor/style/index.scss b/src/editor/style/index.scss index 2ae4e4049..e0b935c37 100644 --- a/src/editor/style/index.scss +++ b/src/editor/style/index.scss @@ -342,7 +342,6 @@ body.aframe-inspector-opened { } .scroll { - padding: 0 0 0 20px; margin-top: 72px; overflow-y: auto; overflow-x: hidden; From 4565314097519d7a8c48acb5968d8cbbad4204f7 Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Thu, 16 Jan 2025 14:10:18 -0800 Subject: [PATCH 10/17] custom sidebar for street segment --- .../components/StreetSegmentSidebar.js | 76 +++++++++++-------- 1 file changed, 44 insertions(+), 32 deletions(-) diff --git a/src/editor/components/components/StreetSegmentSidebar.js b/src/editor/components/components/StreetSegmentSidebar.js index 280217f64..c044167a7 100644 --- a/src/editor/components/components/StreetSegmentSidebar.js +++ b/src/editor/components/components/StreetSegmentSidebar.js @@ -42,39 +42,51 @@ const StreetSegmentSidebar = ({ entity }) => { isSingle={false} entity={entity} /> -
-
-----
+ {/* props for street-segment but formatted as a fake 'surface' component */} +
+
+
+
+ + Surface + +
+
+
+
+ + + +
+
- - - )}
From 3e897528d4b6bf8de01a3286ee095e1f38441fd7 Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Thu, 16 Jan 2025 14:43:24 -0800 Subject: [PATCH 11/17] make mixin (model) 1 line --- src/editor/components/components/Sidebar.js | 4 +++- src/editor/components/components/StreetSegmentSidebar.js | 1 - src/editor/style/select.scss | 2 ++ 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/editor/components/components/Sidebar.js b/src/editor/components/components/Sidebar.js index 6883d1b4f..3e7043df8 100644 --- a/src/editor/components/components/Sidebar.js +++ b/src/editor/components/components/Sidebar.js @@ -179,7 +179,9 @@ export default class Sidebar extends React.Component {
{!!entity.mixinEls.length && !entity.classList.contains('autocreated') && ( - +
+ +
)} {entity.hasAttribute('data-no-transform') ? ( <> diff --git a/src/editor/components/components/StreetSegmentSidebar.js b/src/editor/components/components/StreetSegmentSidebar.js index c044167a7..a5dfa9a31 100644 --- a/src/editor/components/components/StreetSegmentSidebar.js +++ b/src/editor/components/components/StreetSegmentSidebar.js @@ -45,7 +45,6 @@ const StreetSegmentSidebar = ({ entity }) => { {/* props for street-segment but formatted as a fake 'surface' component */}
-
Surface diff --git a/src/editor/style/select.scss b/src/editor/style/select.scss index ee70be4a1..f11cb59a2 100644 --- a/src/editor/style/select.scss +++ b/src/editor/style/select.scss @@ -33,6 +33,7 @@ border-radius: 10px; padding: 12px 16px; height: 48px; + max-width: 220px; } [class^='select-single__control']:hover { border: 1px solid variables.$purple-500; @@ -53,6 +54,7 @@ [class^='select-single__menu'] { background: variables.$darkgray-300; border-radius: 8px; + max-width: 220px; } [class^='select-single__option'] { padding: 8px; From 15e8125b4d13b25ce418c036844cbedc7d0a3a68 Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Thu, 16 Jan 2025 15:13:27 -0800 Subject: [PATCH 12/17] barely working 1-line pos/rot/scale --- src/editor/style/components.scss | 34 +++++++++++++++++++++----------- 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/src/editor/style/components.scss b/src/editor/style/components.scss index f182435d9..f2b7e214c 100644 --- a/src/editor/style/components.scss +++ b/src/editor/style/components.scss @@ -145,6 +145,8 @@ div.vec4 { width: 100%; } .propertyRow { + display: flex; + align-items: center; font-size: 14px; min-height: 30px; margin-top: 10px; @@ -262,37 +264,39 @@ div.vec4 { } } .vec3 { - width: 348px; - display: flex; + width: auto; // Changed from 348px + display: inline-flex; // Changed from flex flex-direction: row; column-gap: 12px; align-content: center; align-items: center; margin-top: 4px; .name { - width: 100px; + width: auto; // Changed from 100px } .inputBlock { - width: 108px; - height: 48px; - padding: 12px 16px; + width: 90px; + height: 38px; + padding: 4px 10px; background: rgba(50, 50, 50, 0.8); border: 1px solid variables.$purple-400; border-radius: 10px; box-sizing: border-box; white-space: nowrap; + display: inline-flex; // Added + align-items: center; // Added span { - width: 9px; - height: 19px; - line-height: 19px; - margin-right: 8px; + width: auto; // Changed from 9px + height: 16px; + line-height: 18px; + margin-right: 6px; font-weight: 400; - font-size: 16px; + font-size: 11px; color: variables.$lightgray-200; text-transform: uppercase; } .number { - width: 56px; + width: 100%; color: variables.$lightgray-500; font-weight: 400; overflow: hidden; @@ -300,6 +304,7 @@ div.vec4 { display: inline-block; vertical-align: middle; padding: 0px; + font-size: 13.5px; } } } @@ -341,6 +346,11 @@ div.vec4 { width: 68px; letter-spacing: 1px; } + .text { + display: inline-block; // Changed from block + margin-bottom: 0; // Changed from 4px + min-width: 70px; // Added to maintain consistent label width + } } .propertyRowDefined .text { color: variables.$white-100; From 5832c0079d798ae4e9f06a75d60c027e6387d810 Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Thu, 16 Jan 2025 15:16:24 -0800 Subject: [PATCH 13/17] shrink vec3 inputblock to fit --- src/editor/style/components.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/editor/style/components.scss b/src/editor/style/components.scss index f2b7e214c..bd2fff43c 100644 --- a/src/editor/style/components.scss +++ b/src/editor/style/components.scss @@ -275,7 +275,7 @@ div.vec4 { width: auto; // Changed from 100px } .inputBlock { - width: 90px; + width: 86px; height: 38px; padding: 4px 10px; background: rgba(50, 50, 50, 0.8); From c721221b5f1d15a6b336706903f73fd213ac6eca Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Thu, 16 Jan 2025 16:59:21 -0800 Subject: [PATCH 14/17] split out street icons --- src/editor/icons/icons.jsx | 157 ------------------------------ src/editor/icons/index.js | 1 + src/editor/icons/street-icons.jsx | 157 ++++++++++++++++++++++++++++++ 3 files changed, 158 insertions(+), 157 deletions(-) create mode 100644 src/editor/icons/street-icons.jsx diff --git a/src/editor/icons/icons.jsx b/src/editor/icons/icons.jsx index d67caa8ab..ed3b26961 100644 --- a/src/editor/icons/icons.jsx +++ b/src/editor/icons/icons.jsx @@ -127,66 +127,6 @@ export const GeospatialIconWhite = () => ( ); -export const ArrowLeftHookIcon = () => ( - - - -); - -export const ManualIcon = () => ( - - - - -); - -export const AutoIcon = () => ( - - - - -); export const Camera32Icon = () => ( ( ); - -export const ManagedStreetIcon = () => ( - - - - - - - -); - -export const SegmentIcon = () => ( - - - - - - - - -); diff --git a/src/editor/icons/index.js b/src/editor/icons/index.js index 58b9bf38e..5b93f5cff 100644 --- a/src/editor/icons/index.js +++ b/src/editor/icons/index.js @@ -1 +1,2 @@ export * from './icons.jsx'; +export * from './street-icons.jsx'; diff --git a/src/editor/icons/street-icons.jsx b/src/editor/icons/street-icons.jsx new file mode 100644 index 000000000..38e3f808e --- /dev/null +++ b/src/editor/icons/street-icons.jsx @@ -0,0 +1,157 @@ +export const ManagedStreetIcon = () => ( + + + + + + + +); + +export const SegmentIcon = () => ( + + + + + + + + +); + +export const ArrowLeftHookIcon = () => ( + + + +); + +export const ManualIcon = () => ( + + + + +); + +export const AutoIcon = () => ( + + + + +); From e5f9ba1d3c45e490a8c3591fa850cce682c4d904 Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Fri, 17 Jan 2025 13:04:36 -0800 Subject: [PATCH 15/17] add surface icon change green to cyan --- .../components/StreetSegmentSidebar.js | 2 + src/editor/icons/street-icons.jsx | 76 ++++++++++++------- src/editor/style/components.scss | 1 + 3 files changed, 53 insertions(+), 26 deletions(-) diff --git a/src/editor/components/components/StreetSegmentSidebar.js b/src/editor/components/components/StreetSegmentSidebar.js index a5dfa9a31..2deb8c011 100644 --- a/src/editor/components/components/StreetSegmentSidebar.js +++ b/src/editor/components/components/StreetSegmentSidebar.js @@ -1,5 +1,6 @@ import PropTypes from 'prop-types'; import PropertyRow from './PropertyRow'; +import { StreetSurfaceIcon } from '../../icons'; const StreetSegmentSidebar = ({ entity }) => { const componentName = 'street-segment'; @@ -47,6 +48,7 @@ const StreetSegmentSidebar = ({ entity }) => {
+ Surface
diff --git a/src/editor/icons/street-icons.jsx b/src/editor/icons/street-icons.jsx index 38e3f808e..15a2a8657 100644 --- a/src/editor/icons/street-icons.jsx +++ b/src/editor/icons/street-icons.jsx @@ -1,4 +1,4 @@ -export const ManagedStreetIcon = () => ( +export const StreetSurfaceIcon = () => ( ( xmlns="http://www.w3.org/2000/svg" > + + +); + +export const ManagedStreetIcon = () => ( + + ); @@ -45,38 +69,38 @@ export const ManagedStreetIcon = () => ( export const SegmentIcon = () => ( ( strokeWidth="1.5" /> ); diff --git a/src/editor/style/components.scss b/src/editor/style/components.scss index bd2fff43c..a3d1f78f3 100644 --- a/src/editor/style/components.scss +++ b/src/editor/style/components.scss @@ -23,6 +23,7 @@ div.vec4 { .componentTitle { display: flex; align-items: center; + gap: 8px; span { overflow: hidden; From 4b099b237ba023d3f3f5c34fb775a5bbed62b2ec Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Fri, 17 Jan 2025 13:19:00 -0800 Subject: [PATCH 16/17] ensure icon min size with long entity name --- src/editor/components/components/Sidebar.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/editor/components/components/Sidebar.js b/src/editor/components/components/Sidebar.js index 3e7043df8..6fa14d175 100644 --- a/src/editor/components/components/Sidebar.js +++ b/src/editor/components/components/Sidebar.js @@ -120,13 +120,17 @@ export default class Sidebar extends React.Component { <>
- {entity.getAttribute('managed-street') ? ( - - ) : entity.getAttribute('street-segment') ? ( - - ) : ( - - )} +
+ {entity.getAttribute('managed-street') ? ( + + ) : entity.getAttribute('street-segment') ? ( + + ) : ( + + )} +
{entityName || formattedMixin}
From c8660e610f5fbdbcffdbb9069409b217c94bed46 Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Fri, 17 Jan 2025 13:45:41 -0800 Subject: [PATCH 17/17] use new icons on right panel --- src/editor/components/components/Sidebar.js | 50 +++++++++++++-------- src/editor/style/index.scss | 13 ++++++ 2 files changed, 44 insertions(+), 19 deletions(-) diff --git a/src/editor/components/components/Sidebar.js b/src/editor/components/components/Sidebar.js index 6fa14d175..16edf5704 100644 --- a/src/editor/components/components/Sidebar.js +++ b/src/editor/components/components/Sidebar.js @@ -18,7 +18,11 @@ import { ManagedStreetIcon, AutoIcon, ManualIcon, - ArrowLeftHookIcon + ArrowLeftHookIcon, + VideoCameraIcon, + GeospatialIcon, + LayersIcon, + SunIcon } from '../../icons'; import GeoSidebar from './GeoSidebar'; import EnviroSidebar from './EnviroSidebar'; @@ -39,6 +43,28 @@ export default class Sidebar extends React.Component { }; } + getEntityIcon = (entity) => { + if (entity.getAttribute('managed-street')) { + return ; + } + if (entity.getAttribute('street-segment')) { + return ; + } + + switch (entity.id) { + case 'environment': + return ; + case 'reference-layers': + return ; + case 'street-container': + return ; + case 'cameraRig': + return ; + default: + return ; + } + }; + getParentComponentName = (entity) => { const componentName = entity.getAttribute('data-parent-component'); const parentEntity = entity.parentElement; @@ -119,17 +145,9 @@ export default class Sidebar extends React.Component { {this.state.showSideBar ? ( <>
-
-
- {entity.getAttribute('managed-street') ? ( - - ) : entity.getAttribute('street-segment') ? ( - - ) : ( - - )} +
+
+ {this.getEntityIcon(entity)}
{entityName || formattedMixin}
@@ -252,13 +270,7 @@ export default class Sidebar extends React.Component { {entityName || formattedMixin}
- {entity.getAttribute('managed-street') ? ( - - ) : entity.getAttribute('street-segment') ? ( - - ) : ( - - )} + {this.getEntityIcon(entity)}
diff --git a/src/editor/style/index.scss b/src/editor/style/index.scss index e0b935c37..9715f8834 100644 --- a/src/editor/style/index.scss +++ b/src/editor/style/index.scss @@ -617,6 +617,19 @@ body.aframe-inspector-opened { background-color: variables.$purple-200; } + .icon-container { + min-width: 24px; + min-height: 24px; + display: flex; // This helps with centering + align-items: center; + justify-content: center; + + svg { + min-width: 24px; + min-height: 24px; + } + } + .layersBlock { padding-left: 20px; display: flex;