daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

+ client: Redesign query logs block/unblock buttons

Browse Source 
Close #2050

Squashed commit of the following:

commit 3bc6a409034989b914306e1c33da274730ca623e
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Sep 4 20:58:09 2020 +0300

    Change dashboard block confirm message

commit d4d47c3557e2166ee04db25a71b782bfbfe3b865
Merge: e8865827 fc43e2ac
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Sep 4 14:56:34 2020 +0300

    Merge branch 'master' into feature/2050

commit e8865827879955b1ef62c9ff85798d07bfa4627d
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Sep 4 13:46:10 2020 +0300

    Rename classname

commit 648151c54e493c63622e014cb9cd1cb450f25478
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Sep 3 19:09:21 2020 +0300

    Decrease arrow size

commit 4feadab707c613d31225dfa9443a9a836db37ba1
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Sep 3 18:27:41 2020 +0300

    Rename button class

commit c3919d8ae8d1431657ce61afad2c20e5806f279a
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Sep 3 10:35:15 2020 +0300

    Review changes: extract variables

commit 0ac809584c391e41a1749a844bc1075e05a92345
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Sep 3 10:13:57 2020 +0300

    Display dashboard button on hover

commit 1395287c2383e2248a2a5d39451403bd73141e55
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Sep 2 21:24:04 2020 +0300

    Do not hide button on option open

commit 947f254b7aea26f289b66b66fac46dba11ea3952
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Sep 2 21:20:19 2020 +0300

    Add buttons for mobile screen

commit df05697f87163a2b716d82653884e631f2fa6cf3
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Sep 2 20:18:20 2020 +0300

    Change dashboard button styles

commit 16655f2d6b0d79d1fa027ec2310bb0268fffaf6a
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Sep 2 20:04:28 2020 +0300

    Change button styles, rename button options

commit 1ac22e875d8b26c16830bf6edb85dadcc19ff287
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Sep 2 19:30:16 2020 +0300

    Review changes

commit c590119875439d85927bdd334658e003bc1f0563
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Sep 2 17:58:08 2020 +0300

    Remove default query logs form values

commit 141329563417f5337f5659d5500f4cbe16d64bd2
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Sep 2 17:41:23 2020 +0300

    Update blocking buttons options logic, fix button svg size

commit 9e4f39aa6cb8e134d80d496b8a248b2fe6aceb99
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Sep 2 16:30:48 2020 +0300

    Fix button position

commit 8aabff7daccb87ae02c2302e62e296b3cfc17608
Merge: 415a0334 6b614295
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 1 17:29:55 2020 +0300

    Merge branch 'master' into feature/2050

commit 415a0334561733d92a0f7badd68101ef554dc689
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 1 17:05:51 2020 +0300

    Add blocking options

commit bc6aed92b6e12f27c2604501275b53bb8159d5bc
Merge: 0de4fb3a 40b74522
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 1 15:49:06 2020 +0300

    Merge branch 'feature/infinite_scroll_query_logs' into feature/2050

commit 40b745225112cf8d664220ed8f484b0aa16e997c
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 1 15:46:27 2020 +0300

    Remove dynamic translation of toasts

commit 0de4fb3a4cd785c6b52e860e204c6e13d356b178
Merge: 1ab14471 f08fa7b8
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 1 15:07:30 2020 +0300

    Merge branch 'feature/infinite_scroll_query_logs' into feature/2050

... and 51 more commits
This commit is contained in:
Artem Baskal
2020-09-05 10:22:47 +03:00
parent fc43e2ac6f
commit 8dc0108868
14 changed files with 327 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
client/src/components/Logs/Logs.css
View File

@@ -10,9 +10,20 @@
--size-client: 123;
--gray-216: rgba(216, 216, 216, 0.23);
--gray-4d: #4D4D4D;
--gray-f3: #F3F3F3;
--gray-8: #888;
--danger: #DF3812;
--white80: rgba(255, 255, 255, 0.8);
--btn-block: #C23814;
--btn-block-disabled: #E3B3A6;
--btn-block-active: #A62200;
--btn-unblock: #888888;
--btn-unblock-disabled: #D8D8D8;
--btn-unblock-active: #4D4D4D;
--option-border-radius: 4px;
}
.logs__text {
@@ -191,6 +202,7 @@
width: 7.6875rem;
flex: var(--size-client) 0 auto;
padding-right: 0;
position: relative;
}
.logs__cell--header__container > .logs__cell--header__item {
@@ -202,12 +214,95 @@
padding-right: 0;
}
.logs__cell--block-button {
max-height: 1.75rem;
position: relative;
left: 10%;
top: 40%;
visibility: hidden;
.button-action__container {
display: flex;
position: absolute;
right: 0;
bottom: 0.5rem;
height: 1.6rem;
}
.button-action__container--detailed {
bottom: 1.3rem;
}
.button-action {
outline: 0 !important;
background: var(--btn-block);
border-radius: var(--option-border-radius);
font-size: 0.8rem;
color: var(--white);
letter-spacing: 0;
text-align: center;
line-height: 28px;
border: 0;
}
.button-action--unblock {
background: var(--btn-unblock);
}
.button-action--main {
padding: 0 1rem;
display: flex;
align-items: center;
}
.button-action--with-options {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.button-action--arrow {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 1px solid var(--white);
width: 1.5625rem;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.button-action:hover {
cursor: pointer;
}
.button-action--arrow .button-action--icon {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.button-action:active {
background: var(--btn-block-active);
}
.button-action--unblock:active {
background: var(--btn-unblock-active);
}
.button-action:disabled {
background: var(--btn-block-disabled);
cursor: default;
}
.button-action--unblock:disabled {
background: var(--btn-unblock-disabled);
}
.button-action--arrow-option:hover {
cursor: pointer;
background: var(--gray-f3);
overflow: hidden;
}
.button-action--arrow-option-container {
overflow: visible;
transform-origin: left;
padding: 1rem 0;
}
.logs__row {
@@ -222,14 +317,6 @@
border-bottom: 2px solid var(--gray-216);
}
.logs__table .logs__row:hover .logs__cell--block-button {
visibility: visible;
}
.logs__table .logs__row .logs__cell--block-button:disabled {
background-color: var(--white) !important;
}
/* QUERY_STATUS_COLORS */
.logs__row--blue {
background-color: var(--blue);