Preferences: Move default value under the preference name, give it some faded styling

This commit is contained in:
nathangray 2021-04-27 14:34:13 -06:00
parent 59dbd27719
commit d141427007
4 changed files with 27 additions and 42 deletions

View File

@ -18,11 +18,14 @@ table.prefTable tbody tr.prefRow:first-child > .prefHelpColumn {
height: 99%; height: 99%;
} }
tr.prefRow:hover {background-color:#f0f0ff} tr.prefRow:hover {background-color:#f0f0ff}
td.prefName { .prefName .et2_label:first-child {
width: 50%; padding-top: 2px;
} }
tr.prefRow > td { tr.prefRow > td {
vertical-align: bottom; /* otherwise help will cover bigger prefValue */ vertical-align: top;
}
tr.prefRow > td.prefValueColumn {
vertical-align: middle;
} }
/*.prefValueColumn {border-right:none !important;}*/ /*.prefValueColumn {border-right:none !important;}*/
.prefHelpColumn { .prefHelpColumn {
@ -51,14 +54,13 @@ tr.prefRow:hover .prefHelp {
} }
.prefValue { .prefValue {
margin-right: 5px; margin-right: 5px;
width:49%; width:99%;
} }
.prefDefault { span.prefDefault {
float: right;
width:48%;
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 300px; padding-bottom: 5px;
color: silver;
} }
.prefValue textarea, textarea.prefValue { .prefValue textarea, textarea.prefValue {
width: 99%; width: 99%;

View File

@ -11,12 +11,12 @@
</columns> </columns>
<rows> <rows>
<row class="prefRow"> <row class="prefRow">
<box class="prefName"> <vbox class="prefName">
<description for="@${row}[name]" id="${row}[label]"/> <description for="@${row}[name]" id="${row}[label]"/>
</box> <description id="${row}[default]" no_lang="1" class="prefDefault"/>
</vbox>
<box class="prefValueColumn"> <box class="prefValueColumn">
<widget type="@${row}[type]" id="@${row}[name]" onchange="@${row}[onchange]" no_lang="1" class="prefValue" attributes="@${row}[attributes]"/> <widget type="@${row}[type]" id="@${row}[name]" onchange="@${row}[onchange]" no_lang="1" class="prefValue" attributes="@${row}[attributes]"/>
<description id="${row}[default]" no_lang="1" class="prefDefault"/>
</box> </box>
<box class="prefHelpColumn"> <box class="prefHelpColumn">
<html id="${row}[help]" class="prefHelp"/> <html id="${row}[help]" class="prefHelp"/>

View File

@ -32,12 +32,14 @@ table.prefTable tbody tr.prefRow:first-child > .prefHelpColumn {
tr.prefRow:hover { tr.prefRow:hover {
background-color: #f0f0ff; background-color: #f0f0ff;
} }
td.prefName { .prefName .et2_label:first-child {
width: 50%; padding-top: 5px;
} }
tr.prefRow > td { tr.prefRow > td {
vertical-align: bottom; vertical-align: top;
/* otherwise help will cover bigger prefValue */ }
tr.prefRow > td.prefValueColumn {
vertical-align: middle;
} }
/*.prefValueColumn {border-right:none !important;}*/ /*.prefValueColumn {border-right:none !important;}*/
.prefHelpColumn { .prefHelpColumn {
@ -49,7 +51,7 @@ tr.prefRow > td {
display: none; display: none;
width: 255px; width: 255px;
max-height: 99%; max-height: 99%;
height: calc(99% - 150px); height: calc(-51%);
background-color: #f0f0ff; background-color: #f0f0ff;
padding: 5px; padding: 5px;
top: 80px; top: 80px;
@ -68,14 +70,13 @@ tr.prefRow:hover .prefHelp {
} }
.prefValue { .prefValue {
margin-right: 5px; margin-right: 5px;
width: 49%; width: 99%;
} }
.prefDefault { span.prefDefault {
float: right;
width: 48%;
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 300px; padding-bottom: 5px;
color: silver;
} }
.prefValue textarea, .prefValue textarea,
textarea.prefValue { textarea.prefValue {
@ -92,7 +93,7 @@ textarea.prefValue {
width: 49%; width: 49%;
} }
.prefApp { .prefApp {
width: 49.5%; width: 49.50%;
} }
#preferences-password .dialogHeader td { #preferences-password .dialogHeader td {
text-align: center; text-align: center;
@ -154,13 +155,6 @@ table.prefTable {
table.prefTable tbody tr.prefRow:first-child > .prefHelpColumn { table.prefTable tbody tr.prefRow:first-child > .prefHelpColumn {
background-image: url(../../../pixelegg/images/dialog_info.png); background-image: url(../../../pixelegg/images/dialog_info.png);
} }
td.prefName {
width: 50%;
}
tr.prefRow > td {
vertical-align: bottom;
/* otherwise help will cover bigger prefValue */
}
.prefHelp { .prefHelp {
position: absolute; position: absolute;
display: none; display: none;
@ -181,10 +175,6 @@ tr.prefRow:hover .prefHelp {
z-index: 10; z-index: 10;
/* FF: displays it under next prefName without */ /* FF: displays it under next prefName without */
} }
.prefDefault,
.prefValue {
float: left;
}
.prefValue { .prefValue {
margin-right: 5px; margin-right: 5px;
} }

View File

@ -12,6 +12,7 @@
* @version $Id$ * @version $Id$
*/ */
@import (reference) "../../../pixelegg/less/def_buttons.less"; @import (reference) "../../../pixelegg/less/def_buttons.less";
@import (reference) "../../../pixelegg/less/def_design_pattern_color_font_shadow.less"; @import (reference) "../../../pixelegg/less/def_design_pattern_color_font_shadow.less";
@import (less) "../default/app.css"; @import (less) "../default/app.css";
@ -37,6 +38,7 @@
# # # # # #
##############################################*/ ##############################################*/
/*app.css Stylite*/ /*app.css Stylite*/
table.prefTable { table.prefTable {
@ -45,12 +47,6 @@ table.prefTable {
table.prefTable tbody tr.prefRow:first-child > .prefHelpColumn { table.prefTable tbody tr.prefRow:first-child > .prefHelpColumn {
background-image:url(../../../pixelegg/images/dialog_info.png); background-image:url(../../../pixelegg/images/dialog_info.png);
} }
td.prefName {
width: 50%;
}
tr.prefRow > td {
vertical-align: bottom; /* otherwise help will cover bigger prefValue */
}
.prefHelp { .prefHelp {
position: absolute; position: absolute;
display: none; display: none;
@ -68,9 +64,6 @@ tr.prefRow:hover .prefHelp {
display: block; display: block;
z-index: 10; /* FF: displays it under next prefName without */ z-index: 10; /* FF: displays it under next prefName without */
} }
.prefDefault, .prefValue {
float: left;
}
.prefValue { .prefValue {
margin-right: 5px; margin-right: 5px;
} }