#184 more fun with quickedit

mortendk · Oct 5, 2017 · 7762bb0 · 7762bb0
1 parent 38364d2
commit 7762bb0
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 70 deletions.
diff --git a/elevenfeat/elevenfeat.libraries.yml b/elevenfeat/elevenfeat.libraries.yml
@@ -42,7 +42,7 @@ feat.outside_in:
 
 feat.quickedit:
   css:
-    module:
+    component:
       templates/quickedit/quickedit.module.css: {}
     theme:
       templates/quickedit/quickedit.css: {}

diff --git a/elevenfeat/templates/contextual/contextual.css b/elevenfeat/templates/contextual/contextual.css
@@ -1,7 +1,7 @@
 /* debug */
-.contextual .contextual-links[hidden] {
+/*.contextual .contextual-links[hidden] {
   display: block !important;
-}
+}*/
 
 .contextual {
   position: absolute;

diff --git a/elevenfeat/templates/quickedit/quickedit.css b/elevenfeat/templates/quickedit/quickedit.css
@@ -15,9 +15,8 @@ Lets start by resetting what can come out from the frontend theme
 /*
 Quickedit
 */
-
 .quickedit-form {
-  background-color: var(--white-90);
+  background-color: var(--black-80);
   width: 100%;
   padding: 0.5rem;
   color: var(--gravel-light);
@@ -26,10 +25,6 @@ Quickedit
   border: 1px solid var(--asphalt);
 }
 
-/*this field can be edited*/
-.quickedit-field {}
-
-/*.quickedit-candidate shows all the elements that can be edited*/
 .quickedit-candidate {
   background-color: var(--bluesky-light-20);
   border-bottom: 1px solid var(--bluesky-light);
@@ -49,46 +44,22 @@ Quickedit
 
 /* indicator of the elements that we can quick edit*/
 .quickedit-field {
-  border: 1px solid transparent;
-  background: linear-gradient(white, white) padding-box,
-  repeating-linear-gradient(-45deg, #333 0, #333 25%, white 0, white 50%) 0 / 0.5rem 0.5rem;
+  outline: 1px dashed var(--bluesky);
+  /*border: 1px solid transparent;*/
+  /*background: linear-gradient(white, white) padding-box,
+  repeating-linear-gradient(-45deg, red 0, Gainsboro 25%, Gainsboro 0, white 50%) 0 / 0.5rem 0.5rem;*/
 }
 .quickedit-field:hover{
-  animation: thisIsHowYouGetAnts 50s linear infinite;
+  /*animation: thisIsHowYouGetAnts 50s linear infinite;*/
+  background-color: var(--bluesky-light-light-light)
 }
-/*.quickedit-candidate {
-  border: 1px solid transparent;
-  background: linear-gradient(white, white) padding-box,
-  repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0 / 0.5rem 0.5rem;
-  animation: thisIsHowYouGetAnts 50s linear infinite;
-
-}*/
-@keyframes thisIsHowYouGetAnts {
+/*@keyframes thisIsHowYouGetAnts {
   to {
     background-position: 100%;
   }
 }
-
-
-
-.quickedit-editable { }
-.quickedit-entity-active:focus a{ }
-a:hover .quickedit-editable{ }
-.quickedit-editing{ }
-
-
-.quickedit-editable:focus{
-}
-.quickedit-highlighted{
-}
-.quickedit-changed {
-}
-.quickedit-validation-error {
-
-}
-.quickedit-editing.quickedit-editor-is-popup {
-
-}
-.quickedit-form .form-item .error {
-
+*/
+.quickedit-highlighted {
+  color: var(--bluesky);
+  background-color: var(--bluesky-light)
 }
diff --git a/elevenfeat/templates/quickedit/quickedit.module.css b/elevenfeat/templates/quickedit/quickedit.module.css
@@ -10,21 +10,10 @@ original: core/modules/quickedit/css/quickedit.module.css
   position: relative;
   cursor: pointer;
 }
-
-/**
- * Highlighted (hovered) editable.
- */
 .quickedit-editable.quickedit-highlighted {
   z-index: 99;
 }
-.quickedit-validation-errors > .messages {
-}
-.quickedit-validation-errors > .messages > ul {
-}
 
-/**
- * In-place editors that don't use a popup.
- */
 .quickedit-validation-errors {
   z-index: 300;
   position: relative;
@@ -33,10 +22,6 @@ original: core/modules/quickedit/css/quickedit.module.css
   position: absolute;
 }
 
-/**
- * Styling specific to the 'form' in-place editor.
- */
-
 #quickedit_backstage {
   display: none;
 }
@@ -51,15 +36,9 @@ original: core/modules/quickedit/css/quickedit.module.css
 /**
  * Default form styling overrides.
  */
-.quickedit-form .form-wrapper .form-wrapper {
-  /*margin: inherit;*/
-}
 .quickedit-form .form-actions {
   display: none;
 }
-.quickedit-form input {
-  /*max-width: 100%;*/
-}
 
 /**
  * Entity toolbar.

diff --git a/elevenfeat/templates/quickedit/quickedit.toolbar.css b/elevenfeat/templates/quickedit/quickedit.toolbar.css
@@ -6,13 +6,17 @@
   /*right: auto !important;*/
   /*left: 10% !important*/
 }
-
+.quickedit-toolbar-pointer {
+  margin-left: -5rem
+}
 .quickedit-toolbar-content {
-  background-color: var(--black-80);
-  padding: 0.5rem;
+  background-color: var(--white-80);
+  border: 1px solid var(--gravel);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
   font-size: 16px;
   color: var(--white);
+  min-width: 40rem;
+
 }
 
 /* Save + Close */
@@ -21,7 +25,7 @@
 
 /* Label name  hide that we dont need it */
 .quickedit-toolbar-label {
-  display: none;
+  /*display: none;*/
 }
 .quickedit-toolbar-label .field { }
 
@@ -32,7 +36,7 @@ Buttons
 .quickedit-button{
   border: none;
   border-radius: 0;
-  height: 2rem;
+  height: 1rem;
   text-shadow: none;
   width: 1rem;
   height: 1rem;