@@ -2,7 +2,6 @@ import React from 'react';
22import { connect } from 'react-redux' ;
33import { createSelector } from 'reselect' ;
44import styled from 'styled-components' ;
5- import ShareIcon from 'react-icons/lib/md/share' ;
65import Files from 'embed/components/Files' ;
76import ModeIcons from 'app/components/sandbox/ModeIcons' ;
87import {
@@ -21,14 +20,6 @@ import {
2120import type { Sandbox , Directory , Module } from 'common/types' ;
2221
2322import Preference from 'app/components/Preference' ;
24- import HoverMenu from './HoverMenu' ;
25- import Action from './Action' ;
26-
27- const Container = styled . div `
28- position: relative;
29- z-index: 200;
30- height: 100%;
31- ` ;
3223
3324const FilesContainer = styled . div `
3425 max-height: 300px;
@@ -45,22 +36,11 @@ const PaddedPreference = styled(Preference)`
4536` ;
4637
4738const ShareOptions = styled . div `
48- position: absolute;
49- top: calc(100% + 0.25rem);
50- left: -250px;
51- box-sizing: border-box;
52- z-index: 2;
53- border-radius: 4px;
5439 font-size: 0.875rem;
55-
5640 color: rgba(255, 255, 255, 0.8);
5741 padding: 1rem;
58-
59- box-shadow: -1px 4px 5px rgba(0, 0, 0, 0.5);
6042 background-color: ${ props => props . theme . background2 }
6143
62- width: 900px;
63-
6444 h3 {
6545 text-align: center;
6646 margin: 0;
@@ -331,165 +311,148 @@ class ShareView extends React.PureComponent {
331311 this . state . defaultModule || findMainModule ( modules , sandbox . template ) . id ;
332312
333313 return (
334- < Container >
335- < HoverMenu
336- HeaderComponent = { Action }
337- headerProps = { {
338- title : 'Share' ,
339- tooltip : 'Share sandbox' ,
340- Icon : ShareIcon ,
341- moreInfo : true ,
342- } }
343- >
344- { ( ) => (
345- < ShareOptions >
346- < h3 > Share options</ h3 >
347- < Divider >
348- < Column >
349- < ButtonName > URL Options</ ButtonName >
350- < div >
351- < h4 > Embed specific options</ h4 >
352- < PaddedPreference
353- title = "Auto resize"
354- type = "boolean"
355- tooltip = "Works only on Medium"
356- value = { autoResize }
357- setValue = { this . setAutoResize }
358- />
359- < PaddedPreference
360- title = "Hide navigation bar"
361- type = "boolean"
362- value = { hideNavigation }
363- setValue = { this . setHideNavigation }
364- />
365- < PaddedPreference
366- title = "Expand console"
367- type = "boolean"
368- value = { expandDevTools }
369- setValue = { this . setExpandDevTools }
370- />
371- < PaddedPreference
372- title = "Use CodeMirror instead of Monaco editor"
373- type = "boolean"
374- value = { useCodeMirror }
375- setValue = { this . setUseCodeMirror }
376- />
377- < PaddedPreference
378- title = "Enable eslint (significantly higher bundle size)"
379- type = "boolean"
380- value = { enableEslint }
381- setValue = { this . setEnableEslint }
382- />
383- < PaddedPreference
384- title = "Show current module view"
385- type = "boolean"
386- tooltip = "Only show the module that's currently open"
387- value = { isCurrentModuleView }
388- setValue = { this . setIsCurrentModuleView }
389- />
390- < PaddedPreference
391- title = "Font size"
392- type = "number"
393- value = { fontSize }
394- setValue = { this . setFontSize }
395- />
396- </ div >
397- < Inputs >
398- < LinkName > Project Initial Path</ LinkName >
399- < input
400- onFocus = { this . select }
401- placeholder = "e.g: /home"
402- value = { initialPath }
403- onChange = { this . setInitialPath }
404- />
405- </ Inputs >
406- < div >
407- < h4 > Default view</ h4 >
408- < div
409- style = { {
410- position : 'relative' ,
411- height : '2rem' ,
412- width : '200px' ,
413- marginLeft : '-10px' ,
414- } }
415- >
416- < ModeIcons
417- showEditor = { showEditor }
418- showPreview = { showPreview }
419- setEditorView = { this . setEditorView }
420- setPreviewView = { this . setPreviewView }
421- setMixedView = { this . setMixedView }
422- />
423- </ div >
424- </ div >
425- < div >
426- < h4 > Default module to show</ h4 >
427-
428- < FilesContainer >
429- < Files
430- modules = { modules }
431- directoryId = { null }
432- directories = { directories }
433- currentModule = { defaultModule }
434- setCurrentModule = { this . setDefaultModule }
435- />
436- </ FilesContainer >
437- </ div >
438- </ Column >
439- < Column >
440- < ButtonName > Links</ ButtonName >
441- < Inputs >
442- < LinkName > Editor url (also works on Medium)</ LinkName >
443- < input
444- onFocus = { this . select }
445- value = { this . getEditorUrl ( ) }
446- readOnly
447- />
448- < LinkName > Embed url</ LinkName >
449- < input
450- onFocus = { this . select }
451- value = { this . getEmbedUrl ( ) }
452- readOnly
453- />
454- < LinkName > iframe</ LinkName >
455- < textarea
456- onFocus = { this . select }
457- value = { this . getIframeScript ( ) }
458- readOnly
459- />
460- </ Inputs >
461- </ Column >
462- < Column >
463- < ButtonName > Button</ ButtonName >
464- < Inputs >
465- < ButtonContainer >
466- < a href = { sandboxUrl ( sandbox ) } >
467- < img
468- alt = { sandbox . title || 'Untitled' }
469- src = { BUTTON_URL }
470- />
471- </ a >
472- </ ButtonContainer >
473- < LinkName > Markdown</ LinkName >
474- < textarea
475- onFocus = { this . select }
476- value = { this . getButtonMarkdown ( ) }
477- readOnly
478- />
479-
480- < LinkName > HTML</ LinkName >
481- < textarea
482- onFocus = { this . select }
483- value = { this . getButtonHTML ( ) }
484- readOnly
485- />
486- </ Inputs >
487- </ Column >
488- </ Divider >
489- </ ShareOptions >
490- ) }
491- </ HoverMenu >
492- </ Container >
314+ < ShareOptions >
315+ < h3 > Share options</ h3 >
316+ < Divider >
317+ < Column >
318+ < ButtonName > URL Options</ ButtonName >
319+ < div >
320+ < h4 > Embed specific options</ h4 >
321+ < PaddedPreference
322+ title = "Auto resize"
323+ type = "boolean"
324+ tooltip = "Works only on Medium"
325+ value = { autoResize }
326+ setValue = { this . setAutoResize }
327+ />
328+ < PaddedPreference
329+ title = "Hide navigation bar"
330+ type = "boolean"
331+ value = { hideNavigation }
332+ setValue = { this . setHideNavigation }
333+ />
334+ < PaddedPreference
335+ title = "Expand console"
336+ type = "boolean"
337+ value = { expandDevTools }
338+ setValue = { this . setExpandDevTools }
339+ />
340+ < PaddedPreference
341+ title = "Use CodeMirror instead of Monaco editor"
342+ type = "boolean"
343+ value = { useCodeMirror }
344+ setValue = { this . setUseCodeMirror }
345+ />
346+ < PaddedPreference
347+ title = "Enable eslint (significantly higher bundle size)"
348+ type = "boolean"
349+ value = { enableEslint }
350+ setValue = { this . setEnableEslint }
351+ />
352+ < PaddedPreference
353+ title = "Show current module view"
354+ type = "boolean"
355+ tooltip = "Only show the module that's currently open"
356+ value = { isCurrentModuleView }
357+ setValue = { this . setIsCurrentModuleView }
358+ />
359+ < PaddedPreference
360+ title = "Font size"
361+ type = "number"
362+ value = { fontSize }
363+ setValue = { this . setFontSize }
364+ />
365+ </ div >
366+ < Inputs >
367+ < LinkName > Project Initial Path</ LinkName >
368+ < input
369+ onFocus = { this . select }
370+ placeholder = "e.g: /home"
371+ value = { initialPath }
372+ onChange = { this . setInitialPath }
373+ />
374+ </ Inputs >
375+ < div >
376+ < h4 > Default view</ h4 >
377+ < div
378+ style = { {
379+ position : 'relative' ,
380+ height : '2rem' ,
381+ width : '200px' ,
382+ marginLeft : '-10px' ,
383+ } }
384+ >
385+ < ModeIcons
386+ showEditor = { showEditor }
387+ showPreview = { showPreview }
388+ setEditorView = { this . setEditorView }
389+ setPreviewView = { this . setPreviewView }
390+ setMixedView = { this . setMixedView }
391+ />
392+ </ div >
393+ </ div >
394+ < div >
395+ < h4 > Default module to show</ h4 >
396+
397+ < FilesContainer >
398+ < Files
399+ modules = { modules }
400+ directoryId = { null }
401+ directories = { directories }
402+ currentModule = { defaultModule }
403+ setCurrentModule = { this . setDefaultModule }
404+ />
405+ </ FilesContainer >
406+ </ div >
407+ </ Column >
408+ < Column >
409+ < ButtonName > Links</ ButtonName >
410+ < Inputs >
411+ < LinkName > Editor url (also works on Medium)</ LinkName >
412+ < input
413+ onFocus = { this . select }
414+ value = { this . getEditorUrl ( ) }
415+ readOnly
416+ />
417+ < LinkName > Embed url</ LinkName >
418+ < input
419+ onFocus = { this . select }
420+ value = { this . getEmbedUrl ( ) }
421+ readOnly
422+ />
423+ < LinkName > iframe</ LinkName >
424+ < textarea
425+ onFocus = { this . select }
426+ value = { this . getIframeScript ( ) }
427+ readOnly
428+ />
429+ </ Inputs >
430+ </ Column >
431+ < Column >
432+ < ButtonName > Button</ ButtonName >
433+ < Inputs >
434+ < ButtonContainer >
435+ < a href = { sandboxUrl ( sandbox ) } >
436+ < img alt = { sandbox . title || 'Untitled' } src = { BUTTON_URL } />
437+ </ a >
438+ </ ButtonContainer >
439+ < LinkName > Markdown</ LinkName >
440+ < textarea
441+ onFocus = { this . select }
442+ value = { this . getButtonMarkdown ( ) }
443+ readOnly
444+ />
445+
446+ < LinkName > HTML</ LinkName >
447+ < textarea
448+ onFocus = { this . select }
449+ value = { this . getButtonHTML ( ) }
450+ readOnly
451+ />
452+ </ Inputs >
453+ </ Column >
454+ </ Divider >
455+ </ ShareOptions >
493456 ) ;
494457 }
495458}
0 commit comments