Commit 3854b2f7 authored by Ken Nguyen's avatar Ken Nguyen
Browse files

Merge branch '43-add-edit-link-to-element' into 'master'

Resolve "Select elements by clicking on them in Edit window"

Closes #43

See merge request !8
parents 96a5b405 e2f05148
Pipeline #1247 passed with stages
in 4 minutes and 50 seconds
describe('Element - Check Card - Open editor', () => {
beforeEach(() => {
cy.request({
method: 'POST',
url: '/dashboard',
body: '{"title":"ABC","tags":["onfire"],"background":null,"elements":[],"globalMute":true,"variables":{},"okSound":"/dashboards-data/ok.mp3","criticalSound":"/dashboards-data/critical.mp3","warningSound":"/dashboards-data/warning.mp3","unknownSound":"/dashboards-data/unknown.mp3","upSound":"/dashboards-data/up.mp3","downSound":"/dashboards-data/down.mp3"}'
}).its('body').should('include', '{"slug":"abc"}')
cy.visit('/edit/abc')
cy.get('[data-cy="dashboard#new_element"]').click()
cy.get('[data-cy="element#close"]').click()
})
it('contains button to open editor', () => {
cy.contains('Edit').click()
cy.get('[data-cy="element:type"]').should('be.visible')
})
})
......@@ -2226,12 +2226,6 @@
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
},
"klona": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
"integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
"dev": true
},
"loader-runner": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
......@@ -3088,84 +3082,6 @@
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
"sass-loader": {
"version": "10.0.3",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.0.3.tgz",
"integrity": "sha512-W4+FV5oUdYy0PnC11ZoPrcAexODgDCa3ngxoy5X5qBhZYoPz9FPjb6Oox8Aa0ZYEyx34k8AQfOVuvqefOSAAUQ==",
"dev": true,
"requires": {
"klona": "^2.0.4",
"loader-utils": "^2.0.0",
"neo-async": "^2.6.2",
"schema-utils": "^3.0.0",
"semver": "^7.3.2"
},
"dependencies": {
"json5": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
"integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
"dev": true,
"requires": {
"minimist": "^1.2.5"
}
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"semver": {
"version": "7.3.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
"integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
"dev": true
}
}
},
"schema-utils": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
"integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
"dev": true,
"requires": {
"@types/json-schema": "^7.0.6",
"ajv": "^6.12.5",
"ajv-keywords": "^3.5.2"
},
"dependencies": {
"@types/json-schema": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
"integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
"dev": true
},
"ajv": {
"version": "6.12.5",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz",
"integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==",
"dev": true,
"requires": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
}
},
"ajv-keywords": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"dev": true
}
}
},
"semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
......
......@@ -23,7 +23,5 @@
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"devDependencies": {
"sass-loader": "^10.0.2"
}
"devDependencies": {}
}
......@@ -169,7 +169,10 @@ export function Editor({slug, selectedElementId}) {
</Fragment>
}
function TransformableElement({rect, updateRect, checkType, rotation, updateRotation, children, glow, highlight}) {
function TransformableElement({rect, updateRect, checkType, rotation, updateRotation, children, glow, highlight, index}) {
// Open editor on left sidepanel
const handleEdit = event => routeParam('selectedElementId', index)
//Handle dragging elements
const handleMove = downEvent => {
const mousemove = moveEvent => {
......@@ -292,22 +295,22 @@ function TransformableElement({rect, updateRect, checkType, rotation, updateRota
const _rotation = rotation ? `rotate(${rotation}rad)` : `rotate(0rad)`;
if (checkType === 'static-ticker'){
return <div class={`ticker ${glow || highlight ? 'glow' : ''}`}
return checkType === 'static-ticker' ?
<div class={`ticker ticker-editing ${glow || highlight ? 'glow' : ''}`}
style={{left: left, top: top, width: "100%", height: height}}
onMouseDown={handleMove}>
{children}
<div class="resize" onMouseDown={handleResize}></div>
<button type="button" class="edit btn btn-primary btn-sm" onClick={handleEdit}>Edit</button>
<div class="resize" onMouseDown={handleResize}></div>
</div>
: <div class={`check check-editing ${glow || highlight ? 'glow' : ''}`}
style={{left: left, top: top, width: width, height: height, transform: _rotation}}
onMouseDown={handleMove}>
{children}
<button type="button" class="edit btn btn-primary btn-sm" onClick={handleEdit}>Edit</button>
<div class="resize" onMouseDown={handleResize}></div>
<div class="rotate" onMouseDown={handleRotate}></div>
</div>
}
return <div class={`check ${glow || highlight ? 'glow' : ''}`}
style={{left: left, top: top, width: width, height: height, transform: _rotation}}
onMouseDown={handleMove}>
{children}
<div class="resize" onMouseDown={handleResize}></div>
<div class="rotate" onMouseDown={handleRotate}></div>
</div>
}
function DashboardElements({dashboardDispatch, selectedElementId, elements, highlightedElementId, dashboard, slug}) {
......@@ -347,12 +350,19 @@ function DashboardElements({dashboardDispatch, selectedElementId, elements, high
if(element.type === 'iframe-video') { ele = <IframeVideo options={element.options}/> }
if(element.type === 'audio-stream') { ele = <AudioStream options={element.options}/> }
return <TransformableElement rect={element.rect} updateRect={updateRect}
checkType={element.type}
glow={selectedElementId === index} highlight={highlightedElementId === index}
updateRotation={updateRotation} rotation={element.rotation}>
{ele}
</TransformableElement>
return (
<TransformableElement
rect={element.rect}
updateRect={updateRect}
checkType={element.type}
glow={selectedElementId === index}
highlight={highlightedElementId === index}
updateRotation={updateRotation} rotation={element.rotation}
index={index}
>
{ele}
</TransformableElement>
)
});
}
......@@ -799,7 +809,7 @@ export function ElementSettings({selectedElement, updateElement}) {
<div class="options">
<div class="lefty-righty spacer">
<h3 class="no-margin">{selectedElement.title}</h3>
<svg class="feather" onClick={e => removeParam('selectedElementId')}>
<svg class="feather" onClick={e => removeParam('selectedElementId')} data-cy="element#close">
<use xlinkHref={`/res/svgs/feather-sprite.svg#x`}/>
</svg>
</div>
......
......@@ -18,10 +18,6 @@
--color-icinga-yellow: #ff9000;
}
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@font-face {
font-family: 'Nunito';
font-style: normal;
......@@ -775,6 +771,16 @@ div.tag .close-icon {
}
/* DASHBOARD ELEMENTS */
.ticker > .check-content,
.check > .check-content {
overflow: hidden;
}
.ticker > .edit,
.check > .edit {
position: absolute;
}
.check {
cursor: move;
position: absolute;
......@@ -782,10 +788,19 @@ div.tag .close-icon {
text-transform: uppercase;
}
.check-editing {
overflow: visible;
}
.check.glow {
outline: 3px solid #0008ff;
}
.check > .edit {
top: -20px;
right: -30px;
}
.check > div.resize {
position: absolute;
right: -4px;
......@@ -963,6 +978,10 @@ a#text-link {
/* animation: marqueeX 10s linear infinite; */
}
.ticker-editing {
overflow: visible;
}
.ticker > .check-content {
pointer-events: none;
user-select: none;
......@@ -971,6 +990,11 @@ a#text-link {
/* animation: marqueeX 10s linear infinite; */
}
.ticker > .edit {
top: -20px;
right: 2px;
}
.ticker > div.resize {
position: absolute;
right: 50%;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment