tyiu/notedeck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move columns ui

Browse Source 
Signed-off-by: kernelkind <kernelkind@gmail.com>
This commit is contained in:
kernelkind
2025-01-09 12:42:37 -05:00
parent 6647e7dc3f
commit 1d6da3ba0d
3 changed files with 228 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/icons/move_column_4x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
crates/notedeck_columns/src/nav.rs
View File

@@ -447,6 +447,7 @@ pub fn render_nav(
get_active_columns_mut(ctx.accounts, &mut app.decks_cache),
ctx.accounts.get_selected_account().map(|a| &a.pubkey),
nav.routes(),
col,
)
.show(ui),
NavUiType::Body => render_nav_body(ui, app, ctx, nav.routes().last().expect("top"), col),

238
crates/notedeck_columns/src/ui/column/header.rs
View File

@@ -1,4 +1,5 @@
use crate::{
colors,
column::Columns,
nav::RenderNavAction,
route::Route,
@@ -9,7 +10,7 @@ use crate::{
},
};
use egui::{RichText, Stroke, UiBuilder};
use egui::{Margin, RichText, Stroke, UiBuilder};
use enostr::Pubkey;
use nostrdb::{Ndb, Transaction};
use notedeck::{ImageCache, NotedeckTextStyle};
@@ -20,6 +21,7 @@ pub struct NavTitle<'a> {
columns: &'a Columns,
deck_author: Option<&'a Pubkey>,
routes: &'a [Route],
col_id: usize,
}
impl<'a> NavTitle<'a> {
@@ -29,6 +31,7 @@ impl<'a> NavTitle<'a> {
columns: &'a Columns,
deck_author: Option<&'a Pubkey>,
routes: &'a [Route],
col_id: usize,
) -> Self {
NavTitle {
ndb,
@@ -36,6 +39,7 @@ impl<'a> NavTitle<'a> {
columns,
deck_author,
routes,
col_id,
}
}
@@ -77,10 +81,19 @@ impl<'a> NavTitle<'a> {
ui.add_space(chev_x + item_spacing);
}
let remove_column = self.title(ui, self.routes.last().unwrap(), back_button_resp.is_some());
let title_resp = self.title(ui, self.routes.last().unwrap(), back_button_resp.is_some());
if remove_column {
Some(RenderNavAction::RemoveColumn)
if let Some(resp) = title_resp {
match resp {
TitleResponse::RemoveColumn => Some(RenderNavAction::RemoveColumn),
TitleResponse::MoveColumn(to_index) => {
let from = self.col_id;
None // TODO:
// Some(RenderNavAction::SwitchingAction(SwitchingAction::Columns(
// ColumnsAction::Switch(from, to_index),
// )))
}
}
} else if back_button_resp.map_or(false, |r| r.clicked()) {
Some(RenderNavAction::Back)
} else {
@@ -157,6 +170,25 @@ impl<'a> NavTitle<'a> {
animation_resp
}
fn move_column_button(&self, ui: &mut egui::Ui, icon_width: f32) -> egui::Response {
let img_size = 16.0;
let max_size = icon_width * ICON_EXPANSION_MULTIPLE;
let img_data = egui::include_image!("../../../../../assets/icons/move_column_4x.png");
let img = egui::Image::new(img_data).max_width(img_size);
let helper = AnimationHelper::new(ui, "move-column-button", egui::vec2(max_size, max_size));
let cur_img_size = helper.scale_1d_pos_min_max(0.0, img_size);
let animation_rect = helper.get_animation_rect();
let animation_resp = helper.take_animation_response();
img.paint_at(ui, animation_rect.shrink((max_size - cur_img_size) / 2.0));
animation_resp
}
fn delete_button_section(&self, ui: &mut egui::Ui) -> bool {
let id = ui.id().with("title");
@@ -186,6 +218,174 @@ impl<'a> NavTitle<'a> {
}
}
// returns the column index to switch to, if any
fn move_button_section(&mut self, ui: &mut egui::Ui) -> Option<usize> {
let cur_id = ui.id().with("move");
let move_resp = self.move_column_button(ui, 32.0);
if move_resp.clicked() {
ui.data_mut(|d| d.insert_temp(cur_id, true));
}
ui.data(|d| d.get_temp(cur_id)).and_then(|val| {
if val {
let resp = self.add_move_tooltip(cur_id, &move_resp);
if move_resp.clicked_elsewhere() || resp.is_some() {
ui.data_mut(|d| d.remove_temp::<bool>(cur_id));
}
resp
} else {
None
}
})
}
fn move_tooltip_col_presentation(&mut self, ui: &mut egui::Ui, col: usize) -> egui::Response {
ui.horizontal(|ui| {
self.title_presentation(ui, self.columns.column(col).router().top(), 32.0);
})
.response
}
fn add_move_tooltip(&mut self, id: egui::Id, move_resp: &egui::Response) -> Option<usize> {
let mut inner_resp = None;
move_resp.show_tooltip_ui(|ui| {
let x_range = ui.available_rect_before_wrap().x_range();
let is_dragging = egui::DragAndDrop::payload::<usize>(ui.ctx()).is_some(); // must be outside ui.dnd_drop_zone to capture properly
let (_, _) = ui.dnd_drop_zone::<usize, ()>(
egui::Frame::none()
.inner_margin(Margin::same(8.0))
.rounding(egui::Rounding::same(8.0)),
|ui| {
let distances: Vec<(egui::Response, f32)> =
self.collect_column_distances(ui, id);
if let Some((closest_index, closest_resp, distance)) =
self.find_closest_column(&distances)
{
if is_dragging && closest_index != self.col_id {
if self.should_draw_hint(closest_index, distance) {
ui.painter().hline(
x_range,
self.calculate_hint_y(
&distances,
closest_resp,
closest_index,
distance,
),
egui::Stroke::new(1.0, ui.visuals().text_color()),
);
}
if ui.input(|i| i.pointer.any_released()) {
inner_resp =
Some(self.calculate_new_index(closest_index, distance));
}
}
}
},
);
});
inner_resp
}
fn collect_column_distances(
&mut self,
ui: &mut egui::Ui,
id: egui::Id,
) -> Vec<(egui::Response, f32)> {
let y_margin = 4.0;
let item_frame = egui::Frame::none()
.rounding(egui::Rounding::same(8.0))
.inner_margin(Margin::symmetric(8.0, y_margin));
(0..self.columns.num_columns())
.filter_map(|col| {
let item_id = id.with(col);
let col_resp = if col == self.col_id {
ui.dnd_drag_source(item_id, col, |ui| {
item_frame
.stroke(egui::Stroke::new(2.0, colors::PINK))
.fill(ui.visuals().panel_fill)
.show(ui, |ui| self.move_tooltip_col_presentation(ui, col));
})
.response
} else {
item_frame
.show(ui, |ui| {
self.move_tooltip_col_presentation(ui, col)
.on_hover_cursor(egui::CursorIcon::NotAllowed)
})
.response
};
ui.input(|i| i.pointer.interact_pos()).map(|pointer| {
let distance = pointer.y - col_resp.rect.center().y;
(col_resp, distance)
})
})
.collect()
}
fn find_closest_column(
&'a self,
distances: &'a [(egui::Response, f32)],
) -> Option<(usize, &'a egui::Response, f32)> {
distances
.iter()
.enumerate()
.min_by(|(_, (_, dist1)), (_, (_, dist2))| {
dist1.abs().partial_cmp(&dist2.abs()).unwrap()
})
.filter(|(index, (_, distance))| {
(index + 1 != self.col_id && *distance > 0.0)
|| (index.saturating_sub(1) != self.col_id && *distance < 0.0)
})
.map(|(index, (resp, dist))| (index, resp, *dist))
}
fn should_draw_hint(&self, closest_index: usize, distance: f32) -> bool {
let is_above = distance < 0.0;
(is_above && closest_index.saturating_sub(1) != self.col_id)
|| (!is_above && closest_index + 1 != self.col_id)
}
fn calculate_new_index(&self, closest_index: usize, distance: f32) -> usize {
let moving_up = self.col_id > closest_index;
match (distance < 0.0, moving_up) {
(true, true) | (false, false) => closest_index,
(true, false) => closest_index.saturating_sub(1),
(false, true) => closest_index + 1,
}
}
fn calculate_hint_y(
&self,
distances: &[(egui::Response, f32)],
closest_resp: &egui::Response,
closest_index: usize,
distance: f32,
) -> f32 {
let y_margin = 4.0;
let offset = if distance < 0.0 {
distances
.get(closest_index.wrapping_sub(1))
.map(|(above_resp, _)| (closest_resp.rect.top() - above_resp.rect.bottom()) / 2.0)
.unwrap_or(y_margin)
} else {
distances
.get(closest_index + 1)
.map(|(below_resp, _)| (below_resp.rect.top() - closest_resp.rect.bottom()) / 2.0)
.unwrap_or(y_margin)
};
if distance < 0.0 {
closest_resp.rect.top() - offset
} else {
closest_resp.rect.bottom() + offset
}
}
fn pubkey_pfp<'txn, 'me>(
&'me mut self,
txn: &'txn Transaction,
@@ -294,23 +494,39 @@ impl<'a> NavTitle<'a> {
};
}
fn title(&mut self, ui: &mut egui::Ui, top: &Route, navigating: bool) -> bool {
fn title(&mut self, ui: &mut egui::Ui, top: &Route, navigating: bool) -> Option<TitleResponse> {
if !navigating {
self.title_pfp(ui, top, 32.0);
self.title_label(ui, top);
self.title_presentation(ui, top, 32.0);
}
ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
if navigating {
self.title_label(ui, top);
self.title_pfp(ui, top, 32.0);
false
self.title_presentation(ui, top, 32.0);
None
} else {
self.delete_button_section(ui)
let remove_col = self.delete_button_section(ui);
let move_col = self.move_button_section(ui);
if let Some(col) = move_col {
Some(TitleResponse::MoveColumn(col))
} else if remove_col {
Some(TitleResponse::RemoveColumn)
} else {
None
}
}
})
.inner
}
fn title_presentation(&mut self, ui: &mut egui::Ui, top: &Route, pfp_size: f32) {
self.title_pfp(ui, top, pfp_size);
self.title_label(ui, top);
}
}
enum TitleResponse {
RemoveColumn,
MoveColumn(usize),
}
fn prev<R>(xs: &[R]) -> Option<&R> {