);
} else { //there are no files so do not show theim
return '';
@@ -222,18 +232,24 @@ class CommentBox extends Component {
//set the posiotn of the comment box
_setPosition = () => {
+ const MAX_POSITON_BOTTOM = 250;
+ //-------------------------------------------------------------------------------standard height with edit bar: standard height without eddit bar ------------------------------------------- the margin;
+ const commentBoxHeight = (document.querySelector('.ln-commentbox') === null) ? ((this.props.inEditMode) ? 231 : 192) : document.querySelector('.ln-commentbox').getBoundingClientRect().height + 15;
+
//this comment box is used 2 times in the app. When creating and edditigng isseu;
let position = {
style: {
+ transform: 0,
top: null
},
class: 'ln-commentbox-left'
};
+
if (this.props.inEditMode) { // when edditing also ad the left prop;
position.style.left = this.props.ticket.position.x;
//when the position of the box is on the right side posion the box on the right;
- if (this.props.ticket.position.x > (generalConfig.maxX(0) /2) - 100) {
+ if (this.props.ticket.position.x > (generalConfig.maxX(0) / 2) - 100) {
position.style.left = this.props.ticket.position.x - 480 + this.props.ticket.position.width;
position.class = 'ln-commentbox-right';
}
@@ -242,6 +258,12 @@ class CommentBox extends Component {
position.class = this.props.positionClass;
position.style.top = this.props.ticket.position.height;
}
+
+ if (this.props.ticket.position.y > helpers.pageHeight() - this.props.ticket.position.height - MAX_POSITON_BOTTOM) {
+ position.style.transform = - (commentBoxHeight + this.props.ticket.position.height);
+
+ position.class = position.class + ' ln-commentbox-top';
+ }
return position;
}
@@ -261,7 +283,7 @@ class CommentBox extends Component {
return (
-
-
-
+
+
);
@@ -307,16 +329,16 @@ class CommentBox extends Component {
- )
+ );
} else if (this.props.isUploaded === true) { //show a confirm that the ticket is uploaded
return (
-
{ translate('commentBoxSucces')}
+
{translate('commentBoxSucces')}
- )
+ );
} else { //do not render anything
return '';
}
@@ -324,7 +346,7 @@ class CommentBox extends Component {
render = () => {
return (
-
+
);
}
-};
+}
// * Export Component ==================================================================== * /
export default CommentBox;
diff --git a/src/scripts/components/inputText/inputText.js b/src/scripts/components/inputText/index.js
similarity index 99%
rename from src/scripts/components/inputText/inputText.js
rename to src/scripts/components/inputText/index.js
index 6662205..9a8fa62 100644
--- a/src/scripts/components/inputText/inputText.js
+++ b/src/scripts/components/inputText/index.js
@@ -57,7 +57,7 @@ class Input extends Component {
{this.props.helperText}
- )
+ );
}
/**
* RENDER
@@ -79,7 +79,7 @@ class Input extends Component {
);
}
-};
+}
/* Export Component ==================================================================== */
export default Input;
diff --git a/src/scripts/components/loader/loader.js b/src/scripts/components/loader/index.js
similarity index 96%
rename from src/scripts/components/loader/loader.js
rename to src/scripts/components/loader/index.js
index c695ef9..dda68e0 100644
--- a/src/scripts/components/loader/loader.js
+++ b/src/scripts/components/loader/index.js
@@ -22,7 +22,7 @@ class Loader extends Component {
render = () => {
//the animation is done with css
return (
-
+
diff --git a/src/scripts/components/rootElement/rootElement.js b/src/scripts/components/rootElement/index.js
similarity index 88%
rename from src/scripts/components/rootElement/rootElement.js
rename to src/scripts/components/rootElement/index.js
index 8151c13..677963c 100644
--- a/src/scripts/components/rootElement/rootElement.js
+++ b/src/scripts/components/rootElement/index.js
@@ -3,14 +3,11 @@
/* Setup ==================================================================== */
import React, {Component} from 'react';
-import ext from '../../utils/ext';
-import generalConfig from '../../config/general';
-
//import helpers
import helpers from '../../utils/helpers';
// Components
-import Router from '../router/router';
+import Router from '../router';
/* Component ==================================================================== */
class Root extends Component {
@@ -21,10 +18,10 @@ class Root extends Component {
this.state = { // the inner windowwidth
width: window.innerWidth,
height: helpers.pageHeight()
- }
+ };
}
- componentDidMount(props) {
+ componentDidMount() {
//watch on the window rezise
window.addEventListener('resize', this._watchResizeOfPage);
}
@@ -50,7 +47,7 @@ class Root extends Component {
);
}
-};
+}
/* Export Component ==================================================================== */
export default Root;
diff --git a/src/scripts/components/router/router.js b/src/scripts/components/router/index.js
similarity index 91%
rename from src/scripts/components/router/router.js
rename to src/scripts/components/router/index.js
index a5de3ee..3c28fba 100644
--- a/src/scripts/components/router/router.js
+++ b/src/scripts/components/router/index.js
@@ -2,16 +2,15 @@
/* Setup ==================================================================== */
import React, {Component} from 'react';
-import Tour from '../../components/userTour/index';
+import Tour from '../../components/userTour';
import ext from '../../utils/ext';
-import generalConfig from '../../config/general';
// Components
-import ToolBar from '../toolbar/toolbar';
-import Selector from '../selector/selector';
-import Setup from '../setup/setup'
-import TicketsOnPage from '../ticketsOnPage/ticketsOnPage';
+import ToolBar from '../toolbar';
+import Selector from '../selector';
+import Setup from '../setup'
+import TicketsOnPage from '../ticketsOnPage';
//data
import tourSteps from '../../config/tourSteps';
@@ -19,7 +18,6 @@ import tourSteps from '../../config/tourSteps';
//helpers
import generalData from '../../config/general';
import message from '../../utils/message.js';
-import helpers from '../../utils/helpers';
import routerHelper from './routerHelper';
/* Component ==================================================================== */
@@ -97,7 +95,7 @@ class Router extends Component {
}
//render the right part
- _stateRoutingLogic = (state) => {
+ _stateRoutingLogic = () => {
console.info(`>--------: Navigate to the ${this.state.lnState} page`);
if (this.state.lnState === 'home') {
return (
@@ -128,7 +126,7 @@ class Router extends Component {
);
}
-};
+}
//* Export Component ==================================================================== */
export default Router;
diff --git a/src/scripts/components/selector/SelectorBackground.js b/src/scripts/components/selector/SelectorBackground.js
index 75267c2..447cdbf 100644
--- a/src/scripts/components/selector/SelectorBackground.js
+++ b/src/scripts/components/selector/SelectorBackground.js
@@ -2,9 +2,6 @@
/* Setup ==================================================================== */
import React, {Component} from 'react';
-import ext from '../../utils/ext';
-import generalConfig from '../../config/general';
-import {select} from '../../utils/helpers';
/* Component ==================================================================== */
class SelectorBackground extends Component {
@@ -24,11 +21,11 @@ class SelectorBackground extends Component {
}
componentDidMount() {
- window.addEventListener("resize", this.updateDimensions);
+ window.addEventListener('resize', this.updateDimensions);
}
//remove the event when the element is gone
componentWillUnmount() {
- window.removeEventListener("resize", this.updateDimensions);
+ window.removeEventListener('resize', this.updateDimensions);
}
updateDimensions = () => {
@@ -40,7 +37,6 @@ class SelectorBackground extends Component {
*/
render = () => {
- let borderWidth = 4;
let {width} = this.state;
let {top, left, height} = this.props;
@@ -77,8 +73,7 @@ class SelectorBackground extends Component {
);
}
-
-};
+}
/* Export Component ==================================================================== */
export default SelectorBackground;
diff --git a/src/scripts/components/selector/selector.js b/src/scripts/components/selector/index.js
similarity index 86%
rename from src/scripts/components/selector/selector.js
rename to src/scripts/components/selector/index.js
index 72a38a8..5f1ed1b 100644
--- a/src/scripts/components/selector/selector.js
+++ b/src/scripts/components/selector/index.js
@@ -4,17 +4,16 @@
import React, {Component} from 'react';
//tools
-import ext from '../../utils/ext';
import generalConfig from '../../config/general';
//helpers
-import {select, setMinMaxWidth} from '../../utils/helpers';
+import {setMinMaxWidth} from '../../utils/helpers';
import SelectorHelper from './selectorHelper';
import routerHelper from '../router/routerHelper'
//components
import SelectorBackground from './SelectorBackground'
-import CommentBox from './../commentbox/commentBox';
+import CommentBox from './../commentbox';
import helpers, {translate} from '../../utils/helpers';
import message from '../../utils/message';
@@ -52,12 +51,6 @@ class Selector extends Component {
height: 0
}
},
- //this is saved in the ticket
-
- left: 0, //TODO: this should not be used anymore
- top: 0,
- width: 0,
- height: 0,
//this are helpers
startX: -1,
@@ -72,7 +65,7 @@ class Selector extends Component {
this._takeScreenshot(translate('selectorScreenshotName'));
}
- componentDidMount(props) {
+ componentDidMount() {
this._addMouseEvents();
}
@@ -88,7 +81,7 @@ class Selector extends Component {
}
-//remove all the events
+ //remove all the events
_removeMouseEvents() {
document.removeEventListener('mousedown', this._onMouseDown, false);
document.removeEventListener('mousemove', this._onMouseMove, false);
@@ -100,7 +93,7 @@ class Selector extends Component {
_onMouseDown = (e) => {
e.preventDefault();
if (this.state.isDrawing) {
- this.setState({cursorStyle: "default", isDrawing: false})
+ this.setState({cursorStyle: 'default', isDrawing: false});
} else {
this.setState({
@@ -108,15 +101,20 @@ class Selector extends Component {
startX: this.state.x, //x position
startY: this.state.y, //y position
});
+ this._onMouseMove(e);
}
}
+
//listen to the esc key. Then go the home page;
_onKeyDown = (e) => {
- if (e.keyCode === 27) { //27 === EXC key
+ const ESC_KEY = 27;
+
+ if (e.keyCode === ESC_KEY) { //27 === EXC key
this._removeMouseEvents();
routerHelper.setStateApp('home');
}
}
+
_takeScreenshot = (screenshotName) => {
const _this = this;
return new Promise(function(resolve, reject) {
@@ -145,21 +143,33 @@ class Selector extends Component {
}
//when de drawing is stoped hide the comment box and stop the events.
- _onMouseUp = (e) => {
+ _onMouseUp = () => {
this.props.onSelected();
this._checkSelection();
this.setState({isDrawing: false, cursorStyle: 'default', showCommentbox: true, positionClass: this._checkClassname()});
this._removeMouseEvents();
+ this._checkCommentBoxIsInView();
}
//set the classname;
//so the position of the comment box is on the left or right side;
_checkClassname = () => {
- return (this.state.ticket.position.x > (generalConfig.maxX(0) / 2) - 100)
+ const MARGIN = 100;
+ return (this.state.ticket.position.x > (generalConfig.maxX(0) / 2) - MARGIN)
? 'ln-commentbox-right'
: 'ln-commentbox-left';
}
- // //for setting the new state in the ticket {object}
+
+ _checkCommentBoxIsInView = () => {
+ const positionY = this.state.ticket.position.y;
+ const pageHeight = helpers.pageHeight();
+
+ if (positionY < pageHeight) {
+ helpers.scrollTo(0, positionY);
+ }
+ }
+
+ // for setting the new state in the ticket {Object}
_handleStateChange = (newState) => {
//set the new state to the selected ticket;
this.setState({ticket: newState});
@@ -167,20 +177,22 @@ class Selector extends Component {
_checkSelection = () => {
let {width, height} = this.state.ticket.position;
- if (width < generalConfig.minWidth) {
- let position = {
- width: generalConfig.minWidth,
- height: this.state.ticket.height,
- x: this.state.ticket.x,
- y: this.state.ticket.y
- };
- let newStateTicket = helpers.setNewState(this.state.ticket, 'position', position);
+ let position = {
+ height: height,
+ width: width,
+ x: this.state.ticket.position.x,
+ y: this.state.ticket.position.y
+ };
- this.setState({width: generalConfig.minWidth});
+ if (width < generalConfig.minWidth) {
+ position.width = generalConfig.minWidth;
}
+
if (height < generalConfig.minHeight) {
- this.setState({height: generalConfig.minHeight});
+ position.height = generalConfig.minHeight;
}
+ let newStateTicket = helpers.setNewState(this.state.ticket, 'position', position);
+ this.setState({ticket: newStateTicket});
return true;
}
@@ -210,7 +222,7 @@ class Selector extends Component {
_onCommentBoxSubmit = () => {
let _this = this;
- _this.setState({isLoading: true, loadingText: translate('selectorLoadingText')})
+ _this.setState({isLoading: true, loadingText: translate('selectorLoadingText')});
//take a screenshot of the selected item
this._takeScreenshot(translate('selectorScreenshotNameAfter')).then(function() {
message.send('submitNewTicket', {
@@ -218,7 +230,7 @@ class Selector extends Component {
hostname: generalConfig.hostname,
url: generalConfig.url,
shortlink: generalConfig.shortlink
- }).then(function(newTicketData) {
+ }).then(function() {
setTimeout(function() {
_this.setState({isLoading: false, isUploaded: true});
@@ -229,7 +241,6 @@ class Selector extends Component {
}, 2000);
});
});
-
}
_updateFramePosition = (left, top) => {
@@ -277,7 +288,7 @@ class Selector extends Component {
left: this.state.x + 'px',
top: this.state.y + 'px'
}}>
- {translate('selectorHelper')}
+ {translate('selectorHelper')}
);
}
@@ -303,7 +314,7 @@ class Selector extends Component {
height: this.state.ticket.position.height + 'px',
width: this.state.ticket.position.width + 'px'
}}>
-
+
{this._renderCommentBox()}
@@ -329,7 +340,7 @@ class Selector extends Component {
}
}
-};
+}
/* Export Component ==================================================================== */
export default Selector;
diff --git a/src/scripts/components/selector/selectorHelper.js b/src/scripts/components/selector/selectorHelper.js
index 213c067..d8d93c6 100644
--- a/src/scripts/components/selector/selectorHelper.js
+++ b/src/scripts/components/selector/selectorHelper.js
@@ -2,12 +2,11 @@
/* Setup ==================================================================== */
import React, {Component} from 'react';
-import ext from '../../utils/ext';
import generalConfig from '../../config/general';
//helpers
-import {select, setMinMaxWidth, pageHeight} from '../../utils/helpers';
-import {setStateApp} from '../router/routerHelper';
+import {setMinMaxWidth} from '../../utils/helpers';
+import routerHelper from '../router/routerHelper';
/* Component ==================================================================== */
class SelectorHelper extends Component {
@@ -44,18 +43,20 @@ class SelectorHelper extends Component {
_addMouseEvents() {
document.addEventListener('mousemove', this._onMouseMove, false);
+ document.addEventListener('mouseup', this._onMouseUp, false);
document.addEventListener('keypress', this._onKeyDown, false);
}
_removeMouseEvents() {
document.removeEventListener('mousemove', this._onMouseMove, false);
+ document.removeEventListener('mouseup', this._onMouseUp, false);
// document.removeEventListener('keypress', this._onKeyDown, false);
}
_onKeyDown = (e) => {
const KEY_ESC = 27; // the esc key
if (e.keyCode === KEY_ESC) {
this._removeMouseEvents();
- setStateApp('home'); //go to a page
+ routerHelper.setStateApp('home'); //go to a page
}
}
@@ -75,11 +76,10 @@ class SelectorHelper extends Component {
/**
* When the mouse is down add other mouse events
- * @param {e} e
+ * @param {e} e
*/
_onMouseDown = (e) => {
let checkTransform = this._checkTransform(e.target.className);
-
this._addMouseEvents();
this.setState({isDragging: true, movement: checkTransform.movement, element: e.target.className});
}
@@ -88,7 +88,8 @@ class SelectorHelper extends Component {
* remove all events when the mouse is up
* @param {e} e
*/
- _onMouseUp = (e) => {
+ _onMouseUp = () => {
+
this._removeMouseEvents();
this.setState({isDragging: false, movement: null, element: null});
}
@@ -99,7 +100,7 @@ class SelectorHelper extends Component {
*/
_onMouseMove = (e) => {
this._setMousePosition(e);
- let _this = this;
+ // let _this = this;
if (this.props.showCommentbox && this.state.isDragging) {
@@ -108,7 +109,7 @@ class SelectorHelper extends Component {
let proposedValue = {
x: this.state.x - (this.props.width / 2),
- y: this.state.y - (this.props.height / 2)
+ y: this.state.y - (this.props.height / 2) - window.scrollY
};
let newX = setMinMaxWidth(proposedValue.x, generalConfig.minX, generalConfig.maxX(this.props.width));
@@ -118,7 +119,7 @@ class SelectorHelper extends Component {
//the scale of the elemtn this is work in progress
} else if (this.state.movement === 'scale') {
- //TODO; make this
+ //TODO: make this
// let directions = this.state.directions;
// let proposedValue = {
// top: setMinMaxWidth(this.state.y, generalConfig.minY, generalConfig.maxY),
@@ -215,7 +216,7 @@ class SelectorHelper extends Component {
);
}
-};
+}
/* Export Component ==================================================================== */
export default SelectorHelper;
diff --git a/src/scripts/components/setup/setup.js b/src/scripts/components/setup/index.js
similarity index 93%
rename from src/scripts/components/setup/setup.js
rename to src/scripts/components/setup/index.js
index 75d907b..4339f46 100644
--- a/src/scripts/components/setup/setup.js
+++ b/src/scripts/components/setup/index.js
@@ -4,17 +4,15 @@
import React, {Component} from 'react';
//Component
-import Input from '../inputText/inputText';
-import Loader from '../loader/loader';
+import Input from '../inputText';
+import Loader from '../loader';
//general funcions
-import ext from '../../utils/ext';
-import helpers, {translate} from '../../utils/helpers'
+import {translate} from '../../utils/helpers'
import generalData from '../../config/general';
//helpers
import message from '../../utils/message';
-import routerHelper from '../router/routerHelper';
/* Component ==================================================================== */
class Setup extends Component {
@@ -60,7 +58,7 @@ class Setup extends Component {
toolProjectId: '',
toolUrl: '',
toolName: ''
- }
+ };
}
//get the saved sites and set it to the saved projects
@@ -76,6 +74,12 @@ class Setup extends Component {
this.setState({
[e.target.name]: e.target.value
});
+
+
+ //when it's a sleect auto unfocus;
+ if(e.target.type === 'select-one') {
+ e.target.blur();
+ }
}
//save a projct
@@ -98,8 +102,9 @@ class Setup extends Component {
//check the credentials from the user
- _checkCredetionals = () => {
+ _checkCredetionals = (e) => {
let _this = this;
+ e.preventDefault();
if (this.state.accountUserName.length < 2 && this.state.accountPassword.length < 2 && this.state.toolUrl.length < 2) {
this._setError(translate('setupMissingFieldsError'));
//not everu field is filed in.
@@ -299,7 +304,7 @@ class Setup extends Component {
if (this.state.isLoading === true) {
return (
- )
+ );
}
if (this.state.page === 1) {
return (
@@ -312,10 +317,10 @@ class Setup extends Component {
-
+
);
@@ -330,12 +335,12 @@ class Setup extends Component {