Skip to content

Commit 6d45201

Browse files
selulselul
authored
Merge pull request #903 from Codeinwp/prf/media-rename
feat: adds attachment rename & replace
2 parents 0c33f9d + 6077f05 commit 6d45201

21 files changed

+2801
-2
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@ build
1010
.DS_Store
1111
cc-test-reporter
1212
assets/build
13-
test-results
13+
test-results
14+
tests/assets/filestash

‎assets/css/single-attachment.css

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
table.compat-attachment-fields {
2+
border-collapse: collapse;
3+
width: 100%;
4+
}
5+
6+
[class^="compat-field-optml_"] {
7+
background: #fff;
8+
border-collapse: separate;
9+
border-spacing: 0;
10+
border: 1px solid #ccc;
11+
}
12+
13+
[class^="compat-field-optml_"] tr {
14+
background: #fff;
15+
}
16+
17+
[class^="compat-field-optml_"] th {
18+
display: block;
19+
float: none;
20+
white-space: nowrap;
21+
}
22+
23+
[class^="compat-field-optml_"] th,
24+
[class^="compat-field-optml_"] td {
25+
padding: 20px;
26+
}
27+
28+
.compat-field-optml_footer_row {
29+
padding: 0 !important;
30+
background: #eee;
31+
}
32+
33+
.compat-field-optml_spacer_row {
34+
height: 40px !important;
35+
background: transparent !important;
36+
border: 0 !important;
37+
}
38+
39+
.compat-field-optml_spacer_row td,
40+
.compat-field-optml_spacer_row th {
41+
padding: 0 !important;
42+
}
43+
44+
.compat-field-optml_footer_row th,
45+
.compat-field-optml_footer_row td {
46+
padding: 5px 20px;
47+
}
48+
49+
50+
.optml-logo-contianer {
51+
justify-content: flex-end;
52+
display: flex;
53+
align-items: center;
54+
gap: 10px;
55+
font-size: 12px;
56+
position:relative;
57+
}
58+
59+
.optml-logo-contianer img {
60+
width: 25px;
61+
height: 25px;
62+
}
63+
64+
.optml-rename-input:focus-within {
65+
box-shadow: 0 0 0 1px #577BF9;
66+
}
67+
68+
.optml-rename-media-container {
69+
display: flex;
70+
gap: 10px;
71+
align-items: center;
72+
}
73+
74+
.optml-rename-input {
75+
display: flex;
76+
align-items: stretch;
77+
border-radius: 3px;
78+
border: 1px solid #577BF9;
79+
overflow: hidden;
80+
background: #fff;
81+
flex-grow: 1;
82+
}
83+
84+
.optml-rename-input #optml_rename_file {
85+
border: 0;
86+
border-radius: 0;
87+
flex-grow: 1;
88+
box-shadow: none;
89+
background: transparent;
90+
min-height: 30px;
91+
}
92+
93+
.optml-rename-input .optml-file-ext {
94+
padding: 0 10px;
95+
display: flex;
96+
align-items: center;
97+
font-weight: 600;
98+
background-color: #e6effd;
99+
border-left: 1px solid #577BF9;
100+
color: #577BF9;
101+
}
102+
103+
104+
.optml-replace-section {
105+
display: flex;
106+
flex-direction: column;
107+
gap: 10px;
108+
}
109+
110+
.optml-description {
111+
color: #666;
112+
margin: 0;
113+
font-style: italic;
114+
}
115+
116+
.optml-replace-input {
117+
box-sizing: border-box;
118+
display: flex;
119+
flex-direction: column;
120+
align-items: flex-end;
121+
gap: 10px;
122+
}
123+
124+
.optml-replace-input label {
125+
width: 100%;
126+
min-height: 100px;
127+
display: flex;
128+
align-items: center;
129+
justify-content: center;
130+
text-align: center;
131+
cursor: pointer;
132+
flex-grow: 1;
133+
padding: 8px;
134+
border: 1px dashed #577BF9;
135+
border-radius: 3px;
136+
background: #fff;
137+
transition: all 0.3s ease;
138+
}
139+
140+
.optml-replace-input label:hover {
141+
background: #577BF9;
142+
color: #fff;
143+
}
144+
145+
.optml-replace-file-preview {
146+
display: flex;
147+
align-items: center;
148+
gap: 10px;
149+
justify-content: center;
150+
font-weight: 600;
151+
}
152+
153+
.optml-replace-file-preview img {
154+
object-fit: cover;
155+
border-radius: 6px;
156+
max-width: 250px;
157+
max-height: 75px;
158+
border: 1px solid #ccc;
159+
background: #f0f0f0;
160+
}
161+
162+
.optml-replace-file-error {
163+
color: rgb(163, 11, 0);
164+
padding: 5px 10px;
165+
border-radius: 3px;
166+
border: 1px solid rgb(163, 11, 0);
167+
background:rgb(255, 205, 201);
168+
}
169+
170+
#optml-file-drop-area {
171+
box-sizing: border-box;
172+
position: relative;
173+
transition: all 0.3s ease;
174+
}
175+
176+
#optml-file-drop-area.drag-active {
177+
background-color: #e6effd;
178+
border: 1px dashed #577BF9;
179+
}
180+
181+
.optml-replace-file-actions {
182+
display: flex;
183+
align-items: center;
184+
flex-direction: row-reverse;
185+
justify-content: flex-end;
186+
gap: 10px;
187+
width: 100%;
188+
}
189+
190+
.optml-rename-actions {
191+
display: flex;
192+
align-items: center;
193+
justify-content: flex-end;
194+
width: 100%;
195+
margin-top: 10px;
196+
}
197+
198+
.optml-replace-file-actions p {
199+
margin-right: auto;
200+
}
201+
202+
[class^="compat-field-optml_"] .optml-btn {
203+
border-radius: 3px !important;
204+
border: 0 !important;
205+
cursor: pointer;
206+
transition: all 0.3s ease;
207+
color: #fff !important;
208+
margin-bottom: 0 !important;
209+
}
210+
211+
[class^="compat-field-optml_"] .optml-btn.primary {
212+
background: #577BF9 !important;
213+
}
214+
215+
[class^="compat-field-optml_"] .optml-btn.destructive {
216+
background: #D93025 !important;
217+
}
218+
219+
[class^="compat-field-optml_"] .optml-btn:disabled {
220+
opacity: 0.5;
221+
cursor: not-allowed !important;
222+
pointer-events: none;
223+
color: #fff !important;
224+
}
225+
226+
.optml-btn.primary:hover {
227+
background: #4161d7;
228+
}
229+
230+
.optml-btn.destructive:hover {
231+
background: #c2291e;
232+
}
233+
234+
.optml-svg-loader {
235+
animation: spin 1s linear infinite;
236+
}
237+
238+
@keyframes spin {
239+
0% { transform: rotate(0deg); }
240+
100% { transform: rotate(360deg); }
241+
}

0 commit comments

Comments
 (0)