Commit 7bbb4178 authored by Andreas Fernandez's avatar Andreas Fernandez Committed by Susanne Moog
Browse files

[TASK] The Number of The Workspace

This change ports EXT:workspace to Bootstrap and jQuery.

The workspace interface is simplified now, similar actions are tied together:
- The record history is now part of ``getRowDetails()`` to get rid of the extra
  button and popup.
- The "Send to stage" buttons are now also in the record information modal
  as separate buttons.

The JavaScript has some wrapper methods to simplify the remaining
ExtDirect calls.

ExtDirectServer::getDifferenceHandler() now instantiates the DiffUtility and
does not use the internal diff library directly anymore.

Resolves: #74359
Releases: master
Change-Id: Id706ae8a886f05aafeb402cdc2352068f1021dbe
Reviewed-on: https://review.typo3.org/46573


Reviewed-by: Oliver Hader's avatarOliver Hader <oliver.hader@typo3.org>
Tested-by: Oliver Hader's avatarOliver Hader <oliver.hader@typo3.org>
Reviewed-by: default avatarSusanne Moog <typo3@susannemoog.de>
Tested-by: default avatarSusanne Moog <typo3@susannemoog.de>
parent 58abab50
......@@ -39,6 +39,7 @@ module.exports = function(grunt) {
install : '<%= paths.sysext %>install/Resources/',
linkvalidator : '<%= paths.sysext %>linkvalidator/Resources/',
backend : '<%= paths.sysext %>backend/Resources/',
workspaces: '<%= paths.sysext %>workspaces/Resources/',
core : '<%= paths.sysext %>core/Resources/',
flags : 'bower_components/region-flags/svg/',
t3icons : 'bower_components/wmdbsystems-typo3-icons/dist/'
......@@ -77,6 +78,11 @@ module.exports = function(grunt) {
files: {
"<%= paths.linkvalidator %>Public/Css/linkvalidator.css": "<%= paths.less %>linkvalidator.less"
}
},
workspaces: {
files: {
"<%= paths.workspaces %>Public/Css/preview.css": "<%= paths.workspaces %>Private/Less/preview.less"
}
}
},
postcss: {
......@@ -109,6 +115,9 @@ module.exports = function(grunt) {
},
linkvalidator: {
src: '<%= paths.linkvalidator %>Public/Css/*.css'
},
workspaces: {
src: '<%= paths.workspaces %>Public/Css/*.css'
}
},
watch: {
......
ul.x-tab-strip.x-tab-strip-top {
margin-bottom: 0;
margin-top: 0;
padding-left: 0;
}
ul.x-tab-strip.x-tab-strip-top li.last {
float: right;
}
span.item-state-modified {
color: #f78f25;
}
span.item-state-moved {
color: #457fb8;
}
span.item-state-new {
color: #3c9934;
}
span.item-state-hidden {
color: #abaaaa;
}
span.item-state-deleted {
color: #000000;
text-decoration: line-through;
}
.legend {
margin: 5px;
height: 18px;
color: #888888;
}
.legend dd, .legend dt {
display: inline;
overflow: hidden;
}
.legend dd span {
display: inline-block;
padding: 4px 4px;
}
.x-toolbar {
background:none !important;
}
.x-grid3 {
background: none !important;
}
.x-grid3-row-expanded {
background-color: #ececec;
}
.x-grid3-row-selected {
color: #4D4D4D;
}
#typo3-mod-php div.typo3-noDoc {
margin: 0px 0px;
}
#typo3-mod-php div.typo3-noDoc #typo3-docbody {
padding: 0px 0px;
top: 0px;
}
.icon-hidden {
display: none;
visibility: hidden;
}
div.x-grid3-row img.x-action-col-icon {
display:none;
}
#workspace-panel {
tr.collapsing {
transition: none;
}
tr.collapse {
display: none;
div.x-grid3-row-over img.x-action-col-icon,
div.x-grid3-row img.x-action-col-icon.t3-visible {
display:inline-block;
&.in {
display: table-row;
}
}
}
div.t3-workspaces-foldoutWrapper {
padding: 10px;
margin-left: 40px;
background-color: #FFFFFF;
background-image: linear-gradient(center top, #ececec 0px, #f7f7f7 200px);
background-repeat: repeat-x;
color: #606060;
}
.x-grid3-row-selected div.t3-workspaces-foldoutWrapper {
background-image: linear-gradient(center top, #dedede 0px, #f7f7f7 200px);
background-repeat: repeat-x;
}
div.t3-workspaces-foldoutWrapper table {
border-collapse: collapse;
width: 100%;
}
div.t3-workspaces-foldoutWrapper tr.header {
background-color: #B5B5B5;
background-image: linear-gradient(center top, #7f7f7f 10%, #5b5b5b 100%);
background-repeat: repeat-x;
}
div.t3-workspaces-foldoutWrapper tr.header th {
padding: 4px 8px;
color: #FFFFFF;
line-height: 15px;
}
span.item-state- {
&modified {
color: #f78f25;
}
.t3-workspaces-foldout-subheaderLeft,
.t3-workspaces-foldout-subheaderRight {
padding: 15px 0 10px 0;
margin: 10px;
}
.t3-workspaces-foldout-td-contentDiffLeft .t3-workspaces-foldout-contentDiff-container,
.t3-workspaces-foldout-td-contentDiffRight .t3-workspaces-foldout-contentDiff-container {
padding-top: 10px;
border-top: 1px solid #cdcdcd;
}
.x-grid3-row .t3-workspaces-foldout-td-contentDiffLeft,
.x-grid3-row .t3-workspaces-foldout-subheaderLeft {
padding-right: 10px;
}
.x-grid3-row .t3-workspaces-foldout-td-contentDiffRight,
.x-grid3-row .t3-workspaces-foldout-subheaderRight {
padding-left: 10px;
}
.x-grid3-row .t3-workspaces-foldout-subheaderLeft .t3-workspaces-foldout-subheader-container {
padding-bottom: 10px;
border-bottom: 1px solid #cdcdcd;
}
table.t3-workspaces-foldout-contentDiff {
padding: 8px 8px;
table-layout: auto;
background-color: #ffffff;
}
table.t3-workspaces-foldout-contentDiff th {
padding: 8px 0 8px 8px;
width: 80px;
}
table.t3-workspaces-foldout-contentDiff td {
padding: 8px 8px 8px 0;
line-height: 1.3em;
}
table.t3-workspaces-foldout-contentDiff .diff-r {
text-decoration: line-through;
}
.t3-workspaces-foldout-contentDiff .content ins > img {
padding: 1px;
margin-right: 2px;
border: 2px solid green;
}
.t3-workspaces-foldout-contentDiff .content del > img {
padding: 1px;
margin-right: 2px;
border: 2px solid red;
}
div.t3-workspaces-foldoutWrapper td.char_select_profile_stats {
padding-right: 10px;
}
div.t3-workspaces-comments {
background-color: #dedede;
padding: 10px 10px 10px 10px;
}
div.t3-workspaces-comments-singleComment {
overflow: hidden;
margin-bottom: 10px;
position: relative;
}
div.t3-workspaces-comments-singleComment:last-child {
margin: 0;
}
div .t3-workspaces-comments-singleComment-author {
width: 60px;
margin: 10px 0;
position: absolute;
left: 0px;
top: 0px;
font-weight: bold;
overflow: hidden;
}
div .t3-workspaces-comments-singleComment-content-wrapper {
background: url(../Images/workspaces-comments-arrow.gif) left 10px no-repeat;
margin-left: 70px;
}
div .t3-workspaces-comments-singleComment-content-date {
font-size: 10px;
}
div .t3-workspaces-comments-singleComment-content {
background-color: #ffffff;
padding: 10px 10px;
margin-left: 10px;
}
div .t3-workspaces-comments-singleComment-content-title {
padding: 8px 0 8px 0;
font-weight: bold;
}
.typo3-workspaces-row-disabled .x-grid3-td-checker {
visibility: hidden;
}
div.x-grid3-row img.t3-icon-extensions-workspaces {
display: inline-block !important;
width: 17px;
visibility: hidden;
}
div.x-grid3-row-over img.t3-icon-extensions-workspaces {
visibility: visible;
}
img.t3-icon-workspaces-sendtonextstage {
background: url(../Images/version-workspace-sendtonextstage.png) no-repeat;
}
&moved {
color: #457fb8;
}
img.t3-icon-workspaces-sendtoprevstage {
background: url(../Images/version-workspace-sendtoprevstage.png) no-repeat;
}
&new {
color: #3c9934;
}
table.t3-workspaces-foldout-contentDiff td.content {
word-break: break-all;
}
&hidden {
color: #abaaaa;
}
.typo3-workspaces-collection-level-node,
.typo3-workspaces-collection-level-leaf,
.typo3-workspaces-collection-level-none {
float: left;
width: 18px;
&deleted {
color: #000000;
text-decoration: line-through;
}
}
.x-grid3-row-expander {
background-position: left top;
float: left;
}
.x-grid3-row-collapsed .x-grid3-row-expander {
background-position: left top;
background-image: url('../Images/zoom_in.png');
}
.x-grid3-row-expanded .x-grid3-row-expander {
background-position: left top;
background-image: url('../Images/zoom_out.png');
}
.typo3-workspaces-collection-child-collapsed {
display: none;
}
.typo3-workspaces-collection-child-expanded {
display: block;
}
.typo3-workspaces-collection-level-node {
width: 18px;
.legend {
margin: 5px;
height: 18px;
background-position: 4px 2px;
background-color: transparent;
background-repeat: no-repeat;
background-image: url('../../../../t3skin/extjs/images/grid/row-expand-sprite.png');
}
.typo3-workspaces-collection-parent-collapsed .typo3-workspaces-collection-level-node {
background-position: 4px 2px;
}
.typo3-workspaces-collection-parent-expanded .typo3-workspaces-collection-level-node {
background-position: -21px 2px;
}
.x-menu.typo3-workspaces-menu {
background-image: none;
}
.x-menu.typo3-workspaces-menu a.x-menu-item {
padding: 3px 14px;
}
.x-tab-menu-right {
background: #dadada;
border-color: #adadad;
border-style: solid;
border-width: 1px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #666666;
background-position: center 6px;
padding: 4px;
background-image: url('../Images/menu.png');
background-repeat: no-repeat;
width: 16px;
position: absolute;
right: 0;
top: 0;
z-index: 10;
cursor:pointer;
}
.t3-workspaces-foldoutWrapper .char_select_profile_titleLeft .icon,
.t3-workspaces-foldoutWrapper .char_select_profile_titleRight .icon{
float: left;
}
color: #888888;
.t3-workspaces-foldoutWrapper .t3-workspaces-foldout-contentDiff {
text-align: left;
dd,
dt {
display: inline;
overflow: hidden;
}
dd {
span {
display: inline-block;
padding: 4px 4px;
}
}
}
......@@ -12621,13 +12621,14 @@ iframe {
background-position: -80px -224px;
border-width: 0;
}
ul.x-tab-strip.x-tab-strip-top {
margin-bottom: 0;
margin-top: 0;
padding-left: 0;
#workspace-panel tr.collapsing {
transition: none;
}
ul.x-tab-strip.x-tab-strip-top li.last {
float: right;
#workspace-panel tr.collapse {
display: none;
}
#workspace-panel tr.collapse.in {
display: table-row;
}
span.item-state-modified {
color: #f78f25;
......@@ -12659,240 +12660,6 @@ span.item-state-deleted {
display: inline-block;
padding: 4px 4px;
}
.x-toolbar {
background: none !important;
}
.x-grid3 {
background: none !important;
}
.x-grid3-row-expanded {
background-color: #ececec;
}
.x-grid3-row-selected {
color: #4D4D4D;
}
#typo3-mod-php div.typo3-noDoc {
margin: 0px 0px;
}
#typo3-mod-php div.typo3-noDoc #typo3-docbody {
padding: 0px 0px;
top: 0px;
}
.icon-hidden {
display: none;
visibility: hidden;
}
div.x-grid3-row img.x-action-col-icon {
display: none;
}
div.x-grid3-row-over img.x-action-col-icon,
div.x-grid3-row img.x-action-col-icon.t3-visible {
display: inline-block;
}
div.t3-workspaces-foldoutWrapper {
padding: 10px;
margin-left: 40px;
background-color: #FFFFFF;
background-image: linear-gradient(center top, #ececec 0px, #f7f7f7 200px);
background-repeat: repeat-x;
color: #606060;
}
.x-grid3-row-selected div.t3-workspaces-foldoutWrapper {
background-image: linear-gradient(center top, #dedede 0px, #f7f7f7 200px);
background-repeat: repeat-x;
}
div.t3-workspaces-foldoutWrapper table {
border-collapse: collapse;
width: 100%;
}
div.t3-workspaces-foldoutWrapper tr.header {
background-color: #B5B5B5;
background-image: linear-gradient(center top, #7f7f7f 10%, #5b5b5b 100%);
background-repeat: repeat-x;
}
div.t3-workspaces-foldoutWrapper tr.header th {
padding: 4px 8px;
color: #FFFFFF;
line-height: 15px;
}
.t3-workspaces-foldout-subheaderLeft,
.t3-workspaces-foldout-subheaderRight {
padding: 15px 0 10px 0;
margin: 10px;
}
.t3-workspaces-foldout-td-contentDiffLeft .t3-workspaces-foldout-contentDiff-container,
.t3-workspaces-foldout-td-contentDiffRight .t3-workspaces-foldout-contentDiff-container {
padding-top: 10px;
border-top: 1px solid #cdcdcd;
}
.x-grid3-row .t3-workspaces-foldout-td-contentDiffLeft,
.x-grid3-row .t3-workspaces-foldout-subheaderLeft {
padding-right: 10px;
}
.x-grid3-row .t3-workspaces-foldout-td-contentDiffRight,
.x-grid3-row .t3-workspaces-foldout-subheaderRight {
padding-left: 10px;
}
.x-grid3-row .t3-workspaces-foldout-subheaderLeft .t3-workspaces-foldout-subheader-container {
padding-bottom: 10px;
border-bottom: 1px solid #cdcdcd;
}
table.t3-workspaces-foldout-contentDiff {
padding: 8px 8px;
table-layout: auto;
background-color: #ffffff;
}
table.t3-workspaces-foldout-contentDiff th {
padding: 8px 0 8px 8px;
width: 80px;
}
table.t3-workspaces-foldout-contentDiff td {
padding: 8px 8px 8px 0;
line-height: 1.3em;
}
table.t3-workspaces-foldout-contentDiff .diff-r {
text-decoration: line-through;
}
.t3-workspaces-foldout-contentDiff .content ins > img {
padding: 1px;
margin-right: 2px;
border: 2px solid green;
}
.t3-workspaces-foldout-contentDiff .content del > img {
padding: 1px;
margin-right: 2px;
border: 2px solid red;
}
div.t3-workspaces-foldoutWrapper td.char_select_profile_stats {
padding-right: 10px;
}
div.t3-workspaces-comments {
background-color: #dedede;
padding: 10px 10px 10px 10px;
}
div.t3-workspaces-comments-singleComment {
overflow: hidden;
margin-bottom: 10px;
position: relative;
}
div.t3-workspaces-comments-singleComment:last-child {
margin: 0;
}
div .t3-workspaces-comments-singleComment-author {
width: 60px;
margin: 10px 0;
position: absolute;
left: 0px;
top: 0px;
font-weight: bold;
overflow: hidden;
}
div .t3-workspaces-comments-singleComment-content-wrapper {
background: url(../Images/workspaces-comments-arrow.gif) left 10px no-repeat;
margin-left: 70px;
}
div .t3-workspaces-comments-singleComment-content-date {
font-size: 10px;
}
div .t3-workspaces-comments-singleComment-content {
background-color: #ffffff;
padding: 10px 10px;
margin-left: 10px;
}
div .t3-workspaces-comments-singleComment-content-title {
padding: 8px 0 8px 0;
font-weight: bold;
}
.typo3-workspaces-row-disabled .x-grid3-td-checker {
visibility: hidden;
}
div.x-grid3-row img.t3-icon-extensions-workspaces {
display: inline-block !important;
width: 17px;
visibility: hidden;
}
div.x-grid3-row-over img.t3-icon-extensions-workspaces {
visibility: visible;
}
img.t3-icon-workspaces-sendtonextstage {
background: url(../Images/version-workspace-sendtonextstage.png) no-repeat;
}
img.t3-icon-workspaces-sendtoprevstage {
background: url(../Images/version-workspace-sendtoprevstage.png) no-repeat;
}
table.t3-workspaces-foldout-contentDiff td.content {
word-break: break-all;
}
.typo3-workspaces-collection-level-node,
.typo3-workspaces-collection-level-leaf,
.typo3-workspaces-collection-level-none {
float: left;
width: 18px;
}
.x-grid3-row-expander {
background-position: left top;
float: left;
}
.x-grid3-row-collapsed .x-grid3-row-expander {
background-position: left top;
background-image: url('../Images/zoom_in.png');
}
.x-grid3-row-expanded .x-grid3-row-expander {
background-position: left top;
background-image: url('../Images/zoom_out.png');
}
.typo3-workspaces-collection-child-collapsed {
display: none;
}
.typo3-workspaces-collection-child-expanded {
display: block;
}
.typo3-workspaces-collection-level-node {
width: 18px;
height: 18px;
background-position: 4px 2px;
background-color: transparent;
background-repeat: no-repeat;
background-image: url('../../../../t3skin/extjs/images/grid/row-expand-sprite.png');
}
.typo3-workspaces-collection-parent-collapsed .typo3-workspaces-collection-level-node {
background-position: 4px 2px;
}
.typo3-workspaces-collection-parent-expanded .typo3-workspaces-collection-level-node {
background-position: -21px 2px;
}
.x-menu.typo3-workspaces-menu {
background-image: none;
}
.x-menu.typo3-workspaces-menu a.x-menu-item {
padding: 3px 14px;
}
.x-tab-menu-right {
background: #dadada;
border-color: #adadad;
border-style: solid;
border-width: 1px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #666666;
background-position: center 6px;
padding: 4px;
background-image: url('../Images/menu.png');
background-repeat: no-repeat;
width: 16px;
position: absolute;
right: 0;
top: 0;