aboutsummaryrefslogtreecommitdiffhomepage
path: root/app/Resources
diff options
context:
space:
mode:
authorNicolas LÅ“uillet <nicolas@loeuillet.org>2018-01-12 23:10:21 +0100
committerGitHub <noreply@github.com>2018-01-12 23:10:21 +0100
commitfd637b9a5af28d432f775297ff19ba3f779d55b2 (patch)
treedc8fc13c8b09019cf0b5ac00f05a0f4a9656e5d0 /app/Resources
parent99e8c2785b9fc0cd9cc8674cb297a13a1035238f (diff)
parent5614df19cf3ed2be9d56853e5441412d4d09cff4 (diff)
downloadwallabag-fd637b9a5af28d432f775297ff19ba3f779d55b2.tar.gz
wallabag-fd637b9a5af28d432f775297ff19ba3f779d55b2.tar.zst
wallabag-fd637b9a5af28d432f775297ff19ba3f779d55b2.zip
Merge pull request #3541 from Simounet/feature/nav-label-replaced-by-buttons
Nav actions updated
Diffstat (limited to 'app/Resources')
-rw-r--r--app/Resources/static/themes/material/css/nav.scss70
-rw-r--r--app/Resources/static/themes/material/css/various.scss1
-rwxr-xr-xapp/Resources/static/themes/material/index.js32
3 files changed, 52 insertions, 51 deletions
diff --git a/app/Resources/static/themes/material/css/nav.scss b/app/Resources/static/themes/material/css/nav.scss
index 99a048b0..147f163f 100644
--- a/app/Resources/static/themes/material/css/nav.scss
+++ b/app/Resources/static/themes/material/css/nav.scss
@@ -2,8 +2,7 @@
2/* ========================================================================== 2/* ==========================================================================
3 Nav 3 Nav
4 ========================================================================== */ 4 ========================================================================== */
5nav, 5nav {
6.nav-wrapper {
7 height: auto; 6 height: auto;
8 line-height: initial; 7 line-height: initial;
9} 8}
@@ -18,25 +17,25 @@ nav {
18 } 17 }
19} 18}
20 19
21.nav-wrapper { 20.nav-panel-item .button-collapse {
21 margin-left: 0;
22 margin-right: 0.5rem;
23 padding: 0 0.5rem;
24 height: auto;
25 line-height: 1;
26 background-color: transparent;
27 border: none;
28}
29
30.nav-panel-item {
22 display: flex; 31 display: flex;
23 padding: 0.6rem 0.4rem 0.6rem 0.75rem; 32 padding: 0.6rem 0.4rem 0.6rem 0.75rem;
24 flex-wrap: wrap; 33 flex-wrap: wrap;
25 justify-content: space-between; 34 justify-content: space-between;
26 align-items: center; 35 align-items: center;
27
28 .button-collapse {
29 margin-left: 0;
30 margin-right: 0.5rem;
31 padding: 0 0.5rem;
32 height: auto;
33 line-height: 1;
34 background-color: transparent;
35 border: none;
36 }
37} 36}
38 37
39nav .nav-wrapper i { 38.nav-panel-item .material-icons {
40 height: 46px; 39 height: 46px;
41 line-height: 46px; 40 line-height: 46px;
42} 41}
@@ -51,8 +50,8 @@ nav .nav-wrapper i {
51 justify-content: flex-end; 50 justify-content: flex-end;
52} 51}
53 52
54.nav-panel-add .add, 53.nav-panel-item .add,
55.nav-panel-search .search, 54.nav-panel-item .search,
56.nav-panels .close { 55.nav-panels .close {
57 color: #444 !important; 56 color: #444 !important;
58} 57}
@@ -68,9 +67,7 @@ nav .nav-wrapper i {
68 .input-field input { 67 .input-field input {
69 display: block; 68 display: block;
70 line-height: inherit; 69 line-height: inherit;
71 padding-left: 4rem !important; 70 height: 3rem;
72 width: calc(100% - 8rem);
73 height: 4.1rem;
74 } 71 }
75 72
76 .input-field input:focus { 73 .input-field input:focus {
@@ -87,36 +84,45 @@ nav .nav-wrapper i {
87} 84}
88 85
89.input-field { 86.input-field {
90 &.nav-panel-add label, 87 &.nav-panel-item label {
91 &.nav-panel-search label {
92 left: 1rem; 88 left: 1rem;
93 } 89 }
94 90
95 &.nav-panel-add .close, 91 &.nav-panel-item .close {
96 &.nav-panel-search .close {
97 position: absolute;
98 top: 0;
99 right: 1rem;
100 color: transparent; 92 color: transparent;
101 cursor: pointer; 93 cursor: pointer;
102 font-size: 2rem; 94 font-size: 2rem;
103 transition: 0.3s color; 95 transition: 0.3s color;
104 } 96 }
105 97
106 &.nav-panel-add, 98 &.nav-panel-item {
107 &.nav-panel-add form,
108 &.nav-panel-search,
109 &.nav-panel-search form {
110 display: flex; 99 display: flex;
111 flex: 1; 100 flex: 1;
101 flex-wrap: nowrap;
102 align-items: center;
112 } 103 }
113 104
114 &.nav-panel-add form.disabled, 105 &.nav-panel-add.disabled,
115 &.nav-panel-add form.disabled input { 106 &.nav-panel-add.disabled input {
116 background-color: whitesmoke; 107 background-color: whitesmoke;
117 } 108 }
118} 109}
119 110
111.nav-form-button {
112 padding: 0;
113 background-color: transparent;
114 border: none;
115
116 &:focus {
117 background-color: inherit;
118 }
119}
120
121.nav-form-button,
122.nav-panel-item .close {
123 margin: 0 1%;
124}
125
120#button_filters { 126#button_filters {
121 display: none; 127 display: none;
122} 128}
diff --git a/app/Resources/static/themes/material/css/various.scss b/app/Resources/static/themes/material/css/various.scss
index 7daf40ec..ba6570f2 100644
--- a/app/Resources/static/themes/material/css/various.scss
+++ b/app/Resources/static/themes/material/css/various.scss
@@ -21,6 +21,7 @@ div.settings div.file-field {
21 21
22nav .input-field input { 22nav .input-field input {
23 margin: 0; 23 margin: 0;
24 padding-left: 0.5rem;
24} 25}
25 26
26.tabs { 27.tabs {
diff --git a/app/Resources/static/themes/material/index.js b/app/Resources/static/themes/material/index.js
index 36505d71..96310d81 100755
--- a/app/Resources/static/themes/material/index.js
+++ b/app/Resources/static/themes/material/index.js
@@ -35,6 +35,13 @@ $(document).ready(() => {
35 initFilters(); 35 initFilters();
36 initExport(); 36 initExport();
37 37
38 const toggleNav = (toShow, toFocus) => {
39 $('.nav-panel-actions').hide(100);
40 $(toShow).show(100);
41 $('.nav-panels').css('background', 'white');
42 $(toFocus).focus();
43 };
44
38 $('#nav-btn-add-tag').on('click', () => { 45 $('#nav-btn-add-tag').on('click', () => {
39 $('.nav-panel-add-tag').toggle(100); 46 $('.nav-panel-add-tag').toggle(100);
40 $('.nav-panel-menu').addClass('hidden'); 47 $('.nav-panel-menu').addClass('hidden');
@@ -42,34 +49,21 @@ $(document).ready(() => {
42 return false; 49 return false;
43 }); 50 });
44 $('#nav-btn-add').on('click', () => { 51 $('#nav-btn-add').on('click', () => {
45 $('.nav-panel-buttom').hide(100); 52 toggleNav('.nav-panel-add', '#entry_url');
46 $('.nav-panel-add').show(100);
47 $('.nav-panels .action').hide(100);
48 $('.nav-panel-menu').addClass('hidden');
49 $('.nav-panels').css('background', 'white');
50 $('#entry_url').focus();
51 return false; 53 return false;
52 }); 54 });
53 const materialAddForm = $('.nav-panel-add form[name=entry]'); 55 const materialAddForm = $('.nav-panel-add');
54 materialAddForm.on('submit', () => { 56 materialAddForm.on('submit', () => {
55 materialAddForm.addClass('disabled'); 57 materialAddForm.addClass('disabled');
56 $('input#entry_url', materialAddForm).prop('readonly', true).trigger('blur'); 58 $('input#entry_url', materialAddForm).prop('readonly', true).trigger('blur');
57 }); 59 });
58 $('#nav-btn-search').on('click', () => { 60 $('#nav-btn-search').on('click', () => {
59 $('.nav-panel-buttom').hide(100); 61 toggleNav('.nav-panel-search', '#search_entry_term');
60 $('.nav-panel-search').show(100);
61 $('.nav-panels .action').hide(100);
62 $('.nav-panel-menu').addClass('hidden');
63 $('.nav-panels').css('background', 'white');
64 $('#search_entry_term').focus();
65 return false; 62 return false;
66 }); 63 });
67 $('.close').on('click', () => { 64 $('.close').on('click', (e) => {
68 $('.nav-panel-add').hide(100); 65 $(e.target).parent('.nav-panel-item').hide(100);
69 $('.nav-panel-search').hide(100); 66 $('.nav-panel-actions').show(100);
70 $('.nav-panel-buttom').show(100);
71 $('.nav-panels .action').show(100);
72 $('.nav-panel-menu').removeClass('hidden');
73 $('.nav-panels').css('background', 'transparent'); 67 $('.nav-panels').css('background', 'transparent');
74 return false; 68 return false;
75 }); 69 });