barely working delete component

needs new icon
3DStreet · Feb 2, 2025 · 2915259 · 2915259
1 parent 050e904
commit 2915259
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 20 deletions.
diff --git a/src/editor/components/components/Component.js b/src/editor/components/components/Component.js
@@ -6,6 +6,8 @@ import PropertyRow from './PropertyRow';
 import React from 'react';
 import { getComponentClipboardRepresentation } from '../../lib/entity';
 
+import { SunIcon } from '../../icons';
+
 const isSingleProperty = AFRAME.schema.isSingleProperty;
 
 /**
@@ -166,17 +168,13 @@ export default class Component extends React.Component {
             <span>{subComponentName || componentName}</span>
           </span>
           <div className="componentHeaderActions">
-            <a
-              title="Copy to clipboard"
-              data-action="copy-component-to-clipboard"
-              data-component={subComponentName || componentName}
-              className="button fa fa-clipboard"
-            />
             <a
               title="Remove component"
-              className="button fa fa-trash-o"
+              className="button"
               onClick={this.removeComponent}
-            />
+            >
+              <SunIcon />
+            </a>
           </div>
         </div>
         <div className="collapsible-content">{this.renderPropertyRows()}</div>

diff --git a/src/editor/components/components/StreetSegmentComponent.js b/src/editor/components/components/StreetSegmentComponent.js
@@ -5,7 +5,12 @@ import PropTypes from 'prop-types';
 import PropertyRow from './PropertyRow';
 import React from 'react';
 import { getComponentClipboardRepresentation } from '../../lib/entity';
-import { ClonedTreesIcon, StencilsIcon, StripingIcon } from '../../icons';
+import {
+  ClonedTreesIcon,
+  StencilsIcon,
+  StripingIcon,
+  SunIcon
+} from '../../icons';
 import ModelsArrayWidget from '../widgets/ModelsArrayWidget';
 
 const isSingleProperty = AFRAME.schema.isSingleProperty;
@@ -390,17 +395,13 @@ export default class Component extends React.Component {
             <span>{componentDisplayName}</span>
           </span>
           <div className="componentHeaderActions">
-            <a
-              title="Copy to clipboard"
-              data-action="copy-component-to-clipboard"
-              data-component={componentName}
-              className="button fa fa-clipboard"
-            />
             <a
               title="Remove component"
-              className="button fa fa-trash-o"
+              className="button"
               onClick={this.removeComponent}
-            />
+            >
+              <SunIcon />
+            </a>
           </div>
         </div>
         <div className="collapsible-content">{this.renderPropertyRows()}</div>

diff --git a/src/editor/style/components.scss b/src/editor/style/components.scss
@@ -422,10 +422,53 @@ a.help-linkhover {
     color: variables.$blue-100;
   }
 }
-.fa-clipboard,
-.fa-trash-o {
-  display: none;
+.componentHeaderActions {
+  .button {
+    font-size: 16px;
+    padding: 4px;
+    text-decoration: none;
+    cursor: pointer;
+    opacity: 0.8;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
 }
+
 .advancedComponentsContainer {
   margin-top: 20px;
 }
+
+.componentHeader.collapsible-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  .componentTitle {
+    flex: 1;
+  }
+
+  .componentHeaderActions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+}
+
+// If you need to override any Button styles specifically for these icons:
+.componentHeaderActions {
+  .button[variant='toolbtn'] {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}