added tabs
This commit is contained in:
Henry Jordan
@@ -12,7 +12,6 @@
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
title="CLOSE"
|
||||
@@ -20,10 +19,8 @@
|
||||
<i class="fa fa-x2 fa-times"></i>
|
||||
</button>
|
||||
<button
|
||||
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
title="HIDE_INBOX"
|
||||
@@ -31,10 +28,8 @@
|
||||
<i class="fa fa-outdent"></i>
|
||||
</button>
|
||||
<button
|
||||
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
title="language.ID_INBOX_SHOW_INBOX"
|
||||
@@ -44,7 +39,6 @@
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
title="language.ID_INBOX_FULL_SCREEN"
|
||||
@@ -52,26 +46,30 @@
|
||||
<i class="fa fa-window-maximize"></i>
|
||||
</button>
|
||||
<button
|
||||
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
|
||||
data-toggle="modal"
|
||||
data-placement="bottom"
|
||||
data-target="#debugModal"
|
||||
@click="showDebugger"
|
||||
>
|
||||
<i class="fa fa-bug"></i>
|
||||
</button>
|
||||
</div>
|
||||
<ModalDebugger ref="modal-debugger" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalDebugger from "./ModalDebugger.vue";
|
||||
export default {
|
||||
name: "ButtonFleft",
|
||||
props: {
|
||||
data: Object,
|
||||
},
|
||||
components: {
|
||||
ModalDebugger,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
openCaseState: true,
|
||||
@@ -82,6 +80,9 @@ export default {
|
||||
classBtn(cls) {
|
||||
return "btn v-btn-request " + cls;
|
||||
},
|
||||
showDebugger() {
|
||||
this.$refs["modal-debugger"].show();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -238,4 +239,107 @@ export default {
|
||||
clip: rect(0, 0, 0, 0);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hiddencon {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
right: -37px;
|
||||
top: 10px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.hiddencon-rtl {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
left: -37px;
|
||||
top: 10px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.hiddencon2 {
|
||||
top: auto;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.hiddencon:hover {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.hiddencon-rtl:hover {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.hiddencon-label {
|
||||
margin-top: -40px;
|
||||
margin-left: -23px;
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
background: #626262;
|
||||
font-size: 14px;
|
||||
border-radius: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
.hiddencon-label-rtl {
|
||||
margin-top: -40px;
|
||||
margin-right: -23px;
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
background: #626262;
|
||||
font-size: 14px;
|
||||
border-radius: 0 20px 20px 0;
|
||||
}
|
||||
|
||||
.hiddencon,
|
||||
.hiddencon-label {
|
||||
-webkit-transition: all 0.4s ease-in-out;
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.hiddencon p,
|
||||
.hiddencon ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 8px solid #798189;
|
||||
border-right: 0;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
.hiddencon ul {
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.hiddencon li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hiddencon li a {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #333;
|
||||
color: #ddd;
|
||||
-webkit-transition: all 0.4s linear;
|
||||
transition: all 0.4s linear;
|
||||
}
|
||||
|
||||
.hiddencon li:last-child a {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.hiddencon li a:hover {
|
||||
background-color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
233
resources/assets/js/components/home/debugger/ModalDebugger.vue
Normal file
233
resources/assets/js/components/home/debugger/ModalDebugger.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<b-modal ref="modal-debugger" hide-footer size="xl">
|
||||
<tabs>
|
||||
<tab name="Variables">
|
||||
<div
|
||||
class="btn-toolbar justify-content-between"
|
||||
role="toolbar"
|
||||
aria-label="Toolbar with button groups"
|
||||
>
|
||||
<div
|
||||
class="btn-group"
|
||||
role="group"
|
||||
aria-label="Basic radio toggle button group"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="btnradio"
|
||||
id="btnradio1"
|
||||
autocomplete="off"
|
||||
checked
|
||||
/>
|
||||
<label class="btn btn-outline-secondary" for="btnradio1"
|
||||
>Radio 1</label
|
||||
>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="btnradio"
|
||||
id="btnradio2"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-outline-secondary" for="btnradio2"
|
||||
>Radio 2</label
|
||||
>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="btnradio"
|
||||
id="btnradio3"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-outline-secondary" for="btnradio3"
|
||||
>Radio 3</label
|
||||
>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-text" id="btnGroupAddon2">@</div>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Input group example"
|
||||
aria-label="Input group example"
|
||||
aria-describedby="btnGroupAddon2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</tab>
|
||||
<tab name="Triggers"> </tab>
|
||||
</tabs>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tabs from "../../../components/tabs/Tabs.vue";
|
||||
import Tab from "../../../components/tabs/Tab.vue";
|
||||
export default {
|
||||
name: "ModalDebugger",
|
||||
components: {
|
||||
Tabs,
|
||||
Tab,
|
||||
},
|
||||
props: {},
|
||||
mounted() {
|
||||
this.initializeDebugTab();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: null,
|
||||
debugFullPage: false,
|
||||
debugTabs: [],
|
||||
activetab: 1,
|
||||
variableTabs: [],
|
||||
debugSearch: "",
|
||||
isRTL: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
classBtn(cls) {
|
||||
return "btn v-btn-request " + cls;
|
||||
},
|
||||
show() {
|
||||
this.$refs["modal-debugger"].show();
|
||||
},
|
||||
cancel() {
|
||||
this.$refs["modal-debugger"].hide();
|
||||
},
|
||||
unpauseCase() {},
|
||||
/**
|
||||
* Initializate debug menu
|
||||
*/
|
||||
initializeDebugTab() {
|
||||
this.debugTabs = [
|
||||
{
|
||||
id: "this.language.ID_VARIABLES",
|
||||
title: "this.language.ID_VARIABLES",
|
||||
function: "",
|
||||
},
|
||||
{
|
||||
id: "this.language.ID_TRIGGERS",
|
||||
title: "this.language.ID_TRIGGERS",
|
||||
function: "",
|
||||
},
|
||||
];
|
||||
this.variableTabs = [
|
||||
{
|
||||
id: "this.language.ID_ALL",
|
||||
title: "this.language.ID_ALL",
|
||||
function: "",
|
||||
},
|
||||
{
|
||||
id: "this.language.ID_DYNAFORMS",
|
||||
title: "this.language.ID_DYNAFORMS",
|
||||
function: "",
|
||||
},
|
||||
{
|
||||
id: "this.language.ID_SYSTEM",
|
||||
title: "this.language.ID_SYSTEM",
|
||||
function: "",
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tabs-component {
|
||||
margin: 0 0;
|
||||
}
|
||||
|
||||
.tabs-component-tabs {
|
||||
border: solid 1px #ddd;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.tabs-component-tabs {
|
||||
border: 0;
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-component-tab {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-right: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.tabs-component-tab:not(:last-child) {
|
||||
border-bottom: dotted 1px #ddd;
|
||||
}
|
||||
|
||||
.tabs-component-tab:hover {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tabs-component-tab.is-active {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tabs-component-tab.is-disabled * {
|
||||
color: #cdcdcd;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.tabs-component-tab {
|
||||
background-color: #fff;
|
||||
border: solid 1px #ddd;
|
||||
border-radius: 3px 3px 0 0;
|
||||
margin-right: 0.5em;
|
||||
transform: translateY(2px);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.tabs-component-tab.is-active {
|
||||
border-bottom: solid 1px #fff;
|
||||
z-index: 2;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-component-tab-a {
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
padding: 0.75em 1em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tabs-component-panels {
|
||||
padding: 4em 0;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.tabs-component-panels {
|
||||
border-top-left-radius: 0;
|
||||
background-color: #fff;
|
||||
border: solid 1px #ddd;
|
||||
border-radius: 0 6px 6px 6px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
|
||||
padding: 0.5em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group > input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user