Mirrors/xod
2
0
Fork 0
mirror of https://github.com/xodio/xod.git synced 2026-03-14 12:46:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1135 from xodio/tweak-support-700px-width

Browse Source 
Support 700px IDE window width
This commit is contained in:
Victor Nakoryakov
2018-03-20 12:40:56 +03:00
committed by GitHub
parent 12a37f2c39 71d02cca46
commit 85159c14fa
3 changed files with 53 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/xod-client-electron/src/app/main.js
View File

@@ -82,7 +82,9 @@ function createWindow() {
y: winState.y,
width: winState.width,
height: winState.height,
minWidth: 800,
// 700px is the content width on xod.io and Medium. Resizing down to it
// lets make 1-to-1 screencasts and snapshots
minWidth: 700,
minHeight: 600,
title: DEFAULT_APP_TITLE,
show: false,

45
packages/xod-client/src/core/styles/components/Suggester.scss
View File

@@ -11,15 +11,24 @@
}
.Suggester {
$width: 400px;
position: absolute;
left: 50%;
top: 5%;
z-index: 10;
width: 400px;
margin: 0 0 0 -400px;
width: $width;
margin-left: (-$width);
box-sizing: border-box;
@media(max-width: 2 * $width) {
/* In cases when the window is to narrow to host the whole suggester on the
right half, use the full width of the half we have */
width: 50vw;
margin-left: -50vw;
}
padding: 4px;
display: block;
@@ -112,14 +121,26 @@
}
&-item {
padding: 6px 4px;
height: 40px;
// Keeping a height of every line of the item the same is cruicial
// because at most times content will overflow (description is too
// long). To be sure the content is clipped accurately between lines
// the line height is fixed and inner elements should not add any
// non-complementary vertical margins and paddings
$line-height: 15px;
$padding-vert: 6px;
$title-margin: 3px;
padding: ($padding-vert + $title-margin) 4px 0 4px;
// The border is an artificial bottom-padding hiding overflown content
border-bottom: $padding-vert solid transparent;
height: 3 * $line-height;
position: relative;
overflow: hidden;
border-radius: 2px;
&--library {
height: 52px;
height: 4 * $line-height;
.add {
display: block;
@@ -141,9 +162,9 @@
display: block;
font-size: $font-size-l;
color: $sidebar-color-text-hover;
margin-bottom: 2px;
margin-top: -2px;
line-height: 1.2;
margin-bottom: $title-margin;
margin-top: -$title-margin;
line-height: $line-height;
.version {
font-size: $font-size-m;
@@ -151,17 +172,17 @@
}
}
.description {
color: $sidebar-color-subtitle;
display: block;
font-size: $font-size-m;
height: 28px;
padding-top: 2px;
line-height: $line-height;
overflow: hidden;
}
}
mark {
background: rgba(255,255,0,.25);
box-shadow: 0 0 2px rgba(255,255,0,.25);
background: rgba($olive, 0.5);
box-shadow: 0 0 2px rgba($olive, 0.5);
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

27
packages/xod-client/src/editor/containers/Helpbox.jsx
View File

@@ -64,20 +64,27 @@ class Helpbox extends React.Component {
window.removeEventListener(UPDATE_HELPBOX_POSITION, this.onUpdatePosition);
}
onUpdatePosition(event) {
// If helpbox refers to an element that is too close to the right side and
// helpbox could not fit window, it will be switched to the "rightSide"
// mode. That also means the pointer will be translated to the right side
// and helpbox will be positioned at the left side of referred element E.g.
//
// ProjectBrowser at the left side — Helpbox is not "rightSided" helpbox;
// ProjectBrowser at the right side — Helpbox "rightSided".
//
// Also if the helpbox is too wide to fit either side, a jut would be
// applied so that it will be completely visible at the expense of
// overlaping the referred element.
const windowWidth = window.innerWidth;
const elWidth = this.helpboxRef.clientWidth;
const rightSided = event.detail.right + elWidth >= windowWidth;
const overflow = Math.max(0, event.detail.right + elWidth - windowWidth);
const underflow = Math.max(0, elWidth - event.detail.left);
const rightSided = overflow > underflow;
const jut = rightSided ? underflow : -overflow;
const left =
jut + (rightSided ? event.detail.left - elWidth : event.detail.right);
const top = event.detail.top;
// if helpbox refers to element that closer to the right side and
// helpbox could not fit window — it will be switched to "rightSide"
// mode, that means that pointer will be translated to the right side
// and helpbox will be positioned at the left side of referred element
// E.G. ProjectBrowser at the left side — Helpbox is not "rightSided" helpbox
// ProjectBrowser at the right side — Helpbox "rightSided"
const left = rightSided ? event.detail.left - elWidth : event.detail.right;
const windowHeight = window.innerHeight;
const elHeight = this.helpboxRef.clientHeight;
const isFitWindow = top + elHeight < windowHeight;