flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-30 19:00:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

tuning editor layout...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-11-30 02:01:39 +04:00
parent b2b3cc58e9
commit 341b6aaa07
1 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
ui/experiments/editor.html
View File

@ -3,8 +3,9 @@
.panel { .panel {
display: inline-block; display: inline-block;
width: 508px; min-width: 200px;
min-width: 500px; max-width: 450px;
border: solid 2px silver; border: solid 2px silver;
border-radius: 4px; border-radius: 4px;
@ -16,7 +17,6 @@
} }
.panel summary { .panel summary {
padding-left: 3px; padding-left: 3px;
/*background: #ddd;*/
background: silver background: silver
} }
.panel summary::-webkit-details-marker { .panel summary::-webkit-details-marker {
@ -42,7 +42,6 @@
background: white; background: white;
} }
.panel details { .panel details {
width: 500px;
margin: 3px; margin: 3px;
border: solid 1px silver; border: solid 1px silver;
box-shadow: none; box-shadow: none;
@ -64,20 +63,24 @@
/* main controls */ /* main controls */
.panel .control {
white-space:nowrap;
}
.panel .control .title { .panel .control .title {
display: inline-block; display: inline-block;
width: 100px; width: 80px;
/*margin-right: -80px;*/
cursor: move; cursor: move;
} }
.panel .control .slider { .panel .control .slider {
-webkit-appearance: none !important; -webkit-appearance: none !important;
width: 300px; width: 200px;
height: 4px; height: 4px;
border: solid 1px gray; border: solid 1px gray;
border-radius: 2px; border-radius: 2px;
background: silver; background: silver;
} }
.panel .control.at-default .slider {
}
.panel .control .slider::-webkit-slider-thumb { .panel .control .slider::-webkit-slider-thumb {
-webkit-appearance: none !important; -webkit-appearance: none !important;
height: 15px; height: 15px;
@ -87,6 +90,9 @@
background: white; background: white;
box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
} }
.panel .control.at-default .slider::-webkit-slider-thumb {
opacity: 0.5;
}
.panel .control .value { .panel .control .value {
-webkit-appearance: none !important; -webkit-appearance: none !important;
display: inline-block; display: inline-block;
@ -104,7 +110,7 @@
} }
.panel .control .reset { .panel .control .reset {
visibility: hidden; visibility: hidden;
border: none; border: solid 1px transparent;
} }
.panel .control:hover button.reset { .panel .control:hover button.reset {
visibility: visible; visibility: visible;
@ -124,11 +130,23 @@
padding-right: 5px; padding-right: 5px;
background: white; background: white;
} }
.panel .state:active {
background: silver;
}
.panel .state.ui-draggable-dragging {
box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.4);
}
.panel .states { .panel .states {
min-height: 30px; min-height: 30px;
} }
/* misc */
.panel hr {
border: none;
border-top: solid 1px silver;
}
</style> </style>
<script src="jquery.js"></script> <script src="jquery.js"></script>
@ -304,6 +322,11 @@ function makeAbsRange(text, filter, target, min, max, dfl, step, translate, norm
var val = this.valueAsNumber var val = this.valueAsNumber
value.val(val) value.val(val)
updateFilter(target, filter, translate(val)) updateFilter(target, filter, translate(val))
if(parseFloat(val) == dfl){
elem.addClass('at-default')
} else {
elem.removeClass('at-default')
}
}) })
.appendTo(elem) .appendTo(elem)
var value = $('<input type="number" class="value"/>') var value = $('<input type="number" class="value"/>')