Skip to content

Commit a037fd0

Browse files
committed
[UPD] : update of Readme (copy from master)
1 parent c760812 commit a037fd0

1 file changed

Lines changed: 73 additions & 13 deletions

File tree

README.md

Lines changed: 73 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ included in the Lib_Only branch for your convenience.
5353
- Can create a custom pane with any widgets via function binding
5454
- This pane can block the validation of the dialog
5555
- Can also display different things according to current filter and UserDatas
56-
- Custom coloring / icons / text per file extension
56+
- Advanced file style for file/dir/link coloring / icons / font
5757
- Multi-selection (ctrl/shift + click) :
5858
- 0 => Infinite
5959
- 1 => One file (default)
@@ -195,15 +195,24 @@ void drawGui()
195195
196196
![alt text](https://github.com/aiekick/ImGuiFileDialog/blob/master/doc/doc/dlg_with_pane.gif)
197197
198-
## Custom icons and colors by extension
198+
## File Style : Custom icons and colors by extension
199199
200-
You can define a color for a filter type
200+
You can define style for files/dirs/links in many ways :
201201
202+
the style can be colors, icons and fonts
203+
204+
the general form is :
202205
```cpp
203-
ImGuiFileDialog::Instance()->SetExtentionInfos(".cpp", ImVec4(1,1,0, 0.9));
204-
ImGuiFileDialog::Instance()->SetExtentionInfos(".h", ImVec4(0,1,0, 0.9));
205-
ImGuiFileDialog::Instance()->SetExtentionInfos(".hpp", ImVec4(0,0,1, 0.9));
206-
ImGuiFileDialog::Instance()->SetExtentionInfos(".md", ImVec4(1,0,1, 0.9));
206+
ImGuiFileDialog::Instance()->SetFileStyle(styleType, criteria, color, icon, font);
207+
208+
styleType can be thoses :
209+
210+
IGFD_FileStyleByTypeFile // define style for all files
211+
IGFD_FileStyleByTypeDir // define style for all dir
212+
IGFD_FileStyleByTypeLink // define style for all link
213+
IGFD_FileStyleByExtention // define style by extention, for files or links
214+
IGFD_FileStyleByFullName // define style for particular file/dir/link full name (filename + extention)
215+
IGFD_FileStyleByContainedInFullName // define style for file/dir/link when criteria is contained in full name
207216
```
208217

209218
![alt text](https://github.com/aiekick/ImGuiFileDialog/blob/master/doc/color_filter.png)
@@ -216,12 +225,54 @@ custom icon sets for use with Dear ImGui.
216225
It is inspired by [IconFontCppHeaders](https://github.com/juliettef/IconFontCppHeaders), which can also be used with
217226
ImGuiFileDialog.
218227

228+
samples :
229+
219230
```cpp
220-
// Add an icon for .png files
221-
ImGuiFileDialog::Instance()->SetExtentionInfos(".png", ImVec4(0, 1, 1, 0.9), ICON_IMFDLG_FILE_TYPE_PIC);
231+
// define style by file extention and Add an icon for .png files
232+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByExtention, ".png", ImVec4(0.0f, 1.0f, 1.0f, 0.9f), ICON_IGFD_FILE_PIC, font1);
233+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByExtention, ".gif", ImVec4(0.0f, 1.0f, 0.5f, 0.9f), "[GIF]");
234+
235+
// define style for all directories
236+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByTypeDir, "", ImVec4(0.5f, 1.0f, 0.9f, 0.9f), ICON_IGFD_FOLDER);
237+
// can be for a specific directory
238+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByTypeDir, ".git", ImVec4(0.5f, 1.0f, 0.9f, 0.9f), ICON_IGFD_FOLDER);
239+
240+
// define style for all files
241+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByTypeFile, "", ImVec4(0.5f, 1.0f, 0.9f, 0.9f), ICON_IGFD_FILE);
242+
// can be for a specific file
243+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByTypeFile, ".git", ImVec4(0.5f, 1.0f, 0.9f, 0.9f), ICON_IGFD_FILE);
244+
245+
// define style for all links
246+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByTypeLink, "", ImVec4(0.5f, 1.0f, 0.9f, 0.9f));
247+
// can be for a specific link
248+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByTypeLink, "Readme.md", ImVec4(0.5f, 1.0f, 0.9f, 0.9f));
249+
250+
// define style for any files/dirs/links by fullname
251+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByFullName, "doc", ImVec4(0.9f, 0.2f, 0.0f, 0.9f), ICON_IGFD_FILE_PIC);
252+
253+
// define style by file who are containing this string
254+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByContainedInFullName, ".git", ImVec4(0.9f, 0.2f, 0.0f, 0.9f), ICON_IGFD_BOOKMARK);
255+
256+
all of theses can be miwed with IGFD_FileStyleByTypeDir / IGFD_FileStyleByTypeFile / IGFD_FileStyleByTypeLink
257+
like theses by ex :
258+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByTypeDir | IGFD_FileStyleByContainedInFullName, ".git", ImVec4(0.9f, 0.2f, 0.0f, 0.9f), ICON_IGFD_BOOKMARK);
259+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByTypeFile | IGFD_FileStyleByFullName, "cmake", ImVec4(0.5f, 0.8f, 0.5f, 0.9f), ICON_IGFD_SAVE);
260+
```
261+
262+
this sample code of [master/main.cpp](https://github.com/aiekick/ImGuiFileDialog/blob/master/main.cpp) produce the picture above :
222263
223-
// Add custom text for .gif files (the default value is [File]
224-
ImGuiFileDialog::Instance()->SetExtentionInfos(".gif", ImVec4(0, 1, 0.5, 0.9), "[GIF]");
264+
```cpp
265+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByExtention, ".cpp", ImVec4(1.0f, 1.0f, 0.0f, 0.9f));
266+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByExtention, ".h", ImVec4(0.0f, 1.0f, 0.0f, 0.9f));
267+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByExtention, ".hpp", ImVec4(0.0f, 0.0f, 1.0f, 0.9f));
268+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByExtention, ".md", ImVec4(1.0f, 0.0f, 1.0f, 0.9f));
269+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByExtention, ".png", ImVec4(0.0f, 1.0f, 1.0f, 0.9f), ICON_IGFD_FILE_PIC); // add an icon for the filter type
270+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByExtention, ".gif", ImVec4(0.0f, 1.0f, 0.5f, 0.9f), "[GIF]"); // add an text for a filter type
271+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByTypeDir, nullptr, ImVec4(0.5f, 1.0f, 0.9f, 0.9f), ICON_IGFD_FOLDER); // for all dirs
272+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByTypeFile, "CMakeLists.txt", ImVec4(0.1f, 0.5f, 0.5f, 0.9f), ICON_IGFD_ADD);
273+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByFullName, "doc", ImVec4(0.9f, 0.2f, 0.0f, 0.9f), ICON_IGFD_FILE_PIC);
274+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByTypeDir | IGFD_FileStyleByContainedInFullName, ".git", ImVec4(0.9f, 0.2f, 0.0f, 0.9f), ICON_IGFD_BOOKMARK);
275+
ImGuiFileDialog::Instance()->SetFileStyle(IGFD_FileStyleByTypeFile | IGFD_FileStyleByContainedInFullName, ".git", ImVec4(0.5f, 0.8f, 0.5f, 0.9f), ICON_IGFD_SAVE);
225276
```
226277

227278
![alt text](https://github.com/aiekick/ImGuiFileDialog/blob/master/doc/filter_Icon.png)
@@ -420,8 +471,17 @@ You can now, display thumbnails of pictures.
420471

421472
![thumbnails.gif](https://github.com/aiekick/ImGuiFileDialog/blob/master/doc/thumbnails.gif)
422473

423-
The file resize use stb/image so the following files extentions are supported :
424-
(.png, .bmp, .tga, .jpg, .jpeg, .gif, .psd, .pic, .ppm, .pgm)
474+
The file resize use stb/image so the following files extentions are supported :
475+
* .png (tested sucessfully)
476+
* .bmp (tested sucessfully)
477+
* .tga (tested sucessfully)
478+
* .jpg (tested sucessfully)
479+
* .jpeg (tested sucessfully)
480+
* .gif (tested sucessfully_ but not animation just first frame)
481+
* .psd (not tested)
482+
* .pic (not tested)
483+
* .ppm (not tested)
484+
* .pgm (not tested)
425485

426486
Corresponding to your backend (ex : OpenGl) you need to define two callbacks :
427487
* the first is a callback who will be called by ImGuiFileDialog for create the backend texture

0 commit comments

Comments
 (0)