Merge pull request #2855 from ethereum/embed_view

collapse terminal and side panel

src/app.js

@@ -412,7 +412,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   // get the file from gist
   const gistHandler = new GistHandler()
   const queryParams = new QueryParams()
-  const loadedFromGist = gistHandler.loadFromGist(queryParams.get(), fileManager)
+  const params = queryParams.get()
+  const loadedFromGist = gistHandler.loadFromGist(params, fileManager)
   if (!loadedFromGist) {
     // insert example contracts if there are no files to show
     self._components.filesProviders['browser'].resolveDirectory('/', (error, filesList) => {
@@ -428,4 +429,6 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   if (isElectron()) {
     appManager.activatePlugin('remixd')
   }
+
+  if (params.embed) framingService.embed()
 }

src/app/panels/main-view.js

@@ -80,7 +80,7 @@ export class MainView {
     self.data = {
       _layout: {
         top: {
-          offset: self._deps.config.get('terminal-top-offset') || 150,
+          offset: self._terminalTopOffset(),
           show: true
         }
       }
@@ -97,6 +97,9 @@ export class MainView {
       })
     }
   }
+  _terminalTopOffset () {
+    return this._deps.config.get('terminal-top-offset') || 150
+  }
   _adjustLayout (direction, delta) {
     var limitUp = 0
     var limitDown = 32
@@ -126,6 +129,12 @@ export class MainView {
       self._components.terminal.scroll2bottom()
     }
   }
+  minimizeTerminal () {
+    this._adjustLayout('top')
+  }
+  showTerminal (offset) {
+    this._adjustLayout('top', offset || this._terminalTopOffset())
+  }
   getTerminal () {
     return this._components.terminal
   }

src/app/tabs/theme-module.js

@@ -1,5 +1,6 @@
 import { Plugin } from '@remixproject/engine'
 import { EventEmitter } from 'events'
+import QueryParams from '../../lib/query-params'
 import * as packageJson from '../../../package.json'
 import yo from 'yo-yo'
 
@@ -38,7 +39,9 @@ export class ThemeModule extends Plugin {
       config: registry.get('config').api
     }
     this.themes = themes.reduce((acc, theme) => ({ ...acc, [theme.name]: theme }), {})
-    this.active = this._deps.config.get('settings/theme') ? this._deps.config.get('settings/theme') : 'Dark'
+    const theme = (new QueryParams()).get().theme
+    this.active = theme || this._deps.config.get('settings/theme') || 'Dark'
+    this.forced = theme !== undefined
   }
 
   /** Return the active theme */
@@ -76,7 +79,7 @@ export class ThemeModule extends Plugin {
     }
     const next = themeName || this.active   // Name
     const nextTheme = this.themes[next] // Theme
-    this._deps.config.set('settings/theme', next)
+    if (!this.forced) this._deps.config.set('settings/theme', next)
     document.getElementById('theme-link').setAttribute('href', nextTheme.url)
     document.documentElement.style.setProperty('--theme', nextTheme.quality)
     if (themeName) this.active = themeName

src/framingService.js

@@ -34,4 +34,9 @@ export class FramingService {
       }
     })
   }
+
+  embed () {
+    this.mainView.minimizeTerminal()
+    this.resizeFeature.hidePanel()
+  }
 }