FIX: optimize style of media file panel

Change-Id: I2e5319538adae84b9b0348874d7b468b0dbc2db1
This commit is contained in:
chunmao.guo 2022-09-26 18:14:17 +08:00 committed by Lane.Wei
parent b21b4aec95
commit 6dc68c4c9e
7 changed files with 64 additions and 28 deletions

View file

@ -1,11 +1,18 @@
<svg width="272" height="181" viewBox="0 0 272 181" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="148.5" cy="171" rx="54.5" ry="10" fill="#DEDEDE"/>
<path d="M118 62L196.5 34V112L118 140V62Z" fill="#C3C3C3"/>
<rect x="42" y="62.5" width="76" height="77" fill="#AEACAC"/>
<path d="M116 36.5L41 63H121.5L196.5 35L116 36.5Z" fill="#E4E4E4"/>
<path d="M84.4247 78.4554L33.1782 74.4793C30.2816 74.2546 28.1192 77.0953 29.1071 79.8275L57.0758 157.178C58.0147 159.775 61.24 160.662 63.3747 158.91L97.9325 130.555C97.9775 130.518 98.0185 130.486 98.0635 130.45C98.8161 129.836 106 123.505 106 105.5C106 88.3036 88.7977 80.118 85.5318 78.7188C85.18 78.5681 84.8063 78.485 84.4247 78.4554Z" fill="#8D8B8B"/>
<path d="M82.1864 103.688C90.8229 127.171 82.7743 151.036 65.1697 157.511C47.5652 163.986 25.9713 151.022 17.3347 127.539C8.69823 104.057 16.7468 80.191 34.3514 73.7163C51.9559 67.2416 73.5499 80.2054 82.1864 103.688Z" fill="#C4C4C4" stroke="#D8D8D8" stroke-width="3"/>
<ellipse cx="65.7356" cy="108.611" rx="14.2976" ry="18.3001" transform="rotate(-20.1927 65.7356 108.611)" fill="#AEACAC"/>
<path d="M222.098 14.75H221.848V15V17.5854V17.8354H222.098H236.77L220.803 38.4069L220.75 38.4746V38.5602V41V41.25H221H242H242.25V41V38.4146V38.1646H242H225.388L241.319 17.6294L241.372 17.5618V17.4762V15V14.75H241.122H222.098Z" fill="#B8B8B8" stroke="#B8B8B8" stroke-width="0.5"/>
<path d="M259.627 0.75H259.377V1V2.4916V2.7416H259.627H267.796L258.802 14.4401L258.75 14.5074V14.5924V16V16.25H259H271H271.25V16V14.5084V14.2584H271H261.723L270.696 2.5809L270.748 2.51353V2.42857V1V0.75H270.498H259.627Z" fill="#B8B8B8" stroke="#B8B8B8" stroke-width="0.5"/>
<svg width="240" height="160" viewBox="0 0 240 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_6645_29335)">
<ellipse cx="131.03" cy="150.882" rx="48.0882" ry="8.82353" fill="#DEDEDE"/>
<path d="M104.117 54.7059L173.382 30V98.8235L104.117 123.529V54.7059Z" fill="#C3C3C3"/>
<rect x="37.0586" y="55.1484" width="67.0588" height="67.9412" fill="#AEACAC"/>
<path d="M102.352 32.2063L36.1758 55.5887H107.205L173.382 30.8828L102.352 32.2063Z" fill="#E4E4E4"/>
<path d="M74.493 69.2261L29.2756 65.7179C26.7198 65.5196 24.8118 68.0261 25.6834 70.4368L50.3617 138.688C51.1902 140.979 54.036 141.761 55.9195 140.216L86.4118 115.197C86.4514 115.164 86.4876 115.136 86.5273 115.103C87.1914 114.562 93.5301 108.976 93.5301 93.089C93.5301 77.9158 78.3516 70.6931 75.4699 69.4586C75.1595 69.3256 74.8297 69.2522 74.493 69.2261Z" fill="#8D8B8B"/>
<path d="M72.5174 91.4895C80.1378 112.209 73.0361 133.267 57.5027 138.98C41.9693 144.693 22.9158 133.255 15.2954 112.535C7.67491 91.8149 14.7766 70.7569 30.3101 65.0439C45.8435 59.331 64.897 70.7696 72.5174 91.4895Z" fill="#C4C4C4" stroke="#D8D8D8" stroke-width="2.64706"/>
<ellipse cx="58.0016" cy="95.8333" rx="12.6155" ry="16.1471" transform="rotate(-20.1927 58.0016 95.8333)" fill="#AEACAC"/>
<path d="M195.968 13.0157H195.748V13.2363V15.5176V15.7382H195.968H208.915L194.826 33.8895L194.779 33.9492V34.0248V36.1775V36.3981H195H213.529H213.75V36.1775V33.8962V33.6756H213.529H198.872L212.929 15.5564L212.975 15.4967V15.4212V13.2363V13.0157H212.755H195.968Z" fill="#B8B8B8" stroke="#B8B8B8" stroke-width="0.441176"/>
<path d="M229.083 0.662224H228.862V0.882812V2.19893V2.41952H229.083H236.29L228.354 12.7417L228.309 12.8011V12.8761V14.1181V14.3387H228.529H239.118H239.338V14.1181V12.802V12.5814H239.118H230.932L238.85 2.27772L238.895 2.21828V2.14332V0.882812V0.662224H238.675H229.083Z" fill="#B8B8B8" stroke="#B8B8B8" stroke-width="0.441176"/>
</g>
<defs>
<clipPath id="clip0_6645_29335">
<rect width="240" height="159.706" fill="white"/>
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 2 KiB

