Skip to content

Commit 4d21da9

Browse files
tftf
authored
Merge pull request #2502 from tf/reuse-improvements
Improve file reuse dialogue
2 parents 112d602 + 37ae798 commit 4d21da9

65 files changed

Lines changed: 3332 additions & 704 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎app/assets/stylesheets/pageflow/editor/base.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,8 @@
7676
@import "./folder_breadcrumb";
7777
@import "./file_folders";
7878
@import "./list_search_field";
79+
@import "./explorer_file_details";
80+
@import "./file_details";
7981
@import "./file_meta_data";
8082
@import "./file_meta_data_overlay";
8183
@import "./file_references";

‎app/assets/stylesheets/pageflow/editor/explorer_file_details.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.explorer_file_details {
2+
&-name {
3+
margin: 0 0 space(4) 0;
4+
font-size: inherit;
5+
font-weight: 500;
6+
overflow-wrap: anywhere;
7+
}
8+
}

‎app/assets/stylesheets/pageflow/editor/file_details.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.file_details {
2+
&-preview {
3+
display: block;
4+
margin-bottom: space(2);
5+
border-radius: rounded();
6+
overflow: hidden;
7+
background-color: var(--ui-on-surface-color-lightest);
8+
}
9+
}

‎app/assets/stylesheets/pageflow/editor/file_meta_data_overlay.scss‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,6 @@
2222
padding: space(2);
2323
}
2424

25-
&-preview {
26-
display: block;
27-
margin-bottom: space(2);
28-
border-radius: rounded();
29-
overflow: hidden;
30-
background-color: var(--ui-on-surface-color-lightest);
31-
}
32-
3325
// Rotating a square leaves the two edges facing the thumbnail
3426
// visible, so the arrow continues the border of the overlay.
3527
&-arrow {

‎app/assets/stylesheets/pageflow/editor/files_explorer.scss‎

Lines changed: 147 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,39 @@
1010
list-style: none;
1111
}
1212

