diff --git a/src/Umbraco.Web.UI.Client/src/less/application/grid.less b/src/Umbraco.Web.UI.Client/src/less/application/grid.less index 4448bf2192..7ed2abc898 100644 --- a/src/Umbraco.Web.UI.Client/src/less/application/grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/application/grid.less @@ -124,10 +124,6 @@ body.umb-drawer-is-visible #mainwrapper{ height: 100%; } -#tree .umb-tree { - padding: 0px 0px 20px 0px; -} - #search-results { z-index: 200; } diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index b6b66744ff..e02cfed493 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -71,8 +71,7 @@ @import "sections.less"; @import "helveticons.less"; @import "main.less"; -@import "tree.less"; -@import "listview.less"; +@import "listview.less"; @import "gridview.less"; @import "footer.less"; @import "dashboards.less"; @@ -92,6 +91,11 @@ @import "components/html/umb-expansion-panel.less"; @import "components/html/umb-alert.less"; +@import "components/tree/umb-tree.less"; +@import "components/tree/umb-tree-root.less"; +@import "components/tree/umb-actions.less"; +@import "components/tree/umb-tree-item.less"; + @import "components/editor.less"; @import "components/overlays.less"; @import "components/card.less"; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-actions.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-actions.less new file mode 100644 index 0000000000..f52258333d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-actions.less @@ -0,0 +1,98 @@ +// Tree context menu +// ------------------------- +.umb-actions { + margin: 0; + list-style: none; + user-select: none; + + .sep { + display: block; + border-top: 1px solid @gray-9; + + &:first-child { + border-top: none; + } + } + + .menu-label { + display: inline-block; + vertical-align: middle; + padding-left: 15px; + } + + .icon { + font-size: 18px; + vertical-align: middle; + color: @gray-3; + } +} + +.umb-action-link { + white-space: nowrap; + font-size: 15px; + color: @black; + padding: 9px 25px 9px 20px; + text-decoration: none; + cursor: pointer; + display: flex; + align-items: center; + + body.touch & { + padding: 7px 25px 7px 20px; + font-size: 110%; + } +} + +.umb-action-link:hover, +.umb-action-link:focus, +.umb-action.selected { + color: @black !important; + background: @gray-10 !important; + text-decoration: none; +} + +.umb-actions-child { + + .umb-action { + display: block; + + &.add { + margin-top: 20px; + border-top: 1px solid @gray-8; + padding-top: 20px; + + i { + opacity: 0.4; + } + } + } + + .umb-action-link { + clear: both; + padding-left: 10px; + } + + .icon { + font-size: 30px; + min-width: 30px; + text-align: center; + line-height: 24px; + /* set line-height to ensure all icons use same line-height */ + } + + .menu-label { + font-size: 14px; + color: @black; + margin-left: 10px; + } + + small { + font-size: 12px; + display: block; + clear: right; + line-height: 14px; + color: @gray-6; + white-space: normal; + margin-top: 2px; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less new file mode 100644 index 0000000000..002d076461 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less @@ -0,0 +1,72 @@ +.umb-tree-item { + display: block; + min-width: 100%; + width: auto; + + &:hover ins { + visibility: visible; + cursor: pointer + } +} + +.umb-tree-item > .umb-tree-item__inner { + + &:hover .umb-tree-item__label { + overflow: hidden; + margin-right: 6px; + } + + // Loading Animation + // ------------------------ + .l { + width: 100%; + height: 1px; + overflow: hidden; + position: absolute; + left: 0; + bottom: 0; + + div { + .umb-loader; + } + } + + .umb-tree-item__label { + padding: 7px 0 5px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex: 1 0 auto; + } +} + +.umb-tree-item.current > .umb-tree-item__inner { + + background: @turquoise-d1; + + // override small icon color. TODO => check usage +// &:before { +// color: @turquoise-l2; +// } + + .umb-options { + + &:hover i { + opacity: .7; + } + + i { + background: @white; + border-color: @turquoise-d1; + transition: opacity 120ms ease; + } + } + + a, + .umb-tree-icon, + ins { + color: @white !important; + background-color: @turquoise-d1; + border-color: @turquoise-d1; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-root.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-root.less new file mode 100644 index 0000000000..f2b26fa925 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-root.less @@ -0,0 +1,27 @@ +.umb-tree-root { + height:@editorHeaderHeight; + +// div& { +// align-items:inherit; +// } + + &-link { + display: flex; + align-items:center; + width:100%; + padding:5px 0 0 20px; + color:@gray-2; + } + + h5, + h6 { + margin: 0; + width: 100%; + display: flex; + color: @gray-2; + } + + .umb-options { + align-self:center; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less new file mode 100644 index 0000000000..4bb789856f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less @@ -0,0 +1,284 @@ +// Tree +// ------------------------- +.umb-tree { + margin: 0; + min-width: 100%; + width: auto; + padding: 0 0 20px; + list-style-type: none; + + * { + white-space: nowrap; + } + + a, a:hover { + outline: none; + text-decoration: none; + + // TODO => confirm not in use +// &.noSpr { +// background-position: 0 +// } + } + + ins { + margin: -4px 0 0 -16px; + width: 16px; + height: 16px; + visibility: hidden; + text-decoration: none; + font-size: 12px; + transition: opacity 120ms ease; + + &:hover { + opacity: .7; + } + } + + i.noSpr { + display: inline-block; + margin-top: 1px; + width: 16px; + height: 16px; + line-height: 16px; + } + + ul { + padding: 0; + margin: 0; + min-width: 100%; + width: 100%; + + &.collapsed { + display: none; + } + } + + //loader defaults + .umb-loader { + height: 10px; + margin: 10px 10px 10px 10px; + } + + .search-subtitle { + color: @gray-7; + display: block; + padding-left: 35px; + } +} + +body.touch .umb-tree { + ins { + font-size: 14px; + visibility: visible; + padding: 7px; + } + + .umb-tree-item > .umb-tree-item__inner { + padding-top: 8px; + padding-bottom: 8px; + font-size: 110%; + } + + // change height of this if touch devices should have a different height of preloader. + .umb-tree-item .l div { + padding: 0; + } +} + +.umb-tree-root, .umb-tree-item__inner { + padding: 0; + position: relative; + overflow: hidden; + display: flex; + flex-wrap: nowrap; + align-items: center; + + &:hover { + background: @gray-10; + + > .umb-options { + visibility: visible; + } + } +} + +.umb-tree-header { + display: flex; + padding: 20px 0 20px 20px; + box-sizing: border-box; + color: @gray-2; + font-weight: bold; + font-size: 15px; +} + +.umb-tree-icon, +.umb-tree-node-search { + cursor: pointer; +} + +.umb-tree .umb-search-group { + position: inherit; + display: inherit; + + h6 { + padding: 10px 0 10px 20px; + font-weight: inherit; + background: @gray-10; + font-size: 14px; + } + + &:hover { + background: inherit; + } + + &-item { + padding-left: 20px; + } + + &-link { + display: flex; + flex-wrap: wrap; + flex-direction: column; + font-weight: normal !important; + } +} + +.umb-tree .umb-tree-node-checked i[class^="icon-"], +.umb-tree .umb-tree-node-checked i[class*=" icon-"] { + font-family: 'icomoon' !important; + color: @green !important; + + &::before { + content: "\e165" !important; + font-family: inherit; + } +} + +.umb-options { + visibility: hidden; + display: flex; + flex: 0 0 auto; + justify-content: flex-end; + padding: 9px 5px; + text-align: center; + margin: 0 10px 0 auto; + cursor: pointer; + border-radius: @baseBorderRadius; + + &:hover { + background: @btnBackgroundHighlight; + } + + i { + height: 5px !important; + width: 5px !important; + border-radius: 20px; + background: @black; + display: inline-block; + margin: 0 2px 0 0; + + &:last-child { + margin: 0; + } + } + + .hide-options & { + display: none !important; + } +} + + +// Tree item states +// ------------------------- +.not-published { + > i.icon, + a { + opacity: 0.6; + } +} + +.not-allowed { + > i.icon, + a { + cursor: not-allowed; + } +} + +.protected, +.has-unpublished-version, +.is-container, +.locked { + &::before { + font-family: 'icomoon'; + position: absolute; + font-size: 20px; + padding-left: 7px; + padding-top: 7px; + bottom: 0; + } +} + +.protected::before { + content: "\e256"; + color: @red; +} + +.has-unpublished-version::before { + content: "\e25a"; + color: @green; +} + +.is-container::before { + content: "\e04e"; + color: @turquoise; + font-size: 8px; + padding-left: 13px; + padding-top: 8px; + pointer-events: none; +} + + +.locked::before { + content: "\e0a7"; + color: @red; +} + +.no-access { + .umb-tree-icon, + .root-link, + .umb-tree-item__label { + color: @gray-7; + cursor: not-allowed; + } +} + + +// Tree icons +// ------------------------- +.umb-tree-icon { + vertical-align: middle; + margin: 0 13px 0 0; + color: @gray-1; + font-size: 20px; + + &.blue { + color: @blue; + } + + &.green { + color: @green; + } + + &.purple { + color: @purple; + } + + &.orange { + color: @orange; + } + + &.red { + color: @red; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less index d869d1d9af..225157633f 100644 --- a/src/Umbraco.Web.UI.Client/src/less/main.less +++ b/src/Umbraco.Web.UI.Client/src/less/main.less @@ -116,7 +116,7 @@ h5.-black { /* FORM GRID */ .umb-pane { - margin: 30px 20px; + margin: 20px; } .umb-control-group { border-bottom: 1px solid @gray-10; diff --git a/src/Umbraco.Web.UI.Client/src/less/modals.less b/src/Umbraco.Web.UI.Client/src/less/modals.less index 5a85c19124..8ef2c8c859 100644 --- a/src/Umbraco.Web.UI.Client/src/less/modals.less +++ b/src/Umbraco.Web.UI.Client/src/less/modals.less @@ -75,6 +75,7 @@ bottom: 0px; position: absolute; padding: 0px; + background: #fff; } .umb-dialog .umb-btn-toolbar .umb-control-group{ diff --git a/src/Umbraco.Web.UI.Client/src/less/tree.less b/src/Umbraco.Web.UI.Client/src/less/tree.less deleted file mode 100644 index 7cf7e6e5ab..0000000000 --- a/src/Umbraco.Web.UI.Client/src/less/tree.less +++ /dev/null @@ -1,554 +0,0 @@ -// item-list -// ------------------------- - - -.umb-item-list { - margin: 0; - width: auto; - display: block -} -.umb-item-list li { - display: block; - width: auto; -} - - - - -// Tree -// ------------------------- - -.umb-tree { - margin: 0; - min-width: 100%; - width: auto; -} - -.umb-tree li { - display: block; - min-width: 100%; - width: auto; -} -.umb-tree li.current > div, -.umb-tree div.selected { - background: @turquoise-d1; -} -.umb-tree li.current > div a.umb-options i, -.umb-tree div.selected i { - background: @white; - border-color: @turquoise-d1; - transition: opacity 120ms ease; -} - -.umb-tree li.current > div a.umb-options:hover i, -.umb-tree div.selected i { - opacity: .7; -} - -.umb-tree li.current > div a, -.umb-tree li.current > div i.icon, -.umb-tree li.current > div ins { - color: @white !important; - background-color: @turquoise-d1; - border-color: @turquoise-d1; -} - -.umb-tree li.root > div:first-child { - padding: 0; - height: @editorHeaderHeight; -} - -.umb-tree li.root > div h5, .umb-tree li.root > div h6 { - margin: 0; - width: 100%; - display: flex; - align-items: center; -} - -.umb-tree li.root > div:first-child h5 > a, .umb-tree-header { - display: flex; - padding: 20px 0 20px 20px; - box-sizing: border-box; -} - -.umb-tree * { - white-space: nowrap -} -.umb-tree ul { - padding: 0; - margin: 0; - min-width: 100%; - width: 100%; - //display: table -} - -.umb-tree ul.collapsed { - display:none; -} - -.umb-tree a { - cursor:pointer; - text-decoration: none; - outline: none; -} - -.umb-tree a:hover { - text-decoration: none -} - -/*.umb-tree div.tree-node { - padding: 5px 0 5px 0; - position: relative; - overflow: hidden; - display: flex; - flex-wrap: nowrap; - align-items: center; -}*/ - -.umb-tree div { - padding: 5px 0 5px 0; - position: relative; - overflow: hidden; - display: flex; - flex-wrap: nowrap; - align-items: center; -} - -.umb-tree a.noSpr { - background-position: 0 -} - -.umb-tree div > a.umb-options { - visibility: hidden; - flex: 0 0 auto; - margin-left: auto; -} - -.umb-tree div:hover > a.umb-options { - visibility: visible; -} - -.umb-tree li.root > div a, -.umb-tree li.root h5, .umb-tree-header { - color: @gray-2; - font-weight: bold; - font-size: 15px; -} - -.umb-tree ins { - margin: -4px 0 0 -16px; - width: 16px; - height: 16px; - visibility: hidden; - text-decoration: none; - font-size: 12px; - transition: opacity 120ms ease; -} - -.umb-tree ins:hover { - opacity: .7; -} - -.umb-tree li:hover ins { - visibility: visible; - cursor: pointer -} - -.umb-tree li div { - padding: 0; -} - -.umb-tree li > div a:not(.umb-options) { - padding: 6px 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - flex: 1 0 auto; -} - -.umb-tree li > div:hover a:not(.umb-options) { - overflow: hidden; - margin-right: 6px; -} - -.umb-tree .icon { - vertical-align: middle; - margin: 0 13px 0 0; - color: @gray-1; - font-size: 20px; -} - -.umb-tree-icon { - cursor: pointer; -} - -.umb-tree i.noSpr { - display: inline-block; - margin-top: 1px; - width: 16px; - height: 16px; - line-height: 16px; -} - -.umb-tree div:hover { - background: @gray-10; -} - -.umb-tree small.search-subtitle{ - color: @gray-7; - display: block; - padding-left: 35px; -} - -.umb-tree .umb-tree-node-search { - cursor:pointer; - /*color:@turquoise;*/ -} - -.umb-tree div.umb-search-group { - position: inherit; - display: inherit; -} - -.umb-tree div.umb-search-group:hover { - background: inherit; -} -.umb-tree div.umb-search-group h6 { - /*color: @gray-5;*/ - padding: 10px 0 10px 20px; - font-weight: inherit; - background: @gray-10; - font-size: 14px; - font-weight: bold; -} - -.umb-tree .umb-search-group-item { - padding-left: 20px; -} - -.umb-tree .umb-search-group-item-link { - display: flex; - flex-wrap: wrap; - flex-direction: column; - font-weight: normal !important; -} - -.icon-check:before { - content: "\e165"; -} - -.umb-tree .umb-tree-node-checked i[class^="icon-"], -.umb-tree .umb-tree-node-checked i[class*=" icon-"] { - font-family: 'icomoon' !important; - color:@green !important; -} -.umb-tree .umb-tree-node-checked i:before { - /*check box*/ - content: "\e165" !important; - font-family: inherit; -} - -a.umb-options { - visibility: hidden; - display: flex; - justify-content: flex-end; - padding: 9px 5px; - text-align: center; - cursor: pointer; - margin-right: 10px; -} - -a.umb-options i { - height: 5px !important; - width: 5px !important; - border-radius: 20px; - background: @black; - display: inline-block; - margin: 0 2px 0 0; -} - -a.umb-options i:last-child { - margin: 0; -} - -a.umb-options:hover { - background: @btnBackgroundHighlight; - .border-radius(@baseBorderRadius); -} - -li.root > div > a.umb-options { - top: 18px; - display: flex; - padding: 10px 5px; -} - -.hide-options a.umb-options{display: none !important} -.hide-header h5{display: none !important} - - -.umb-icon-item { - padding: 2px; - padding-left: 55px; - display: block; - position: relative; -} - -.umb-icon-item:hover { - background: @gray-10; -} -.umb-icon-item i.icon { - position: absolute; - top: 8px; - left: 19px; -} -.umb-icon-item a:hover div { - text-decoration: underline; -} - -.umb-icon-item a { - color: @gray-3; - padding-top: 3px; - height: 15px; - font-size: 12px; - text-decoration: none; -} -.umb-icon-item small { - color: @gray-6; - font-size: 10px; - display: block -} -.umb-icon-item:hover a.umb-options { - visibility: visible -} -.umb-icon-item .umb-spr { - float: left -} - - - -// Tree item states -// ------------------------- -div.not-published > i.icon,div.not-published > a{ - opacity: 0.6; -} -div.protected:before{ - content:"\e256"; - font-family: 'icomoon'; - color: @red; - position: absolute; - font-size: 20px; - padding-left: 7px; - padding-top: 7px; - bottom: 0; -} - -div.has-unpublished-version:before{ - content:"\e25a"; - font-family: 'icomoon'; - color: @green; - position: absolute; - font-size: 20px; - padding-left: 7px; - padding-top: 7px; - bottom: 0; -} - -div.not-allowed > i.icon,div.not-allowed > a{ - cursor: not-allowed; -} - -// override small icon color -.umb-tree li.current > div:before { - color: @turquoise-l2; -} -div.is-container:before{ - content:"\e04e"; - font-family: 'icomoon'; - color: @turquoise; - position: absolute; - font-size: 8px; - padding-left: 13px; - padding-top: 8px; - pointer-events: none; - bottom: 0; -} - -div.locked:before{ - content:"\e0a7"; - font-family: 'icomoon'; - color: @red; - position: absolute; - font-size: 20px; - padding-left: 7px; - padding-top: 7px; - bottom: 0; -} - -.umb-tree li div.no-access .umb-tree-icon, -.umb-tree li div.no-access .root-link, -.umb-tree li div.no-access .umb-tree-item__label { - color: @gray-7; - cursor: not-allowed; -} - -// Tree context menu -// ------------------------- -.umb-actions { - margin: 0; - padding: 0px; - list-style: none; - user-select: none; -} - -.umb-actions li.sep { - display: block; - border-top: 1px solid @gray-9; -} - -.umb-actions li.sep:first-child { - border-top: none; -} - -.umb-actions a { - white-space: nowrap; - display: block; - font-size: 15px; - color: @black; - padding: 9px 25px 9px 20px; - text-decoration: none; - cursor: pointer; - display: flex; - align-items: center; -} - -.umb-actions a:hover, .umb-actions a:focus, -.umb-actions li.selected { - color: @black !important; - background: @gray-10 !important; -} - -.umb-actions .menu-label { - display: inline-block; - vertical-align: middle; - padding-left: 15px; -} - -.umb-actions i { - color: @gray-6; - font-size: 18px; - vertical-align: middle; - color: @gray-3; -} - -.umb-actions-child { - list-style: none; - display: block; - margin: 0px; -} - -.umb-actions-child li { - display: block; -} - -.umb-actions-child a { - display: block; - clear: both; - text-decoration: none; - padding-left: 10px; -} -.umb-actions-child li .menu-label { - font-size: 14px; - color: @black; - margin-left: 10px; -} - -.umb-actions-child li .menu-label small { - font-size: 12px; - display: block; - clear: right; - line-height: 14px; - color: @gray-6; - white-space: normal; - margin-top: 2px; -} -.umb-actions-child li a:hover .menuLabel small { - text-decoration: none !important -} -.umb-actions-child i { - font-size: 30px; - min-width: 30px; - text-align: center; - line-height: 24px; /* set line-height to ensure all icons use same line-height */ -} - -.umb-actions-child li.add { - margin-top: 20px; - border-top: 1px solid @gray-8; - padding-top: 20px; -} -.umb-actions-child li.add i { - opacity: 0.4; -} - - -// Tree icon colors -// ------------------------- - -.umb-tree i.icon.blue { - color: @blue; -} -.umb-tree i.icon.green { - color: @green; -} -.umb-tree i.icon.purple { - color: @purple; -} -.umb-tree i.icon.orange { - color: @orange; -} -.umb-tree i.icon.red { - color: @red; -} - - - - -// Loading Animation -// ------------------------ - -.umb-tree li div.l{ - width:100%; - height:1px; - overflow:hidden; - position: absolute; - left: 0; - bottom: 0; -} - -.umb-tree li div.l div { - .umb-loader; -} - -//loader defaults -.umb-tree .umb-loader{ - height: 10px; margin: 10px 10px 10px 10px; -} - - -/*body.touch .umb-tree .icon{font-size: 19px;}*/ -body.touch .umb-tree ins{font-size: 14px; visibility: visible; padding: 7px;} -body.touch .umb-tree li > div { - padding-top: 8px; - padding-bottom: 8px; - font-size: 110%; -} - -// change height of this if touch devices should have a different height of preloader. -body.touch .umb-tree li div.l div { - padding: 0; -} - -body.touch .umb-actions a { - padding: 7px 25px 7px 20px; - font-size: 110%; -} diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-contextmenu.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-contextmenu.html index 0bb4b1ed2e..32dd57ade3 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-contextmenu.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-contextmenu.html @@ -5,8 +5,8 @@