Столкнулся со странным поведением некоторых элементов
Небольшая поясняющая картинка и комментарии
Сразу приведу кусок разметки
<div class="layer" cmd="cmd_set_active_layer" selected>
<input type='checkbox' cmd="cmd_show_layer" checked/>
<div class='title'><span class='title'>new layer new layer new layer</span></div>
<div class="delete" cmd="cmd_delete_layer"/>
</div>
1. div с текстом new layer "липнет" к правому краю. Все перепробовал, кто, или что его застявляет так отображаться — не нашел.
2. Чтобы "дотянуться" в CSS из input-а до div.layer приходится использовать parent = self.parent().parent(); хотя по идее должен работать просто parent() ?
3. При дропе элемента он отрисовывается в т.ч. и за самом popup-ом
4. Двойной клик в popup-e не отрабатывается
5. Drag-and-drop не корректно работают с элементами tr. При перетаскивании элемент, который собрались таскать не исчезает. Исчезает как раз то что должно отображаться, виден только бордюр (в данном случае)
6. Как сбросить аттрибут, пробую HTMLayoutSetAttributeByName передавая null, пустую строку — не работает. Устанавливается лекго, а обнуляться не хочет.
Тестовый файл полностью
<html>
<head>
<style>
body
{
context-menu: selector(div#ctxMenu);
}
div.listHolder
{
width: 160px;
overflow-x: hidden;
overflow-y: auto;
vertical-scrollbar: vertical-scrollbar;
border-top: solid 1px #4D4D4D;
border-bottom: solid 1px #4D4D4D;
background-color: rgba(0, 0, 0, 0.8);
}
#layers_list
{
padding: 0px;
margin: 0px;
accept-drop: selector(div.layer);
}
div.layer
{
flow: horizontal;
behavior: button;
height: 25px;
color: white;
font-size: 10px;
border-bottom: solid 1px #4D4D4D;
draggable: only-move;
click!: $1(div.layer[selected]).selected = null,
self.selected = true;
}
div.layer[hidden]
{
color: gray;
}
div.layer[selected]
{
background-color: #5EB8D6;
assigned!: $1(div.layer[selected]).selected = null,
self.selected = true;
}
div.title
{
border: solid 1px;
vertical-align: middle;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
div.delete
{
width: 18px;
height: 18px;
behavior: button;
cursor: pointer;
padding: 0px;
margin: 0px;
margin-top: 2px;
background-image: url("../images/Layers/delete.png");
border: solid 1px;
}
input[type=checkbox]
{
width: 18px;
height: 18px;
padding: 0px;
margin: 0px;
margin-top: 4px;
padding-right: 6px;
assigned!: self.parent().parent().hidden = true;
}
input[type=checkbox]:checked
{
assigned!: parent = self.parent().parent(),
parent.hidden = null;
}
table.dragable
{
accept-drop: selector(tr);
}
table.dragable tr
{
border-bottom: solid 1px;
draggable: only-move;
}
</style>
</head>
<body>
<div id="ctxMenu" style="display: none;">
<div class='listHolder'>
<div id="layers_list">
<div class="layer" cmd="cmd_set_active_layer" selected>
<input type='checkbox' cmd="cmd_show_layer" checked/>
<div class='title'><span class='title'>new layer new layer new layer</span></div>
<div class="delete" cmd="cmd_delete_layer"/>
</div>
<div class="layer" cmd="cmd_set_active_layer" selected>
<input type='checkbox' cmd="cmd_show_layer" checked/>
<div class='title'><span class='title'>new layer new layer new layer</span></div>
<div class="delete" cmd="cmd_delete_layer"/>
</div>
<div class="layer" cmd="cmd_set_active_layer" selected>
<input type='checkbox' cmd="cmd_show_layer" checked/>
<div class='title'><span class='title'>new layer new layer new layer</span></div>
<div class="delete" cmd="cmd_delete_layer"/>
</div>
</div>
</div>
</div>
<table class="dragable">
<tr>
<td>1. Drag me!</td>
<tr>
<tr>
<td>2. Drag me!</td>
<tr>
<tr>
<td>3. Drag me!</td>
<tr>
</table>
</body>
</html>
Здравствуйте, RealRimas, Вы писали:
RR>Столкнулся со странным поведением некоторых элементов
RR>Небольшая поясняющая картинка и комментарии
RR>
RR>Сразу приведу кусок разметки
RR><div class="layer" cmd="cmd_set_active_layer" selected>
RR> <input type='checkbox' cmd="cmd_show_layer" checked/>
RR> <div class='title'><span class='title'>new layer new layer new layer</span></div>
RR> <div class="delete" cmd="cmd_delete_layer"/>
RR></div>
RR>1. div с текстом new layer "липнет" к правому краю. Все перепробовал, кто, или что его застявляет так отображаться — не нашел.
RR>2. Чтобы "дотянуться" в CSS из input-а до div.layer приходится использовать parent = self.parent().parent(); хотя по идее должен работать просто parent() ?
Ты используешь flow:horizontal который работает только с display:block|list-item элементами
Т.е. тебе нужно писать так:
<div .layer cmd="cmd_set_active_layer" selected>
<widget type='checkbox' cmd="cmd_show_layer" checked/>
<text .title>new layer new layer new layer</text>
<widget .delete cmd="cmd_delete_layer"/>
</div>
И соотв. стили:
text.title
{
border: solid 1px;
vertical-align: middle;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
widget.delete
{
width: 18px;
height: 18px;
behavior: button;
cursor: pointer;
padding: 0px;
margin: 0px;
margin-top: 2px;
background-image: url("../images/Layers/delete.png");
border: solid 1px;
}
widget[type=checkbox]
{
width: 18px;
height: 18px;
padding: 0px;
margin: 0px;
margin-top: 4px;
padding-right: 6px;
assigned!: self.parent().hidden = true;
}
widget[type=checkbox]:checked
{
assigned!: self.parent().hidden = null;
}
RR>3. При дропе элемента он отрисовывается в т.ч. и за самом popup-ом
RR>4. Двойной клик в popup-e не отрабатывается
Посмотрю.
RR>5. Drag-and-drop не корректно работают с элементами tr. При перетаскивании элемент, который собрались таскать не исчезает. Исчезает как раз то что должно отображаться, виден только бордюр (в данном случае)
Drag-and-drop в принципе не работает для TR элементов.
RR>6. Как сбросить аттрибут, пробую HTMLayoutSetAttributeByName передавая null, пустую строку — не работает. Устанавливается лекго, а обнуляться не хочет.
Должен работать. См. dom::element::remove_attribute().
RR>Тестовый файл полностью
(используй кнопку [code] внизу для кода — тяжело понять что есть что без форматирования)
Спасибо за подсказки и за развитие такой отличной библиотеки!