13+
&.dialog .panels {
14+
display: grid;
15+
grid-template-columns: 20% minmax(space(40), 1fr) minmax(0, space(64));
16+
grid-template-rows: auto auto minmax(0, 1fr);
17+
}
18+
19+
.files_panel,
20+
.explorer_files {
21+
display: contents;
22+
}
23+
1324
.entries_panel,
14-
.files_panel {
15-
overflow: auto;
25+
.files_panel > .files_gallery,
26+
.explorer_files-gallery,
27+
.file_details_panel {
28+
border: solid 1px var(--ui-on-surface-color-lighter);
29+
border-radius: rounded(md);
30+
overflow: clip;
1631
}
1732

1833
.entries_panel {
19-
width: 20%;
20-
padding: 0 space(1) 0 space(1);
21-
margin: 0 space(1) 0 space(-1);
34+
grid-column: 1;
35+
grid-row: 1 / -1;
36+
margin-right: space(4);
37+
display: flex;
38+
flex-direction: column;
39+
min-height: 0;
40+
41+
&-list {
42+
flex: 1;
43+
min-height: 0;
44+
overflow: auto;
45+
}
2246

2347
li.blank_slate {
2448
text-align: center;
@@ -27,20 +51,128 @@
2751
}
2852
}
2953

30-
.files_panel {
31-
flex: 1;
32-
border-left: solid 1px var(--ui-on-surface-color-lighter);
33-
padding-left: space(4);
54+
.explorer_files > * {
55+
grid-column: 2;
56+
}
57+
58+
.files_panel > .files_gallery,
59+
.explorer_files-gallery {
60+
grid-column: 2;
61+
grid-row: -2 / -1;
62+
min-height: 0;
63+
border-right: 0;
64+
border-top-right-radius: 0;
65+
border-bottom-right-radius: 0;
66+
}
67+
68+
.files_panel .files_gallery {
69+
align-content: start;
70+
margin: 0;
71+
padding: space(2);
72+
}
73+
74+
.explorer_files-gallery {
75+
display: flex;
76+
flex-direction: column;
77+
78+
.files_gallery {
79+
flex: 1;
80+
min-height: 0;
81+
overflow: auto;
82+
}
83+
}
84+
85+
.explorer_files-end_marking {
86+
@include cancel-icon;
87+
88+
flex: none;
89+
width: space(6);
90+
padding: space(1) 0;
91+
border: none;
92+
border-radius: rounded();
93+
background-color: transparent;
94+
color: var(--ui-primary-color-light);
95+
line-height: 16px;
96+
cursor: pointer;
97+
98+
&:hover {
99+
background-color: var(--ui-on-surface-color-lightest);
100+
color: var(--ui-primary-color);
101+
}
102+
}
103+
104+
.explorer_files {
105+
&-toolbar {
106+
grid-column: 2 / 4;
107+
display: grid;
108+
109+
> * {
110+
grid-area: 1 / 1;
111+
}
112+
113+
> [hidden] {
114+
display: flex;
115+
visibility: hidden;
116+
}
117+
}
118+
119+
&-marking_bar {
120+
display: flex;
121+
align-items: center;
122+
gap: space(2);
123+
margin-bottom: space(2);
124+
padding: space(1) space(2);
125+
border-radius: rounded();
126+
background-color: var(--ui-selection-color-lighter);
127+
}
128+
129+
&-marking_bar_text {
130+
flex: 1;
131+
}
132+
133+
&-filter_bar {
134+
display: flex;
135+
align-items: center;
136+
gap: space(4);
137+
}
34138

35-
.tabs_view {
36-
height: 100%;
37-
position: relative;
139+
&-pills {
140+
flex: 1;
141+
min-width: 0;
38142

39-
.tabs_view-container {
40-
@include position(absolute, 37px 0 0 0);
41-
height: auto;
143+
.file_type_pills-group {
144+
padding-top: 0;
42145
}
43146
}
147+
148+
&-search {
149+
flex: 1 1 space(40);
150+
min-width: space(24);
151+
max-width: 30%;
152+
153+
.list_search_field {
154+
margin-top: 0;
155+
}
156+
157+
.list_search_field-placeholder {
158+
right: space(2);
159+
overflow: hidden;
160+
white-space: nowrap;
161+
text-overflow: ellipsis;
162+
}
163+
}
164+
}
165+
166+
.file_details_panel {
167+
grid-column: 3;
168+
grid-row: -2 / -1;
169+
min-height: 0;
170+
padding: space(4);
171+
border-left-color: var(--ui-on-surface-color-lightest);
172+
border-top-left-radius: 0;
173+
border-bottom-left-radius: 0;
174+
background-color: #{mix(#06202a, #fff, 3%)};
175+
overflow: auto;
44176
}
45177

46178
.close {

‎app/assets/stylesheets/pageflow/editor/files_gallery.scss‎

Lines changed: 80 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
ul.files_gallery {
2+
display: grid;
3+
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
4+
grid-auto-rows: max-content;
5+
gap: 2px;
26
margin-top: 10px;
37

48
> li {
5-
margin-bottom: 2px;
69
position: relative;
710
overflow: hidden;
8-
float: left;
911
text-align: center;
1012
padding: space(2);
11-
width: 120px;
1213
cursor: pointer;
1314
border: solid 3px transparent;
1415
border-radius: rounded();
@@ -18,10 +19,13 @@ ul.files_gallery {
1819
}
1920

2021
&.active {
21-
background-color: var(--ui-selection-color-lighter);
2222
border: solid 3px var(--ui-selection-color);
2323
}
2424

25+
&.active:not(.marking) {
26+
background-color: var(--ui-selection-color-lighter);
27+
}
28+
2529
&.disabled {
2630
background-color: transparent;
2731
opacity: 0.5;
@@ -32,6 +36,65 @@ ul.files_gallery {
3236
}
3337
}
3438

39+
> li.marked {
40+
background-color: var(--ui-selection-color-lighter);
41+
}
42+
43+
> li:hover .explorer_file_item-mark,
44+
.explorer_file_item-mark:focus-visible {
45+
opacity: 0.8;
46+
}
47+
48+
> li.marking .explorer_file_item-mark {
49+
@include fa-circle-icon;
50+
opacity: 0.8;
51+
}
52+
53+
> li.marking:not(.marked):hover {
54+
background-color: transparent;
55+
}
56+
57+
> li.marking .explorer_file_item-mark:hover {
58+
@include fa-check-circle-icon;
59+
}
60+
61+
> li.marked .explorer_file_item-mark {
62+
@include fa-check-circle-icon;
63+
64+
opacity: 1;
65+
}
66+
67+
// Top right corner of the 100px wide thumbnail centered in the item.
68+
.explorer_file_item-mark {
69+
@include fa-check-circle-icon;
70+
71+
position: absolute;
72+
top: space(3);
73+
left: calc(50% + 50px - #{space(7)});
74+
width: space(6);
75+
height: space(6);
76+
padding: 0;
77+
border: none;
78+
background-color: transparent;
79+
color: var(--ui-on-primary-color);
80+
filter: drop-shadow(0 0 2px #00000077);
81+
font-size: 22px;
82+
font-weight: bold;
83+
line-height: space(6);
84+
cursor: pointer;
85+
opacity: 0;
86+
}
87+
88+
> li.blank_slate,
89+
> li.loading {
90+
grid-column: 1 / -1;
91+
cursor: default;
92+
93+
&:hover {
94+
background-color: transparent;
95+
}
96+
}
97+
3598
li.blank_slate {
3699
text-align: center;
37100
padding: 10px 5px 20px 5px;
@@ -45,6 +108,19 @@ ul.files_gallery {
45108
margin: auto;
46109
border-radius: rounded();
47110
overflow: hidden;
111+
background-color: var(--ui-on-surface-color-lightest);
112+
}
113+
114+
.explorer_folder_item-pictogram {
115+
@include background-icon-center(var(--ui-primary-color-light), 48px);
116+
@include folder-icon;
117+
118+
display: block;
119+
width: 100px;
120+
height: 100px;
121+
margin: auto;
122+
border-radius: rounded();
123+
background-color: var(--ui-on-surface-color-lightest);
48124
}
49125

50126
.file_name {

‎app/assets/stylesheets/pageflow/editor/folder_breadcrumb.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,12 @@
2121
cursor: pointer;
2222
}
2323

24+
&-root_label {
25+
margin-left: space(2);
26+
color: var(--ui-on-surface-color-light);
27+
text-decoration: underline;
28+
}
29+
2430
&-separator {
2531
@include right-open-icon;
2632

‎app/controllers/pageflow/editor/entries_controller.rb‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ class EntriesController < Pageflow::ApplicationController
99
before_action :authenticate_user!
1010

1111
def index
12-
@entries = DraftEntry.accessible_by(current_ability, :use_files)
12+
@entries = EntryPolicy::Scope.new(current_user, Entry.includes(:draft))
13+
.previewer_or_above
14+
.map { |entry| DraftEntry.new(entry) }
1315
respond_with(@entries)
1416
end
1517

0 commit comments

Comments
 (0)