css: Have `move-handle` for every movable row instance.

The original motivation was to remove the `+ i` instances because of
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1934360.
But it seemed better to have similar html structure and css across all
movable rows.
This commit is contained in:
Shubham Padia 2024-09-03 10:15:25 +00:00 committed by Tim Abbott
parent 77ebdfac77
commit 28d9c02479
3 changed files with 10 additions and 24 deletions

View File

@ -776,37 +776,19 @@ input[type="checkbox"] {
.admin_profile_fields_table,
.edit_profile_field_choices_container,
.profile_field_choices_table {
.movable-row {
cursor: move;
.fa-ellipsis-v {
color: hsl(0deg 0% 75%);
position: relative;
top: 1px;
+ i {
margin-right: 5px;
}
}
}
}
.profile_field_choices_table,
.admin_linkifiers_table {
.movable-row {
.move-handle {
cursor: move;
user-select: none;
margin-right: 5px;
}
.fa-ellipsis-v {
color: hsl(0deg 0% 75%);
position: relative;
top: 1px;
+ i {
margin-right: 5px;
}
}
}
}

View File

@ -2,8 +2,10 @@
<tr class="profile-field-row movable-row" data-profile-field-id="{{id}}">
<td class="profile_field_name">
{{#if ../can_modify}}
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
<span class="move-handle">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</span>
{{/if}}
<span class="profile_field_name">{{name}}</span>
</td>

View File

@ -1,6 +1,8 @@
<div class='choice-row movable-row' data-value="{{value}}">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
<span class="move-handle">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</span>
<input type='text' class="modal_text_input" placeholder='{{t "New option" }}' value="{{ text }}" />
<button type='button' class="button rounded small delete-choice tippy-zulip-tooltip {{#if new_empty_choice_row}} hide {{/if}}" data-tippy-content="{{t 'Delete' }}">