added zoom btns

pull/1/head
LianaHus 5 years ago committed by Liana Husikyan
parent 84f08a8a7d
commit d4dcb11566
  1. 22
      src/app.js
  2. 1
      src/app/components/vertical-icons.js
  3. 22
      src/app/panels/main-view.js
  4. 30
      src/app/panels/tab-proxy.js

@ -61,14 +61,14 @@ var css = csjs`
pre { pre {
overflow-x: auto; overflow-x: auto;
} }
.browsersolidity { .remixIDE {
width : 100vw; width : 100vw;
height : 100vh; height : 100vh;
overflow : hidden; overflow : hidden;
flex-direction : row; flex-direction : row;
display : flex; display : flex;
} }
.mainpanel { .mainpanel {
display : flex; display : flex;
flex-direction : column; flex-direction : column;
overflow : hidden; overflow : hidden;
@ -86,16 +86,16 @@ var css = csjs`
flex-direction : row-reverse; flex-direction : row-reverse;
width : 320px; width : 320px;
} }
.highlightcode { .highlightcode {
position:absolute; position : absolute;
z-index:20; z-index : 20;
background-color: var(--info); background-color : var(--info);
} }
.highlightcode_fullLine { .highlightcode_fullLine {
position:absolute; position : absolute;
z-index:20; z-index : 20;
background-color: var(--info); background-color : var(--info);
opacity: 0.5; opacity : 0.5;
} }
` `
@ -162,7 +162,7 @@ class App {
self._components.resizeFeature = new PanelsResize(self._view.sidepanel) self._components.resizeFeature = new PanelsResize(self._view.sidepanel)
self._view.el = yo` self._view.el = yo`
<div class=${css.browsersolidity}> <div class=${css.remixIDE}>
${self._view.iconpanel} ${self._view.iconpanel}
${self._view.sidepanel} ${self._view.sidepanel}
${self._components.resizeFeature.render()} ${self._components.resizeFeature.render()}

@ -171,6 +171,7 @@ export class VerticalIcons extends Plugin {
* @param {string} name Name of profile of the module to activate * @param {string} name Name of profile of the module to activate
*/ */
addActive (name) { addActive (name) {
if (name === 'home') return
const themeType = globalRegistry.get('themeModule').api.currentTheme().quality const themeType = globalRegistry.get('themeModule').api.currentTheme().quality
const invert = themeType === 'dark' ? 1 : 0 const invert = themeType === 'dark' ? 1 : 0
const brightness = themeType === 'dark' ? '150' : '0' // should be >100 for icons with color const brightness = themeType === 'dark' ? '150' : '0' // should be >100 for icons with color

@ -11,19 +11,12 @@ var ContextView = require('../editor/contextView')
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var css = csjs` var css = csjs`
.mainview { .mainview {
display : flex;
flex-direction : column;
height : 100%;
}
.content {
position : relative;
display : flex; display : flex;
flex-direction : column; flex-direction : column;
height : 100%; height : 100%;
width : 100%; width : 100%;
} }
` `
export class MainView { export class MainView {
@ -181,13 +174,13 @@ export class MainView {
} }
render () { render () {
var self = this var self = this
if (self._view.el) return self._view.el if (self._view.mainview) return self._view.mainview
self._view.editor = self.editor.render() self._view.editor = self.editor.render()
self._view.editor.style.display = 'none' self._view.editor.style.display = 'none'
self._view.mainPanel = self.mainPanel.render() self._view.mainPanel = self.mainPanel.render()
self._view.terminal = self._components.terminal.render() self._view.terminal = self._components.terminal.render()
self._view.content = yo` self._view.mainview = yo`
<div class=${css.content}> <div class=${css.mainview}>
${self.tabProxy.renderTabsbar()} ${self.tabProxy.renderTabsbar()}
${self._view.editor} ${self._view.editor}
${self._view.mainPanel} ${self._view.mainPanel}
@ -195,11 +188,6 @@ export class MainView {
${self._view.terminal} ${self._view.terminal}
</div> </div>
` `
self._view.el = yo`
<div class=${css.mainview}>
${self._view.content}
</div>
`
// INIT // INIT
self._adjustLayout('top', self.data._layout.top.offset) self._adjustLayout('top', self.data._layout.top.offset)
@ -207,7 +195,7 @@ export class MainView {
if (e.altKey && e.keyCode === 84) self.tabProxy.switchNextTab() // alt + t if (e.altKey && e.keyCode === 84) self.tabProxy.switchNextTab() // alt + t
}) })
return self._view.el return self._view.mainview
} }
registerCommand (name, command, opts) { registerCommand (name, command, opts) {
var self = this var self = this

@ -117,10 +117,6 @@ export class TabProxy {
} }
} }
showTab (name) {
this._view.filetabs.activateTab(name)
}
addTab (name, title, switchTo, close, icon) { addTab (name, title, switchTo, close, icon) {
if (this._handlers[name]) return if (this._handlers[name]) return
@ -147,6 +143,14 @@ export class TabProxy {
this.handlers[type] = fn this.handlers[type] = fn
} }
onZoomOut () {
this.editor.editorFontSize(-1)
}
onZoomIn () {
this.editor.editorFontSize(1)
}
renderTabsbar () { renderTabsbar () {
this._view.filetabs = yo`<remix-tabs></remix-tabs>` this._view.filetabs = yo`<remix-tabs></remix-tabs>`
this._view.filetabs.addEventListener('tabClosed', (event) => { this._view.filetabs.addEventListener('tabClosed', (event) => {
@ -160,14 +164,18 @@ export class TabProxy {
this._view.filetabs.canAdd = false this._view.filetabs.canAdd = false
this._view.tabs = yo` const zoomBtns = yo`
<div style="width: 100%; height: 100%;"> <div class="d-flex flex-row justify-content-center align-items-center">
${this._view.filetabs} <span class="btn btn-sm fas fa-search-minus text-dark" onclick=${() => this.onZoomOut()}></span>
<span class="btn btn-sm fas fa-search-plus text-dark" onclick=${() => this.onZoomIn()}></span>
</div> </div>
` `
let tabsbar = yo`
<div class="d-flex align-items-center" style="max-height: 35px; height: 100%"> // @todo(#2492) remove style after the mainPanel layout fix.
${this._view.tabs} this._view.tabs = yo`
<div style="display: -webkit-box; min-height: 35px">
${zoomBtns}
${this._view.filetabs}
</div> </div>
` `
@ -191,6 +199,6 @@ export class TabProxy {
return false return false
}) })
return tabsbar return this._view.tabs
} }
} }

Loading…
Cancel
Save