Before After
Before After

View file

@ -1,11 +1,11 @@
<svg width="86" height="104" viewBox="0 0 86 104" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="32" y="52" width="22.6316" height="22.6316" fill="url(#paint0_linear_6645_29777)"/>
<path d="M43 18C51.5046 18 59.8182 20.5219 66.8895 25.2468C73.9608 29.9717 79.4723 36.6874 82.7268 44.5446C85.9814 52.4018 86.8329 61.0477 85.1738 69.3889C83.5146 77.7301 79.4193 85.3919 73.4056 91.4056C67.3919 97.4193 59.7301 101.515 51.3889 103.174C43.0477 104.833 34.4018 103.981 26.5446 100.727C18.6874 97.4723 11.9717 91.9608 7.24681 84.8895C2.52191 77.8182 -2.02833e-07 69.5046 0 61H6.50061C6.50061 68.2189 8.64126 75.2757 12.6519 81.278C16.6625 87.2803 22.3629 91.9585 29.0323 94.721C35.7017 97.4836 43.0405 98.2064 50.1207 96.7981C57.2009 95.3897 63.7044 91.9135 68.809 86.809C73.9135 81.7044 77.3897 75.2009 78.7981 68.1207C80.2064 61.0405 79.4836 53.7017 76.721 47.0323C73.9585 40.3629 69.2803 34.6625 63.278 30.6519C57.2757 26.6413 50.2189 24.5006 43 24.5006V18Z" fill="#D9D9D9"/>
<path d="M23.0587 23.5848C22.0187 22.7842 22.0187 21.2158 23.0587 20.4152L42.53 5.42619C43.8452 4.41379 45.75 5.35132 45.75 7.011L45.75 36.989C45.75 38.6487 43.8452 39.5862 42.53 38.5738L23.0587 23.5848Z" fill="#D9D9D9"/>
<svg width="240" height="160" viewBox="0 0 240 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="109" y="80.1484" width="22.6316" height="22.6316" fill="url(#paint0_linear_8097_31792)"/>
<path d="M120 46.1484C128.505 46.1484 136.818 48.6703 143.89 53.3952C150.961 58.1201 156.472 64.8358 159.727 72.6931C162.981 80.5503 163.833 89.1961 162.174 97.5373C160.515 105.879 156.419 113.54 150.406 119.554C144.392 125.568 136.73 129.663 128.389 131.322C120.048 132.981 111.402 132.13 103.545 128.875C95.6874 125.621 88.9717 120.109 84.2468 113.038C79.5219 105.967 77 97.653 77 89.1484H83.5006C83.5006 96.3673 85.6413 103.424 89.6519 109.426C93.6625 115.429 99.3629 120.107 106.032 122.869C112.702 125.632 120.04 126.355 127.121 124.947C134.201 123.538 140.704 120.062 145.809 114.957C150.913 109.853 154.39 103.349 155.798 96.2691C157.206 89.1889 156.484 81.8501 153.721 75.1807C150.958 68.5113 146.28 62.8109 140.278 58.8003C134.276 54.7897 127.219 52.649 120 52.649V46.1484Z" fill="#CCCCCC"/>
<path d="M100.059 51.7332C99.0187 50.9326 99.0187 49.3642 100.059 48.5636L119.53 33.5746C120.845 32.5622 122.75 33.4998 122.75 35.1594L122.75 65.1374C122.75 66.7971 120.845 67.7346 119.53 66.7222L100.059 51.7332Z" fill="#CCCCCC"/>
<defs>
<linearGradient id="paint0_linear_6645_29777" x1="43.3158" y1="52" x2="43.3158" y2="74.6316" gradientUnits="userSpaceOnUse">
<stop stop-color="#D9D9D9"/>
<stop offset="1" stop-color="#E8E8E8"/>
<linearGradient id="paint0_linear_8097_31792" x1="120.316" y1="80.1484" x2="120.316" y2="102.78" gradientUnits="userSpaceOnUse">
<stop stop-color="#CDCDCD"/>
<stop offset="1" stop-color="#BCBCBC"/>
</linearGradient>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

Before After
Before After

View file

@ -187,6 +187,9 @@ void ImageGrid::UpdateLayout()
{
if (!m_file_sys) return;
wxSize size = GetClientSize();
wxSize mask_size{0, 60 * em_unit(this) / 10};
if (m_file_sys->GetGroupMode() == PrinterFileSystem::G_NONE)
mask_size.y = 20 * em_unit(this) / 10;
int cell_width = m_cell_size.GetWidth();
int cell_height = m_cell_size.GetHeight();
int ncol = (size.GetWidth() - cell_width + m_image_size.GetWidth()) / cell_width;
@ -199,7 +202,6 @@ void ImageGrid::UpdateLayout()
if (m_row_offset >= m_row_count)
m_row_offset = m_row_count == 0 ? 0 : m_row_count - 1;
// create mask
wxSize mask_size{0, 60 * em_unit(this) / 10};
if (m_file_sys->GetGroupMode() == PrinterFileSystem::G_NONE) {
mask_size.x = (m_col_count - 1) * m_cell_size.GetWidth() + m_image_size.GetWidth();
}
@ -370,6 +372,8 @@ size_t Slic3r::GUI::ImageGrid::firstItem(wxSize const &size, wxPoint &off)
int index = (m_row_offset + 1 < m_row_count || m_row_count == 0) ?
m_row_offset / 4 * m_col_count :
((m_file_sys->GetCount() + m_col_count - 1) / m_col_count - (size.y + m_image_size.GetHeight() - 1) / m_cell_size.GetHeight()) * m_col_count;
if (m_file_sys->GetGroupMode() == PrinterFileSystem::G_NONE)
offy += m_mask.GetHeight();
off = wxPoint{offx, offy};
return index;
}
@ -523,12 +527,15 @@ void ImageGrid::render(wxDC& dc)
}
// Draw floating date range for non-group list
if (m_file_sys->GetGroupMode() == PrinterFileSystem::G_NONE && m_file_sys->GetCount() > 0) {
dc.DrawBitmap(m_mask, {off.x, 0});
//dc.DrawBitmap(m_mask, {off.x, 0});
dc.DrawRectangle({off.x, 0}, m_mask.GetSize());
auto & file1 = m_file_sys->GetFile(start);
auto & file2 = m_file_sys->GetFile(end - 1);
auto date1 = wxDateTime((time_t) file1.time).Format(_L(formats[m_file_sys->GetGroupMode()]));
auto date2 = wxDateTime((time_t) file2.time).Format(_L(formats[m_file_sys->GetGroupMode()]));
dc.DrawText(date1 + " - " + date2, wxPoint{off.x + 24, 16});
dc.SetFont(Label::Head_16);
dc.SetTextForeground(wxColor("#262E30"));
dc.DrawText(date1 + " - " + date2, wxPoint{off.x, 2});
}
// Draw bottom background
if (off.y < size.y)

