Commit 0f86f497 authored by MARCHE Claude's avatar MARCHE Claude
Browse files

why3js, interface even more closer to the GTK one

parent ff8aabd5
......@@ -42,13 +42,6 @@ body {
width:100%;
}
#why3-main-panel {
width:100%;
padding:0;
margin:0;
flex: 1;
}
.why3-hidden {
z-index:-10;
position:absolute;
......@@ -104,50 +97,117 @@ body {
/**** Main view ****/
#why3-main-panel {
flex:1;
width:100%;
padding:0;
margin:0;
/* align-items:stretch; */ /* ? */
/* elements in that panel are inserted from left to right */
display:flex;
align-items:stretch;
flex-direction:row;
}
/*
#why3-main-panel > * {
flex-grow: 1;
width:auto;
height:auto;
}
*/
#why3-resize-bar {
flex-basis:3pt;
flex-grow:0;
flex-basis:10px;
flex-grow:0; /* not flex:0, because bar will become totally invisible */
}
#why3-main-panel #why3-resize-bar:hover {
cursor: ew-resize;
opacity:0.5;
border-style:solid;
border-width: 2pt;
box-sizing:border-box;
/* visual changes when mouse cursor is over the vertical resize bar */
#why3-resize-bar:hover {
cursor: ew-resize; /* mouse cursor becomes like 'leftrightarrow' */
opacity:0.5; /* bar becomes darker */
border-style:solid; /* ? */
border-width: 2pt; /* ? */
box-sizing:border-box; /* ? */
}
/*** MAIN EDITOR ***/
/*** LEFT PART: task list ***/
#why3-task-list-container {
flex-grow:1;
overflow:visible; /* add a scrollbar if too high to fit in the window */
flex:1; /* proportion of horizontal space taken in the main panel */
/* position:relative; /* ? */
margin:0; /* ? */
padding:0; /* ? */ */
}
#why3-task-list {
overflow:visible; /* add a scrollbar if too high to fit in the window */
width:100%;
height:100%;
}
/*** RIGHT PART: panel with item added vertically ***/
#why3-right-panel {
flex: 2;
width:100%;
padding:0;
margin:0;
/* align-items:stretch; */ /* ? */
/* elements in that panel are inserted from top to bottom */
display:flex;
flex-direction:column;
}
#why3-tab-container {
flex:1;
position:relative;
margin:0;
padding:0;
}
#why3-tab-container {
flex-grow:1;
#why3-resize-bar2 {
flex-basis:10px;
flex-grow:0; /* not flex:0 because bar would become totally invisible */
}
#why3-form-cont {
flex-grow:0;
position:relative;
margin:0;
padding:0;
width:100%;
}
#why3-tab-container2 {
flex:1;
position:relative;
margin:0;
padding:0;
}
/* visual changes when mouse cursor is over the horizaontal resize bar */
#why3-resize-bar2:hover {
cursor: ns-resize; /* mouse cursor becomes like 'updownarrow' */
opacity:0.5; /* becomes darker */
border-style:solid;
border-width: 2pt;
box-sizing:border-box;
}
#why3-task-viewer-container {
flex-grow:7; /* suggested by Sylvain */
flex:1;
position:relative;
margin:0;
padding:0;
}
#why3-editor {
position:absolute;
top:0;
......@@ -207,25 +267,20 @@ body {
width:100%;
height:100%;
}
#why3-task-list {
overflow:auto;
width:100%;
height:100%;
}
#why3-editor {
overflow:auto;
overflow:visible;
width:100%;
height:100%;
}
#why3-error-container {
overflow:auto;
overflow:visible;
width:100%;
height:100%;
}
#why3-log-container {
overflow:auto;
width:100%;
height:100%;
overflow:visible;
/* width:100%; */
/* height:100%; */
}
/******* CONTEXT MENU *********/
......@@ -272,7 +327,7 @@ body {
}
.why3-dialog {
z-index:102;
flex-grow:0;
flex:0;
box-shadow:0pt 0pt 5pt #333;
padding: 1em;
}
......
......@@ -90,47 +90,49 @@
<div id="why3-main-panel">
<div id="why3-task-list-container" class="why3-container">
<div id="why3-task-list" class="why3-widget">
<div id="why3-task-list-container">
<div id="why3-task-list">
Task tree not loaded yet. You may need to click on the 'reload' button (counterclockwise circular arrow above)
</div>
</div>
<div id="why3-resize-bar" class="why3-widget" ></div>
<div id="why3-tab-container" class="why3-container">
<div id="why3-tab-panel" class="why3-tab-group">
<span class="why3-tab-label why3-widget" >Task tree</span>
<div class="why3-widget why3-tab">
<div id="why3-task-viewer"> </div>
</div>
<span class="why3-tab-label why3-widget why3-inactive">Source code</span>
<div class="why3-widget why3-tab">
<div id="why3-editor-container" class="why3-container">
<div id="why3-editor">Ceci est le code source</div>
<div id="why3-right-panel">
<div id="why3-tab-container" class="why3-container">
<div id="why3-tab-panel" class="why3-tab-group">
<span class="why3-tab-label why3-widget" >Task</span>
<div class="why3-widget why3-tab">
<div id="why3-task-viewer"> No current proof task yet</div>
</div>
</div>
<span class="why3-tab-label why3-widget why3-inactive">Log</span>
<div class="why3-widget why3-tab">
<div id="why3-log-container" class="why3-container">
<iframe name="form-answer"></iframe>
<div id="why3-log-bg" class="why3-widget">
Log</div>
<span class="why3-tab-label why3-widget why3-inactive">Source code</span>
<div class="why3-widget why3-tab">
<div id="why3-editor-container" class="why3-container">
<div id="why3-editor">No source code loaded yet</div>
</div>
</div>
</div>
<span class="why3-tab-label why3-widget why3-inactive">Log</span>
<div class="why3-widget why3-tab">
<div id="why3-log-container" class="why3-container">
<div id="why3-log-bg" class="why3-widget">
Log</div>
</div>
</div>
</div>
</div>
</div>
<!--
<div id="why3-task-viewer-container" class="why3-container">
<div id="why3-viewer-bg" class="why3-widget"> </div>
</div>
-->
<!--
<div id="why3-task-viewer-container" class="why3-container">
<div id="why3-viewer-bg" class="why3-widget"> </div>
</div>
-->
</div>
<!-- TODO remove useless attribute inside why3-form -->
<div id="why3-resize-bar2" class="why3-widget" ></div>
<!-- TODO saisie -->
<div id="why3-form-cont">
<form id="why3-form" method="get"
......@@ -141,8 +143,6 @@
</form>
</div>
<div id="why3-resize-bar2" class="why3-widget" ></div>
<div id="why3-tab-container2">
<div id="why3-tab-panel2">
<span class="why3-widget"></span>
......@@ -154,6 +154,8 @@
</div>
</div>
</div>
</div>
</div>
<!-- open and save -->
......
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