Commit 3390b13d by ramdayalmunda

sidebars display completed

parent b84ed9a4
.a-doc-editor { .a-doc-editor {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 590px; height: 520px;
} }
.a-doc-editor canvas:focus-visible { .a-doc-editor canvas:focus-visible {
/* outline: auto rgb(0, 68, 255, 50%); */ /* outline: auto rgb(0, 68, 255, 50%); */
background: #fff;
} }
...@@ -23,20 +24,45 @@ ...@@ -23,20 +24,45 @@
flex: 1; flex: 1;
position: relative; position: relative;
background-color: #ccc; background-color: #ccc;
overflow: hidden;
transition: 300ms;
} }
.a-doc-editor .body .left-sidebar { .a-doc-editor .body .left-sidebar {
position: absolute; position: absolute;
padding: 8px;
height: 100%; height: 100%;
width: 17%;
left: 0; left: 0;
background-color: #be3737; background-color: #8a9a9b;
border-radius: 0 10px 10px 0;
transition: 300ms;
}
.a-doc-editor .body .left-sidebar.hide {
left: -16%;
transition: 300ms;
}
.a-doc-editor .body .toggle-sidebar {
cursor: pointer;
display: flex;
justify-content: space-between;
} }
.a-doc-editor .body .right-sidebar { .a-doc-editor .body .right-sidebar {
position: absolute; position: absolute;
height: 100%; height: 100%;
right: 0; right: 0;
background-color: #8abe37; width: 17%;
background-color: #969b8a;
border-radius: 10px 0 0 10px;
transition: 300ms;
}
.a-doc-editor .body .right-sidebar.hide {
right: -14%;
transition: 300ms;
} }
.a-doc-editor .body .scrolling-area { .a-doc-editor .body .scrolling-area {
...@@ -59,3 +85,24 @@ ...@@ -59,3 +85,24 @@
.a-doc-editor .body .scrolling-area canvas.page:first-child { .a-doc-editor .body .scrolling-area canvas.page:first-child {
margin-top: 10px; margin-top: 10px;
} }
.a-doc-editor ::-webkit-scrollbar {
width: 10px;
/* Set the width of the scrollbar */
}
/* Thumb */
.a-doc-editor ::-webkit-scrollbar-thumb {
background-color: #888;
/* Set the color of the scrollbar thumb */
border-radius: 5px;
/* Set border radius */
}
/* Track */
.a-doc-editor ::-webkit-scrollbar-track {
background-color: #f0f0f0;
/* Set the color of the scrollbar track */
border-radius: 5px;
/* Set border radius */
}
\ No newline at end of file
...@@ -76,22 +76,31 @@ var ADocEditor = function (customConfig) { ...@@ -76,22 +76,31 @@ var ADocEditor = function (customConfig) {
let leftSidebarId = `left-sidebar-${new Date().getTime()}` let leftSidebarId = `left-sidebar-${new Date().getTime()}`
let rightSidebarId = `right-sidebar-${new Date().getTime()}` let rightSidebarId = `right-sidebar-${new Date().getTime()}`
let htmlSetup = /*html*/` let htmlSetup = /*html*/`
<div class="a-doc-editor" id="${mainComponentId}"> <div class="a-doc-editor" id="${mainComponentId}">
<div class="header" id="${headerComponentId}"> <div class="header" id="${headerComponentId}">
<div>Menu bar</div> <div class="menu-bar">Menu bar</div>
<div>Formating tools</div> <div>Formating tools</div>
<div>Page tools</div> <div>Page tools</div>
</div> </div>
<div class="body"> <div class="body">
<div class="scrolling-area" id="${scrollingAreaId}"> <div class="scrolling-area" id="${scrollingAreaId}"></div>
<div class="left-sidebar hide" id="${leftSidebarId}">
<div class="toggle-sidebar">
<span>Summary</span>
<span>X</span>
</div>
</div>
<div class="right-sidebar hide" id="${rightSidebarId}">
<div class="toggle-sidebar">
<span>X</span>
<span>Comments</span>
</div>
</div> </div>
<div class="left-sidebar" id="${leftSidebarId}">Left</div>
<div class="right-sidebar" id="${rightSidebarId}">Right</div>
</div> </div>
<div class="footer" id="${footerComponentId}"> <div class="footer" id="${footerComponentId}">
<div>Footer Data</div> <div>Footer Data</div>
</div> </div>
</div> </div>
` `
container.innerHTML = htmlSetup container.innerHTML = htmlSetup
mainComponent = document.getElementById(mainComponentId) mainComponent = document.getElementById(mainComponentId)
...@@ -100,6 +109,12 @@ var ADocEditor = function (customConfig) { ...@@ -100,6 +109,12 @@ var ADocEditor = function (customConfig) {
footerComponent = document.getElementById(footerComponentId) footerComponent = document.getElementById(footerComponentId)
leftSidebar = document.getElementById(leftSidebarId) leftSidebar = document.getElementById(leftSidebarId)
rightSidebar = document.getElementById(rightSidebarId) rightSidebar = document.getElementById(rightSidebarId)
mainComponent.getElementsByClassName('toggle-sidebar')[0].addEventListener('click',(e)=>{
leftSidebar.classList.toggle('hide')
})
mainComponent.getElementsByClassName('toggle-sidebar')[1].addEventListener('click',(e)=>{
rightSidebar.classList.toggle('hide')
})
......
...@@ -11,9 +11,13 @@ ...@@ -11,9 +11,13 @@
body { body {
background: #aaa; background: #aaa;
} }
#user-container-for-editor{
margin: 20px;
}
</style> </style>
</head> </head>
<body> <body>
<div class="body"></div>
<p>Click on the canvas and start typing</p> <p>Click on the canvas and start typing</p>
<div id="user-container-for-editor"></div> <div id="user-container-for-editor"></div>
......
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