View file

@ -31,6 +31,9 @@ MediaFilePanel::MediaFilePanel(wxWindow * parent)
m_button_year = new ::Button(m_time_panel, _L("Year"), "", wxBORDER_NONE);
m_button_month = new ::Button(m_time_panel, _L("Month"), "", wxBORDER_NONE);
m_button_all = new ::Button(m_time_panel, _L("All Files"), "", wxBORDER_NONE);
m_button_year->SetToolTip(L("Group files by year, recent first."));
m_button_month->SetToolTip(L("Group files by month, recent first."));
m_button_all->SetToolTip(L("Show all files, recent first."));
m_button_all->SetFont(Label::Head_14); // sync with m_last_mode
for (auto b : {m_button_year, m_button_month, m_button_all}) {
b->SetBackgroundColor(StateColor());
@ -49,14 +52,22 @@ MediaFilePanel::MediaFilePanel(wxWindow * parent)
top_sizer->Add(m_time_panel, 1, wxEXPAND);
// File type
StateColor background(
std::make_pair(0xEEEEEE, (int) StateColor::Checked),
std::make_pair(*wxLIGHT_GREY, (int) StateColor::Hovered),
std::make_pair(*wxWHITE, (int) StateColor::Normal));
m_type_panel = new ::StaticBox(this, wxID_ANY, wxDefaultPosition, wxDefaultSize, wxBORDER_NONE);
m_type_panel->SetBackgroundColor(*wxWHITE);
m_type_panel->SetCornerRadius(FromDIP(5));
m_type_panel->SetMinSize({-1, 48 * em_unit(this) / 10});
m_button_timelapse = new ::Button(m_type_panel, _L("Timelapse"), "", wxBORDER_NONE);
m_button_timelapse->SetCanFocus(false);
m_button_timelapse->SetToolTip(L("Switch to timelapse files."));
m_button_video = new ::Button(m_type_panel, _L("Video"), "", wxBORDER_NONE);
m_button_video->SetCanFocus(false);
m_button_video->SetToolTip(L("Switch to video files."));
for (auto b : {m_button_timelapse, m_button_video} ) {
b->SetBackgroundColor(background);
b->SetCanFocus(false);
}
wxBoxSizer *type_sizer = new wxBoxSizer(wxHORIZONTAL);
type_sizer->Add(m_button_timelapse, 0, wxALIGN_CENTER_VERTICAL | wxLEFT | wxRIGHT, 24);
@ -68,13 +79,22 @@ MediaFilePanel::MediaFilePanel(wxWindow * parent)
m_manage_panel = new ::StaticBox(this, wxID_ANY, wxDefaultPosition, wxDefaultSize, wxBORDER_NONE);
m_manage_panel->SetBackgroundColor(StateColor());
m_button_delete = new ::Button(m_manage_panel, _L("Delete"));
m_button_delete->SetBackgroundColor(StateColor());
m_button_delete->SetCanFocus(false);
m_button_delete->SetToolTip(L("Delete selected files from printer."));
m_button_download = new ::Button(m_manage_panel, _L("Download"));
m_button_download->SetBackgroundColor(StateColor());
m_button_download->SetCanFocus(false);
m_button_download->SetToolTip(L("Download selected files from printer."));
m_button_management = new ::Button(m_manage_panel, _L("Management"));
m_button_management->SetBackgroundColor(StateColor());
m_button_management->SetToolTip(L("Batch manage files."));
for (auto b : {m_button_delete, m_button_download, m_button_management}) {
b->SetBackgroundColor(StateColor());
b->SetFont(Label::Body_12);
b->SetCornerRadius(12);
b->SetPaddingSize({10, 6});
b->SetCanFocus(false);
}
m_button_delete->SetBorderColor(wxColor("#FF6F00"));
m_button_delete->SetTextColor(wxColor("#FF6F00"));
m_button_management->SetBorderWidth(0);
m_button_management->SetBackgroundColor(wxColor("#00AE42"));
wxBoxSizer *manage_sizer = new wxBoxSizer(wxHORIZONTAL);
manage_sizer->AddStretchSpacer(1);

View file

@ -490,6 +490,8 @@ size_t PrinterFileSystem::FindFile(size_t index, std::string const &name)
void PrinterFileSystem::FileRemoved(size_t index, std::string const &name)
{
index = FindFile(index, name);
if (index == size_t(-1))
return;
auto removeFromGroup = [](std::vector<size_t> &group, size_t index, int total) {
for (auto iter = group.begin(); iter != group.end(); ++iter) {
size_t index2 = -1;

View file

@ -27,9 +27,9 @@ Button::Button()
{
background_color = StateColor(
std::make_pair(0xF0F0F0, (int) StateColor::Disabled),
std::make_pair(0x37EE7C, (int) StateColor::Hovered | StateColor::Checked),
std::make_pair(0x00AE42, (int) StateColor::Checked),
std::make_pair(*wxLIGHT_GREY, (int) StateColor::Hovered),
std::make_pair(0x37EE7C, (int) StateColor::Hovered | StateColor::Checked),
std::make_pair(*wxWHITE, (int) StateColor::Normal));
}