diff --git a/src/components/Main.js b/src/components/Main.js index 00989c15..0aac0fd1 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -5,6 +5,7 @@ import Events from '../lib/Events'; import ComponentsSidebar from './components/Sidebar'; import ModalTextures from './modals/ModalTextures'; import ModalHelp from './modals/ModalHelp'; +import ModalSponsor from './modals/ModalSponsor'; import SceneGraph from './scenegraph/SceneGraph'; import CameraToolbar from './viewport/CameraToolbar'; import TransformToolbar from './viewport/TransformToolbar'; @@ -19,6 +20,8 @@ export default class Main extends React.Component { this.state = { entity: null, inspectorEnabled: true, + isHelpOpen: false, + isModalSponsorOpen: false, isModalTexturesOpen: false, sceneEl: AFRAME.scenes[0], visible: { @@ -98,6 +101,14 @@ export default class Main extends React.Component { } }; + openModalSponsor = () => { + this.setState({ isModalSponsorOpen: true }); + }; + + onCloseModalSponsor = () => { + this.setState({ isModalSponsorOpen: false }); + }; + toggleEdit = () => { if (this.state.inspectorEnabled) { AFRAME.INSPECTOR.close(); @@ -157,6 +168,20 @@ export default class Main extends React.Component { {toggleButtonText} + {this.state.inspectorEnabled && ( + + + Sponsor + + )} {this.renderSceneGraphToggle()} {this.renderComponentsToggle()} @@ -189,6 +214,10 @@ export default class Main extends React.Component { isOpen={this.state.isHelpOpen} onClose={this.onCloseHelpModal} /> + +
+

+ The inspector is kept up to date by members of the community working + on the aframe editor, a modified version of the inspector with + additional features. +

+ +
+ + Give the aframe editor a try + +
+

+ If you like it, please consider supporting the project. +

+
+ + ); + } +} diff --git a/src/style/index.styl b/src/style/index.styl index 24a715ea..e3f49ad3 100644 --- a/src/style/index.styl +++ b/src/style/index.styl @@ -1,11 +1,13 @@ @import './lib'; body.aframe-inspector-opened, -.toggle-edit +.toggle-edit, +.sponsor-btn font-family BlinkMacSystemFont, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif .wf-roboto-n4-active body.aframe-inspector-opened, -.wf-roboto-n4-active .toggle-edit +.wf-roboto-n4-active .toggle-edit, +.wf-roboto-n4-active .sponsor-btn font-family BlinkMacSystemFont, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif body.aframe-inspector-opened @@ -98,19 +100,65 @@ body.aframe-inspector-opened color #FAFAFA font-size 13px left 3px - line-height normal + line-height 16px margin 0 padding 6px 10px position fixed text-align center text-decoration none top 3px - width 204px + width 100px z-index 999999999 .toggle-edithover background-color rgb(228, 43, 90) + .try-editor-btn + background-color $red + box-sizing content-box + color #FAFAFA + font-size 16px + line-height 24px + margin 0 + padding 6px 10px + text-align center + text-decoration none + width 200px + display flex + gap 5px + justify-content center + + .try-editor-btn:hover + background-color rgb(228, 43, 90) + color #FAFAFA + + .sponsor-btn + background-color #ffffff + box-sizing content-box + color #000000 + font-size 13px + left 127px + line-height 16px + margin 0 + padding 6px 10px + position fixed + text-align center + text-decoration none + top 3px + width 80px + z-index 999999999 + display flex + gap 5px + justify-content center + + svg + fill currentColor + color rgb(219, 97, 162) + + .sponsor-btn:hover + background-color rgb(228, 43, 90) + color #FAFAFA + input background-color transparent border 1px solid #555