move lightboxes into react
This commit is contained in:
Connor Turland
parent
c1dbfc9f72
commit
6c84205b38
11 changed files with 570 additions and 334 deletions
|
|
@ -26,13 +26,16 @@ Checklist
|
|||
- [x] Fix images referenced in the JS
|
||||
- [x] Figure out how authentication of requests from the frontend to the API works
|
||||
- [x] Figure out how to combine the nodejs realtime server into server.js
|
||||
- [ ] Notifications: make sure loading states are working for popup and page
|
||||
- [x] Notifications: make sure loading states are working for popup and page
|
||||
- [ ] Notifications: make sure notifications either look nice, or redirect
|
||||
- [ ] Notifications: pagination
|
||||
- [ ] Get actioncable working
|
||||
- [ ] Request unreadNotificationCount
|
||||
- [ ] Request invite code
|
||||
- [ ] lightboxes
|
||||
- [x] Request unreadNotificationCount
|
||||
- [x] Request invite code
|
||||
- [x] Request user object itself
|
||||
- [ ] About lightbox
|
||||
- [ ] break up index.html into parts
|
||||
- [ ] Handle CSS metacode colors
|
||||
- [ ] Fix Request An Invite page
|
||||
- [ ] Make 'new map' action work
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
|
|
@ -64,6 +65,7 @@
|
|||
<![endif]-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="unauthenticated">
|
||||
<div class="main">
|
||||
<div id="app"></div>
|
||||
|
|
@ -87,10 +89,7 @@
|
|||
<script src="/lib/typeahead.bundle.js"></script>
|
||||
<script type="text/javascript" src="/metamaps.bundle.js"></script>
|
||||
<!--
|
||||
Metamaps.ServerData.unreadNotificationsCount = { current_user ? user_unread_notification_count : 0 }
|
||||
Metamaps.ServerData.mapIsStarred = { current_user && @map && current_user.starred_map?(@map) ? true : false }
|
||||
Metamaps.ServerData.mobileTitle = "{ yield(:mobile_title) }"
|
||||
Metamaps.ServerData.ActiveMapper = { current_user ? current_user.to_json({follows: true, email: true, follow_settings: true}).html_safe : nil }
|
||||
{ if devise_error_messages? }
|
||||
Metamaps.ServerData.toast = "{ devise_error_messages! }"
|
||||
{ elsif notice }
|
||||
|
|
@ -299,116 +298,5 @@
|
|||
</div>
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div id="lightbox_overlay">
|
||||
<div id="lightbox_main">
|
||||
<a id="lightbox_close" href="#"></a>
|
||||
<div id="lightbox_content">
|
||||
|
||||
<div class="lightboxContent" id="about">
|
||||
<h3>About Metamaps.cc</h3>
|
||||
<div id="aboutParms">
|
||||
<div id="leftAboutParms">
|
||||
<p>STATUS: </p>
|
||||
<p>VERSION:</p>
|
||||
<p>BUILD:</p>
|
||||
<p>LAST UPDATE:</p>
|
||||
</div>
|
||||
|
||||
<div id="rightAboutParms">
|
||||
<p>PRIVATE BETA</p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
</div>
|
||||
|
||||
<p>Metamaps.cc is a free and open source web platform that supports real-time sense-making and distributed collaboration between individuals, communities and organizations.</p>
|
||||
|
||||
<p>Using an intuitive graph-based interface, Metamaps.cc helps map out networks of people, ideas, resources, stories, experiences, conversations and much more. The platform is evolving for a range of applications amidst a growing network of designers, developers, facilitators, practitioners, entrepreneurs, and artists.</p>
|
||||
|
||||
<p>Metamaps.cc is created and maintained by a distributed community of contributors passionate about the evolution of collaboration, alternative forms of value creation and increase of collective intelligence through the lens of the open culture and the peer-to-peer revolution.</p>
|
||||
|
||||
<ul class="lightbox_links">
|
||||
<li>
|
||||
<a class="icon_twitter" href="https://twitter.com/metamapps" target="_blank">
|
||||
<div class="lightboxAboutIcon"></div>
|
||||
@metamapps
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon_community" href="https://www.hylo.com/c/metamaps/join/mice-late-hit-two-shown" target="_blank">
|
||||
<div class="lightboxAboutIcon"></div>
|
||||
community
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon_source_code" href="https://github.com/metamaps/metamaps" target="_blank">
|
||||
<div class="lightboxAboutIcon"></div>
|
||||
source code
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon_howtos" href="https://docs.metamaps.cc" target="_blank">
|
||||
<div class="lightboxAboutIcon"></div>
|
||||
howtos
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon_terms" href="https://metamaps.cc/maps/331" target="_blank">
|
||||
<div class="lightboxAboutIcon"></div>
|
||||
terms
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfloat"></div>
|
||||
</div>
|
||||
|
||||
<div class="lightboxContent" id="noIE">
|
||||
<h3>OOPS! <br> YOUR BROWSER IS NOT SUPPORTED.</h3>
|
||||
<p id="noIEsubheading">To view this experience, please upgrade to the latest one of these browsers:</p>
|
||||
<a id="chromeIcon" href="https://www.google.com/chrome/browser/" target="_blank">Chrome</a>
|
||||
<a id="fireFoxIcon" href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a>
|
||||
<a id="safariIcon" href="http://support.apple.com/downloads/#safari" target="_blank">Safari</a>
|
||||
<p id="noIEbody">While it's downloading, explore our <a href="http://blog.metamaps.cc/">blog</a>,<br> watch the <a href="http://vimeo.com/88334167">tutorials</a>, or visit our <a href="https://docs.metamaps.cc">knowledge base</a>!
|
||||
|
||||
</div>
|
||||
|
||||
<div class="lightboxContent" id="tutorial">
|
||||
<h3>Tutorial</h3>
|
||||
<iframe src="//player.vimeo.com/video/88334167?title=0&byline=0&portrait=0" width="510" height="319" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<div class="lightboxContent" id="cheatsheet">
|
||||
<!--<%= render :partial => 'shared/cheatsheet' %>-->
|
||||
</div>
|
||||
|
||||
<div class="lightboxContent" id="invite">
|
||||
<h3>SHARE INVITE</h3>
|
||||
|
||||
<div class="leaveSpace"></div>
|
||||
<p>The Metamaps platform is currently in an invite-only beta with the express purpose of creating a high value knowledge ecosystem, a diverse community of contributors and a culture of collaboration and curiosity.</p>
|
||||
<p>As a valued beta tester, you have the ability to invite your peers, colleagues and collaborators onto the platform.</p>
|
||||
<p>Below is a personal invite link containing your unique access code, which can be used multiple times.</p>
|
||||
<div id="joinCodesBox">
|
||||
<p class="joinCodes">
|
||||
<button class="button" onclick="Metamaps.GlobalUI.shareInvite('<%= @invite_link %>');">COPY INVITE LINK!</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="lightboxContent" id="forkmap">
|
||||
<!--<%= render :partial => 'shared/forkmap' %>-->
|
||||
</div>
|
||||
|
||||
<div class="lightboxContent" id="switchMetacodes">
|
||||
<!--<%= render :partial => 'shared/switchmetacodes' %>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="lightbox_screen" style="height: 100%;"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
64
src/components/LightBoxes/About.js
Normal file
64
src/components/LightBoxes/About.js
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import React, { Component } from 'react'
|
||||
|
||||
class About extends Component {
|
||||
render = () => {
|
||||
return (
|
||||
<div className="lightboxContent" id="about">
|
||||
<h3>About Metamaps.cc</h3>
|
||||
<div id="aboutParms">
|
||||
<div id="leftAboutParms">
|
||||
<p>STATUS: </p>
|
||||
<p>VERSION: </p>
|
||||
<p>BUILD: </p>
|
||||
<p>LAST UPDATE: </p>
|
||||
</div>
|
||||
<div id="rightAboutParms">
|
||||
<p>PRIVATE BETA</p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
</div>
|
||||
<div className="clearfloat"></div>
|
||||
</div>
|
||||
<p>Metamaps.cc is a free and open source web platform that supports real-time sense-making and distributed collaboration between individuals, communities and organizations.</p>
|
||||
<p>Using an intuitive graph-based interface, Metamaps.cc helps map out networks of people, ideas, resources, stories, experiences, conversations and much more. The platform is evolving for a range of applications amidst a growing network of designers, developers, facilitators, practitioners, entrepreneurs, and artists.</p>
|
||||
<p>Metamaps.cc is created and maintained by a distributed community of contributors passionate about the evolution of collaboration, alternative forms of value creation and increase of collective intelligence through the lens of the open culture and the peer-to-peer revolution.</p>
|
||||
<ul className="lightbox_links">
|
||||
<li>
|
||||
<a className="icon_twitter" href="https://twitter.com/metamapps" target="_blank">
|
||||
<div className="lightboxAboutIcon"></div>
|
||||
@metamapps
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="icon_community" href="https://www.hylo.com/c/metamaps/join/mice-late-hit-two-shown" target="_blank">
|
||||
<div className="lightboxAboutIcon"></div>
|
||||
community
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="icon_source_code" href="https://github.com/metamaps/metamaps" target="_blank">
|
||||
<div className="lightboxAboutIcon"></div>
|
||||
source code
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="icon_howtos" href="https://docs.metamaps.cc" target="_blank">
|
||||
<div className="lightboxAboutIcon"></div>
|
||||
howtos
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="icon_terms" href="https://metamaps.cc/maps/331" target="_blank">
|
||||
<div className="lightboxAboutIcon"></div>
|
||||
terms
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="clearfloat"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default About
|
||||
163
src/components/LightBoxes/CheatSheet.js
Normal file
163
src/components/LightBoxes/CheatSheet.js
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
import React, { Component } from 'react'
|
||||
|
||||
class CheatSheet extends Component {
|
||||
render = () => {
|
||||
return (
|
||||
<div classNameName="lightboxContent" id="cheatsheet">
|
||||
<h3>HELP</h3>
|
||||
<div id="cheatSheet">
|
||||
<ul id="helpWrapper">
|
||||
<li><a href="#quickReference">QUICK REFERENCE</a></li>
|
||||
<li><a href="#tutorials">TUTORIAL</a></li>
|
||||
<li><a href="#moreResources">MORE RESOURCES</a></li>
|
||||
</ul>
|
||||
<div id="quickReference">
|
||||
<ul>
|
||||
<li><a href="#csCreatingTopics">Creating Topics</a></li>
|
||||
<li><a href="#csEditingTopics">Editing Topics</a></li>
|
||||
<li><a href="#csCreatingSynapses">Creating Synapses</a></li>
|
||||
<li><a href="#csEditingSynapses">Editing Synapses</a></li>
|
||||
<li><a href="#csNavigation">Navigation</a></li>
|
||||
<li><a href="#csSelection">Selection</a></li>
|
||||
<li><a href="#csSearch">Search</a></li>
|
||||
<li><a href="#csTopicView">Topic View</a></li>
|
||||
<li><a href="#csKeyboardShortcuts">Keyboard Shortcuts</a></li>
|
||||
</ul>
|
||||
<div id="csTopicView">
|
||||
<div className="csItem"><span className="csTitle">Enter Topic (radial) View:</span> Click on a Topic result from Search, or click the synapse <img src="<%= asset_path 'synapse16.png' %>" width="16" align="middle" /> icon inside open Topic Card on map</div>
|
||||
<div className="csItem"><span className="csTitle">Recenter Topics around chosen Topic:</span> Alt + click on the topic OR Alt + E</div>
|
||||
<div className="csItem"><span className="csTitle">Reveal the siblings for a Topic:</span> Right-click and choose 'Reveal siblings' OR Alt + R</div>
|
||||
<div className="csItem"><span className="csTitle">Center topic and reveal siblings:</span> Alt + T</div>
|
||||
<div className="csItem"><span className="csTitle">Filter out visible Topics:</span> Open Filter menu *** and toggle off/on</div>
|
||||
</div>
|
||||
<div id="csCreatingTopics">
|
||||
<div className="csItem"><span className="csTitle">Double-click on canvas:</span> Bring up the metacode spinner</div>
|
||||
<div className="csItem indented"><span className="csTitle">Scroll:</span> change metacode spinner selection</div>
|
||||
<div className="csItem indented"><span className="csTitle">Tab:</span> rotate spinner counter-clockwise</div>
|
||||
<div className="csItem indented"><span className="csTitle">Shift + tab:</span> rotate spinner clockwise</div>
|
||||
<div className="csItem indented"><span className="csTitle">Esc:</span> Hides auto-suggestion results</div>
|
||||
<div className="csItem indented"><span className="csTitle">Enter:</span> create a new topic</div>
|
||||
<div className="csItem indented"><span className="csTitle">Gear Icon:</span> open up metacode settings</div>
|
||||
<div className="csItem"><br /><a href="https://docs.metamaps.cc/creating_topics.html" target="_blank">Learn More</a></div>
|
||||
</div>
|
||||
<div id="csEditingTopics">
|
||||
<div className="csItem">
|
||||
<span className="csTitle">Open Topic card:</span> Double-click on topic icon
|
||||
</div>
|
||||
<div className="csItem indented">
|
||||
<span className="csTitle">Move Topic card:</span> Click and drag on topic card metacode
|
||||
</div>
|
||||
<div className="csItem indented">
|
||||
<span className="csTitle">Change metacode:</span> Mouse over metacode icon, then click on solid colored bar for metacode menu
|
||||
</div>
|
||||
<div className="csItem indented">
|
||||
<span className="csTitle">Edit Topic title, description, link:</span> Click on text in respective area (click small "X" to reset link)
|
||||
</div>
|
||||
<div className="csItem indented">
|
||||
<span className="csTitle">Save Topic title, description, link:</span> Hit enter, or click away
|
||||
</div>
|
||||
<div className="csItem indented">
|
||||
<span className="csTitle">Change Topic permission:</span> Click on 'Permission' icon (only for topic creator)
|
||||
</div>
|
||||
<div className="csItem indented">
|
||||
<span className="csTitle">Open Topic view:</span> Click on <img src="<%= asset_path 'synapse16.png' %>" width="16" align="middle" /> icon within topic card bar
|
||||
</div>
|
||||
<div className="csItem indented">
|
||||
<span className="csTitle">Close Topic card:</span> Click on canvas
|
||||
</div>
|
||||
<div className="csItem">
|
||||
<span className="csTitle">Open 'Context Menu':</span> Right-click/alt+click on topic icon or synapse or selection (multiple) to Hide/Remove/Delete, change metacode or permission
|
||||
</div>
|
||||
<div className="csItem"><br /><a href="https://docs.metamaps.cc/creating_topics.html" target="_blank">Learn More</a></div>
|
||||
</div>
|
||||
<div id="csCreatingSynapses">
|
||||
<div className="csItem"><span className="csTitle">Open 'Create Synapse' prompt:</span> Right-click & drag from one topic to another</div>
|
||||
<div className="csItem indented"><span className="csTitle">Enter a label</span> Begin typing (or leave blank)</div>
|
||||
<div className="csItem indented"><span className="csTitle">Confirm new Synapse:</span> Enter or Tab</div>
|
||||
<div className="csItem indented"><span className="csTitle">Cancel new Synapse:</span> Escape or Delete</div>
|
||||
<div className="csItem"><span className="csTitle">Create new Topic with Synapse:</span> Right-click + drag from existing topic to open canvas</div>
|
||||
<div className="csItem indented"><span className="csTitle">Create Topic:</span> Same as elsewhere</div>
|
||||
<div className="csItem indented"><span className="csTitle">Create Synapse:</span> Same as above</div>
|
||||
<div className="csItem"><br /><a href="https://docs.metamaps.cc/creating_synapses.html" target="_blank">Learn More</a></div>
|
||||
</div>
|
||||
<div id="csEditingSynapses">
|
||||
<div className="csItem"><span className="csTitle">Open Synapse card:</span> Double-click on Synapse </div>
|
||||
<div className="csItem indented"><span className="csTitle">Edit Synapse description:</span> Click on current description text</div>
|
||||
<div className="csItem indented"><span className="csTitle">Save Synapse description:</span> Hit enter</div>
|
||||
<div className="csItem indented"><span className="csTitle">Edit directionality:</span> Select appropriate arrow boxes</div>
|
||||
<div className="csItem indented"><span className="csTitle">Change synapse permission:</span> Click on 'permission' icon (only for synapse creator)</div>
|
||||
<div className="csItem indented"><span className="csTitle">Browse / select from multiple (stacked) synapses:</span> Click dropdown icon and select desired synapse</div>
|
||||
<div className="csItem"><span className="csTitle">Open 'Context Menu':</span> Right-click/alt-click on Synapse</div>
|
||||
<div className="csItem indented">*Hide/Remove/Delete synapse within context menu</div>
|
||||
<div className="csItem"><br /><a href="https://docs.metamaps.cc/creating_synapses.html" target="_blank">Learn More</a></div>
|
||||
</div>
|
||||
<div id="csNavigation">
|
||||
<div className="csItem"><span className="csTitle">Move around Canvas:</span> Click and drag</div>
|
||||
<div className="csItem indented"><span className="csTitle">Zoom in/out:</span> Scroll OR click on <div id="zoomIn"> </div> & <div id="zoomOut"> </div></div>
|
||||
<div className="csItem indented"><span className="csTitle">Zoom to see all:</span> Click <div id="centerMap"></div> OR Ctrl + E</div>
|
||||
<div className="csItem"><span className="csTitle">Filter Map Contents:</span> Open the Filter Menu *** and toggle items off/on</div>
|
||||
<div className="csItem"><span className="csTitle">Return to 'Explore Maps' (home) page:</span> Click the Metamaps logo in the upper left corner</div>
|
||||
<div className="csItem"><br /><a href="https://docs.metamaps.cc/exploring_maps.html" target="_blank">Learn More</a></div>
|
||||
</div>
|
||||
<div id="csSelection">
|
||||
<div className="csItem"><span className="csTitle">Select/Deselect Topic:</span> Click on topic icon</div>
|
||||
<div className="csItem"><span className="csTitle">Select/Deselect Synapse:</span> Click on synapse</div>
|
||||
<div className="csItem"><span className="csTitle">Select multiple Topics/Synapses:</span> Shift + click to include each</div>
|
||||
<div className="csItem"><span className="csTitle">Select multiple with Selection Box:</span> Right-click/Shift-click + drag on Canvas</div>
|
||||
<div className="csItem"><span className="csTitle">Move all selected Topics & Synapses:</span> Click + drag on selected topic(s)/synapse(s)</div>
|
||||
<div className="csItem"><span className="csTitle">Open 'Context Menu':</span> Right-click/Alt-click on selected topic(s)</div>
|
||||
<div className="csItem indented">*Hide/Remove/Delete/Change permissions of multiple topics & synapses within context menu</div>
|
||||
<div className="csItem"><span className="csTitle">Zoom to selection box</span> Ctrl-click + drag</div>
|
||||
<div className="csItem"><span className="csTitle">Deselect all topics & Synapses:</span> Click on background or Esc</div>
|
||||
</div>
|
||||
<div id="csSearch">
|
||||
<div className="csItem"><span className="csTitle">Search for Topics and Maps:</span> Type query terms into search bar, wait for results below</div>
|
||||
<div className="csItem"><span className="csTitle">Limit search results:</span> Click checkbox for only items you created; click arrow above Topics or Maps section to collapse</div>
|
||||
<div className="csItem"><span className="csTitle">Add Topic to current Map:</span> Click "+" on a topic result</div>
|
||||
<div className="csItem"><span className="csTitle">Jump to Topic View:</span> Click anywhere else on a topic result</div>
|
||||
<div className="csItem"><span className="csTitle">Search by metacode:</span> type "[name of metacode]:", then your search query. i.e. idea:create...</div>
|
||||
<div className="csItem"><span className="csTitle">Search for map:</span> type "map:", then your search query. i.e. map:exploring...</div>
|
||||
<div className="csItem"><span className="csTitle">Search for mapper:</span> type "mapper:", then your search query. i.e. mapper:Robert</div>
|
||||
</div>
|
||||
<div id="csKeyboardShortcuts">
|
||||
<div className="csItem"><span className="csTitle">Ctrl + /:</span> Open 'Search' prompt</div>
|
||||
<div className="csItem"><span className="csTitle">Ctrl + H:</span> Hide selection on map</div>
|
||||
<div className="csItem"><span className="csTitle">Ctrl + M:</span> Remove selection from map</div>
|
||||
<div className="csItem"><span className="csTitle">Ctrl + D:</span> Delete selection</div>
|
||||
<div className="csItem"><span className="csTitle">Ctrl + A:</span> Select all topics</div>
|
||||
<div className="csItem"><span className="csTitle">Ctrl + E:</span> See all on map (zoom to extents)</div>
|
||||
<div className="csItem"><span className="csTitle">Esc (while in search):</span> Close search</div>
|
||||
<div className="csItem"><span className="csTitle">Esc (with selection):</span> Deselect all</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tutorials">
|
||||
<iframe id="tutorialVideo" src="//player.vimeo.com/video/88334167" width="552" height="320" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
</div>
|
||||
<div id="moreResources">
|
||||
<p>For more information about Metamaps.cc, visit our Knowledge Base or skip directly to a section by clicking on one of the categories below.</p>
|
||||
<div className="resourcesColumnOne resourcesColumn">
|
||||
<a href="https://hylo.com/c/metamaps" target="_blank" className="button">Hylo User Community</a>
|
||||
<ul>
|
||||
<li><a href="https://docs.metamaps.cc/getting_started.html" target="_blank">Getting Started</a></li>
|
||||
<li><a href="https://docs.metamaps.cc/best_practices.html" target="_blank">Best Practices</a></li>
|
||||
<li><a href="https://docs.metamaps.cc/applications_and_use_cases.html" target="_blank">Applications & Use Cases</a></li>
|
||||
<li><a href="https://docs.metamaps.cc/advanced_features.html" target="_blank">Advanced Features</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="resourcesColumnTwo resourcesColumn">
|
||||
<a href="https://docs.metamaps.cc" target="_blank" className="button">KNOWLEDGE BASE</a>
|
||||
<ul>
|
||||
<li><a href="https://docs.metamaps.cc/general_questions.html" target="_blank">General Questions</a></li>
|
||||
<li><a href="https://docs.metamaps.cc/project_organization_and_governance.html" target="_blank">Organization & Governance</a></li>
|
||||
<li><a href="https://docs.metamaps.cc/realtime_collaboration_junto.html" target="_blank">Realtime Collaboration</a></li>
|
||||
<li><a href="https://docs.metamaps.cc/importing_and_exporting_data.html" target="_blank">Importing and Exporting Data</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default CheatSheet
|
||||
12
src/components/LightBoxes/ForkMap.js
Normal file
12
src/components/LightBoxes/ForkMap.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import React, { Component } from 'react'
|
||||
|
||||
class ForkMap extends Component {
|
||||
render = () => {
|
||||
return (
|
||||
<div className="lightboxContent" id="forkmap">
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default ForkMap
|
||||
23
src/components/LightBoxes/Invite.js
Normal file
23
src/components/LightBoxes/Invite.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import React, { Component } from 'react'
|
||||
|
||||
class Invite extends Component {
|
||||
render = () => {
|
||||
return (
|
||||
<div className="lightboxContent" id="invite">
|
||||
<h3>SHARE INVITE</h3>
|
||||
<div className="leaveSpace"></div>
|
||||
<p>The Metamaps platform is currently in an invite-only beta with the express purpose of creating a high value knowledge ecosystem, a diverse community of contributors and a culture of collaboration and curiosity.</p>
|
||||
<p>As a valued beta tester, you have the ability to invite your peers, colleagues and collaborators onto the platform.</p>
|
||||
<p>Below is a personal invite link containing your unique access code, which can be used multiple times.</p>
|
||||
<div id="joinCodesBox">
|
||||
<p className="joinCodes">
|
||||
{`/join?code=${this.props.inviteCode}`}
|
||||
<button className="button" onClick={() => Metamaps.GlobalUI.shareInvite(this.props.inviteCode)}>COPY INVITE LINK!</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Invite
|
||||
22
src/components/LightBoxes/NoIE.js
Normal file
22
src/components/LightBoxes/NoIE.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import React, { Component } from 'react'
|
||||
|
||||
class NoIE extends Component {
|
||||
render = () => {
|
||||
return (
|
||||
<div className="lightboxContent" id="noIE">
|
||||
<h3>OOPS! <br /> YOUR BROWSER IS NOT SUPPORTED.</h3>
|
||||
<p id="noIEsubheading">To view this experience, please upgrade to the latest one of these browsers:</p>
|
||||
<a id="chromeIcon" href="https://www.google.com/chrome/browser/" target="_blank">Chrome</a>
|
||||
<a id="fireFoxIcon" href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a>
|
||||
<a id="safariIcon" href="http://support.apple.com/downloads/#safari" target="_blank">Safari</a>
|
||||
<p id="noIEbody">
|
||||
While it's downloading, explore our <a href="http://blog.metamaps.cc/">blog</a>,<br />
|
||||
watch the <a href="http://vimeo.com/88334167">tutorials</a>,
|
||||
or visit our <a href="https://docs.metamaps.cc">knowledge base</a>!
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default NoIE
|
||||
12
src/components/LightBoxes/SwitchMetacodes.js
Normal file
12
src/components/LightBoxes/SwitchMetacodes.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import React, { Component } from 'react'
|
||||
|
||||
class SwitchMetacodes extends Component {
|
||||
render = () => {
|
||||
return (
|
||||
<div className="lightboxContent" id="switchMetacodes">
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default SwitchMetacodes
|
||||
14
src/components/LightBoxes/Tutorial.js
Normal file
14
src/components/LightBoxes/Tutorial.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import React, { Component } from 'react'
|
||||
|
||||
class Tutorial extends Component {
|
||||
render = () => {
|
||||
return (
|
||||
<div className="lightboxContent" id="tutorial">
|
||||
<h3>Tutorial</h3>
|
||||
<iframe src="//player.vimeo.com/video/88334167?title=0&byline=0&portrait=0" width="510" height="319" frameBorder="0" allowFullScreen></iframe>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Tutorial
|
||||
33
src/components/LightBoxes/index.js
Normal file
33
src/components/LightBoxes/index.js
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import React, { Component } from 'react'
|
||||
|
||||
import About from './About'
|
||||
import CheatSheet from './CheatSheet'
|
||||
import ForkMap from './ForkMap'
|
||||
import Invite from './Invite'
|
||||
import NoIE from './NoIE'
|
||||
import SwitchMetacodes from './SwitchMetacodes'
|
||||
import Tutorial from './Tutorial'
|
||||
|
||||
class LightBoxes extends Component {
|
||||
render = () => {
|
||||
return (
|
||||
<div id="lightbox_overlay">
|
||||
<div id="lightbox_main">
|
||||
<a id="lightbox_close" href="#"></a>
|
||||
<div id="lightbox_content">
|
||||
<About />
|
||||
<CheatSheet />
|
||||
<ForkMap />
|
||||
<Invite />
|
||||
<NoIE />
|
||||
<SwitchMetacodes />
|
||||
<Tutorial />
|
||||
</div>
|
||||
</div>
|
||||
<div id="lightbox_screen" style={{height: '100%'}}></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default LightBoxes
|
||||
|
|
@ -5,6 +5,7 @@ import MobileHeader from '../components/MobileHeader'
|
|||
import UpperLeftUI from '../components/UpperLeftUI'
|
||||
import UpperRightUI from '../components/UpperRightUI'
|
||||
import Toast from '../components/Toast'
|
||||
import LightBoxes from '../components/LightBoxes'
|
||||
|
||||
class App extends Component {
|
||||
static propTypes = {
|
||||
|
|
@ -72,6 +73,7 @@ class App extends Component {
|
|||
signInPage={pathname === '/login'} />}
|
||||
<Toast message={toast} />
|
||||
{children}
|
||||
<LightBoxes />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue