diff --git a/lib/zin/wg/dynamic/css/v1.css b/lib/zin/wg/dynamic/css/v1.css index 6a8a40c846..2e0c908f2d 100644 --- a/lib/zin/wg/dynamic/css/v1.css +++ b/lib/zin/wg/dynamic/css/v1.css @@ -1,18 +1,28 @@ .dynamic > li {position: relative; list-style: none} -.dynamic > li:before, .dynamic > li > a:after, .dynamic > li > div:after {position: absolute; left: -20px; display: block; width: 15px; height: 15px; content: ' '; border-radius: 50%} +.dynamic > li:before, .dynamic > li > div:after {position: absolute; left: -20px; display: block; width: 15px; height: 15px; content: ' '; border-radius: 50%} .dynamic > li:before {top: 12px; left: -17px; z-index: 3; width: 10px; height: 10px; background-color: #c4c4c4; border: none; border: 2px solid #fff;} -.dynamic > li > a:after, .dynamic > li > div:after {top: 11px; left: -17px; z-index: 3; width: 9px; height: 9px; background-color: #2e7fff; border-radius: 50%; opacity: 0} +.dynamic > li > div:after {top: 15px; left: -17px; z-index: 3; width: 9px; height: 9px; background-color: #c4c4c4; border-radius: 50%; opacity: 0} +.dynamic > li.active > div:after {background-color: #2e7fff;} +.dynamic > li.green > div:after {background-color: rgb(25, 190, 131);} +.dynamic > li.yellow > div:after {background-color: rgb(255, 210, 169);} +.dynamic > li.trophy > div:after {background-color: unset;} .dynamic > li + li:after {position: absolute; top: -12px; bottom: 20px; left: -13px; z-index: 1; display: block; content: ' '; border-left: 2px solid #eee;} -.dynamic > li.active > a:after, .dynamic > li.active > div:after {opacity: 1} -.dynamic > li.active:before {top: 8px; left: -20px; width: 15px; height: 15px; background-color: rgba(46,127,255, .2); border: none} -.dynamic > li > a, .dynamic > li > div {display: block; padding: 5px; line-height: 20px} -.dynamic > li.active > a {color: #313c52} +.dynamic > li > div:after {opacity: 1} +.dynamic > li:before {top: 12px; left: -20px; width: 15px; height: 15px; background-color: #fff; border: none;} +.dynamic > li.active:before {background-color: rgba(46, 127, 255, .2);} +.dynamic > li.green:before {background-color: rgba(25, 190, 131, .2);} +.dynamic > li.yellow:before {background-color: rgba(255, 210, 169, .2);} +.dynamic > li.trophy:before {background: url('static/svg/trophy.svg') no-repeat; width: 20px; height: 20px; background-size: 100%; left: -22px; top: 9px;} +.dynamic > li > div {display: block; padding: 5px; line-height: 20px} +.dynamic > li.trophy .dynamic-text {background: #fff;} +.dynamic > li.trophy .dynamic-text img {opacity: 0.5; transform: rotate(10deg);} +.dynamic > li.green > div, .dynamic > li.active > div, .dynamic > li.yellow > div {color: #313c52} .dynamic-tag {position: absolute; top: 5px; left: -115px; font-size: 12px} .dynamic-tag-left {padding-left: 115px} .dynamic-sm {font-size: 12px} -.dynamic-sm > li:before, .dynamic-sm > li > a:after, .dynamic-sm > li > div:after {top: 10px; left: -20px; width: 11px; height: 11px} +.dynamic-sm > li:before, .dynamic-sm > li > div:after {top: 10px; left: -20px; width: 11px; height: 11px} .dynamic-sm > li.active:before, .dynamic-sm > li:before {top: 10px; left: -18px; width: 11px; height: 11px; background: 0 0; border: 1px solid #eee} -.dynamic-sm > li > a, .dynamic-sm > li > div {line-height: 20px} -.dynamic-sm > li > a:after, .dynamic-sm > li > div:after {top: 13px; left: -15px; width: 5px; height: 5px} +.dynamic-sm > li > div {line-height: 20px} +.dynamic-sm > li > div:after {top: 13px; left: -15px; width: 5px; height: 5px} diff --git a/lib/zin/wg/dynamic/v1.php b/lib/zin/wg/dynamic/v1.php index 8ba745e58e..4818965879 100644 --- a/lib/zin/wg/dynamic/v1.php +++ b/lib/zin/wg/dynamic/v1.php @@ -15,34 +15,65 @@ class dynamic extends wg return file_get_contents(__DIR__ . DS . 'css' . DS . 'v1.css'); } + public function getStatusClass(object $dynamic): string + { + $action = strtolower($dynamic->action); + $objectType = strtolower($dynamic->objectType); + + // if($dynamic->major) return 'active'; + + if($objectType == 'release' && $action == 'opened') return 'trophy'; + if($objectType == 'project' && $action == 'closed') return 'trophy'; + + if(strpos($action, 'open') !== false || strpos($action, 'activate') !== false) return 'active'; + if(strpos($action, 'finish') !== false || strpos($action, 'resolve') !== false) return 'green'; + if(strpos($action, 'assign') !== false || strpos($action, 'collect') !== false) return 'yellow'; + + return ''; + } + protected function dynamicItem(object $dynamic, array $users): wg { $dynamicLabel = zget($dynamic, 'dynamicLabel', ''); if(empty($dynamicLabel)) $dynamicLabel = zget($dynamic, 'actionLabel', ''); + + $dynamicClass = $this->getStatusClass($dynamic); return li ( - setClass($dynamic->major ? 'active': ''), + setClass($dynamicClass), div ( - span( - setClass('dynamic-tag'), + span + ( + setClass('dynamic-tag p-1'), $dynamic->date ), - div( - setClass('dynamic-text clip'), - zget($users, $dynamic->actor), - span + div + ( + setClass('dynamic-text flex flex-nowrap justify-between items-center'), + div ( - setClass('text-gray px-1'), - $dynamicLabel + setClass('clip p-1'), + zget($users, $dynamic->actor), + span + ( + setClass('text-gray px-1'), + $dynamicLabel + ), + span($dynamic->objectLabel, setClass('pr-1')), + a + ( + set::href($dynamic->objectLink), + set::title($dynamic->objectName), + $dynamic->objectName + ) ), - span($dynamic->objectLabel, setClass('pr-1')), - a + $dynamicClass == 'trophy' ? h::img ( - set::href($dynamic->objectLink), - set::title($dynamic->objectName), - $dynamic->objectName - ) + set::src('static/svg/trophy.svg'), + setClass('ml-2'), + set::width(30) + ) : null ) ) ); diff --git a/www/static/svg/trophy.svg b/www/static/svg/trophy.svg new file mode 100644 index 0000000000..663b4ca654 --- /dev/null +++ b/www/static/svg/trophy.svg @@ -0,0 +1,7 @@ + + + + + + +