card 1.95.1 → 1.95.2

data/mod/machines/lib/stylesheets/style_jquery_ui_smoothness.css

@@ -578,7 +578,7 @@ a.ui-button:active,
 .ui-button:active,
 .ui-button.ui-state-active:hover {
 	border: 1px solid #aaaaaa;
-	background: #ffffff url("images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;
+	background: #ffffff url("assets/machines/jquery_ui_smoothness/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;
 	font-weight: normal;
 	color: #212121;
 }
@@ -600,7 +600,7 @@ a.ui-button:active,
 .ui-widget-content .ui-state-highlight,
 .ui-widget-header .ui-state-highlight {
 	border: 1px solid #fcefa1;
-	background: #fbf9ee url("images/ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x;
+	background: #fbf9ee url("assets/machines/jquery_ui_smoothness/ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x;
 	color: #363636;
 }
 .ui-state-checked {
@@ -616,7 +616,7 @@ a.ui-button:active,
 .ui-widget-content .ui-state-error,
 .ui-widget-header .ui-state-error {
 	border: 1px solid #cd0a0a;
-	background: #fef1ec url("images/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x;
+	background: #fef1ec url("assets/machines/jquery_ui_smoothness/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x;
 	color: #cd0a0a;
 }
 .ui-state-error a,
@@ -662,31 +662,31 @@ a.ui-button:active,
 }
 .ui-icon,
 .ui-widget-content .ui-icon {
-	background-image: url("images/ui-icons_222222_256x240.png");
+	background-image: url("assets/machines/jquery_ui_smoothness/ui-icons_222222_256x240.png");
 }
 .ui-widget-header .ui-icon {
-	background-image: url("images/ui-icons_222222_256x240.png");
+	background-image: url("assets/machines/jquery_ui_smoothness/ui-icons_222222_256x240.png");
 }
 .ui-state-hover .ui-icon,
 .ui-state-focus .ui-icon,
 .ui-button:hover .ui-icon,
 .ui-button:focus .ui-icon {
-	background-image: url("images/ui-icons_454545_256x240.png");
+	background-image: url("assets/machines/jquery_ui_smoothness/ui-icons_454545_256x240.png");
 }
 .ui-state-active .ui-icon,
 .ui-button:active .ui-icon {
-	background-image: url("images/ui-icons_454545_256x240.png");
+	background-image: url("assets/machines/jquery_ui_smoothness/ui-icons_454545_256x240.png");
 }
 .ui-state-highlight .ui-icon,
 .ui-button .ui-state-highlight.ui-icon {
-	background-image: url("images/ui-icons_2e83ff_256x240.png");
+	background-image: url("assets/machines/jquery_ui_smoothness/ui-icons_2e83ff_256x240.png");
 }
 .ui-state-error .ui-icon,
 .ui-state-error-text .ui-icon {
-	background-image: url("images/ui-icons_cd0a0a_256x240.png");
+	background-image: url("assets/machines/jquery_ui_smoothness/ui-icons_cd0a0a_256x240.png");
 }
 .ui-button .ui-icon {
-	background-image: url("images/ui-icons_888888_256x240.png");
+	background-image: url("assets/machines/jquery_ui_smoothness/ui-icons_888888_256x240.png");
 }
 
 /* positioning */

data/mod/machines/spec/set/type/scss_spec.rb

@@ -15,18 +15,14 @@ RSpec.describe Card::Set::Type::Scss do
     SCSS
   end
   let(:compressed_changed_css) { "a{color:#fedcba}\n" }
-
-  before do
-    @scss_card = Card[:style_cards]
-  end
+  let(:scss_card) { Card[:style_right_sidebar] }
 
   it "highlights code in html" do
-    assert_view_select @scss_card.format(:html).render_core,
-                       "div[class=CodeRay]"
+    assert_view_select scss_card.format(:html).render_core, "div[class=CodeRay]"
   end
 
   it "does not highlight code in css" do
-    expect(@scss_card.format(:css).render_core).not_to match(/CodeRay/)
+    expect(scss_card.format(:css).render_core).not_to match(/CodeRay/)
   end
 
   it_behaves_like "machine input"  do
@@ -40,8 +36,8 @@ RSpec.describe Card::Set::Type::Scss do
       Card.gimme! "style with scss+*style", type: :pointer
     end
     let(:card_content) do
-      { in:           scss,         out:     compressed_css,
-        changed_in:   changed_scss, changed_out: compressed_changed_css }
+      { in:         scss,         out:     compressed_css,
+        changed_in: changed_scss, changed_out: compressed_changed_css }
     end
   end
 
@@ -54,8 +50,8 @@ RSpec.describe Card::Set::Type::Scss do
   it_behaves_like "content machine", that_produces: :css do
     let(:machine_card) { Card.gimme! "test scss", type: :scss, content: scss }
     let(:card_content) do
-      { in:           scss,         out:     compressed_css,
-        changed_in:   changed_scss, changed_out: compressed_changed_css }
+      { in:         scss,         out:     compressed_css,
+        changed_in: changed_scss, changed_out: compressed_changed_css }
     end
   end
 end

data/mod/prosemirror_editor/db/migrate_core_cards/{20160804112547_add_prosemirror_cards.rb → 20160804112548_add_prosemirror_cards.rb}

@@ -11,17 +11,20 @@ class AddProsemirrorCards < Card::Migration
     ensure_card name: "*ProseMirror", type_id: Card::PlainTextID,
                 codename: "prose_mirror",
                 content: PM_CONFIG
-    create_or_update(
-      name: "*ProseMirror+*self+*help",
-      content: "Configure [[http://prosemirror.net|ProseMirror]], "\
-               "Wagn's default "\
-               "[[http://en.wikipedia.org/wiki/Wysiwyg|wysiwyg]] editor. "\
-               "[[http://wagn.org/ProseMirror|more]]"
-    )
+    create_or_update name: "*ProseMirrorz+*self+*help", content: pm_help
     ensure_card name: "script: prosemirror", type_id: Card::JavaScriptID,
                 codename: "script_prosemirror"
+    ensure_card name: "style: prosemirror", type_id: Card::ScssID,
+                codename: "style_prosemirror"
     ensure_card name: "script: prosemirror config",
                 type_id: Card::CoffeeScriptID,
                 codename: "script_prosemirror_config"
   end
+
+  def pm_help
+    "Configure [[http://prosemirror.net|ProseMirror]], "\
+    "Decko's default "\
+    "[[http://en.wikipedia.org/wiki/Wysiwyg|wysiwyg]] editor. "\
+    "[[http://wagn.org/ProseMirror|more]]"
+  end
 end

data/mod/prosemirror_editor/lib/stylesheets/style_prosemirror.scss

@@ -0,0 +1,298 @@
+/*-- ProseMirror color variables */
+
+$pm-yellow-1: #cc7;
+$pm-yellow-2: #ffc;
+$pm-grey-1: $gray-200;
+$pm-grey-2: $gray-300;
+$pm-grey-3: $gray-400;
+$pm-grey-5: $gray-600;
+$pm-cyan: $cyan;
+
+.ProseMirror {
+  position: relative;
+}
+
+.ProseMirror {
+  white-space: pre-wrap;
+}
+
+.ProseMirror ul, .ProseMirror ol {
+  padding-left: 30px;
+  cursor: default;
+}
+
+.ProseMirror blockquote {
+  padding-left: 1em;
+  border-left: 3px solid $gray-300;
+  margin-left: 0; margin-right: 0;
+}
+
+.ProseMirror pre {
+  white-space: pre-wrap;
+}
+
+.ProseMirror li {
+  position: relative;
+  pointer-events: none; /* Don't do weird stuff with marker clicks */
+}
+.ProseMirror li > * {
+  pointer-events: auto;
+}
+
+.ProseMirror-nodeselection *::selection, .ProseMirror-widget *::selection { background: transparent; }
+.ProseMirror-nodeselection *::-moz-selection, .ProseMirror-widget *::-moz-selection { background: transparent; }
+
+.ProseMirror-selectednode {
+  outline: 2px solid $pm-cyan;
+}
+
+/* Make sure li selections wrap around markers */
+
+li.ProseMirror-selectednode {
+  outline: none;
+}
+
+li.ProseMirror-selectednode:after {
+  content: "";
+  position: absolute;
+  left: -32px;
+  right: -2px; top: -2px; bottom: -2px;
+  border: 2px solid $pm-cyan;
+  pointer-events: none;
+}
+
+
+.ProseMirror-textblock-dropdown {
+  min-width: 3em;
+}
+
+.ProseMirror-menu {
+  margin: 0 -4px;
+  line-height: 1;
+}
+
+.ProseMirror-tooltip .ProseMirror-menu {
+  width: -webkit-fit-content;
+  width: fit-content;
+  white-space: pre;
+}
+
+.ProseMirror-menuitem {
+  margin-right: 3px;
+  display: inline-block;
+}
+
+.ProseMirror-menuseparator {
+  border-right: 1px solid $pm-grey-3;
+  margin-right: 3px;
+}
+
+.ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-menu {
+  font-size: 90%;
+  white-space: nowrap;
+}
+
+.ProseMirror-menu-dropdown {
+  vertical-align: 1px;
+  cursor: pointer;
+}
+
+.ProseMirror-menu-dropdown-wrap {
+  padding: 1px 14px 1px 4px;
+  display: inline-block;
+  position: relative;
+}
+
+.ProseMirror-menu-dropdown:after {
+  content: "";
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid currentColor;
+  opacity: .6;
+  position: absolute;
+  right: 2px;
+  top: calc(50% - 2px);
+}
+
+.ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu {
+  position: absolute;
+  background: white;
+  color: $pm-grey-5;
+  border: 1px solid #aaa;
+  padding: 2px;
+}
+
+.ProseMirror-menu-dropdown-menu {
+  z-index: 15;
+  min-width: 6em;
+}
+
+.ProseMirror-menu-dropdown-item {
+  cursor: pointer;
+  padding: 2px 8px 2px 4px;
+}
+
+.ProseMirror-menu-dropdown-item:hover {
+  background: $pm-grey-1;
+}
+
+.ProseMirror-menu-submenu-wrap {
+  position: relative;
+  margin-right: -4px;
+}
+
+.ProseMirror-menu-submenu-label:after {
+  content: "";
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 4px solid currentColor;
+  opacity: .6;
+  position: absolute;
+  right: 4px;
+  top: calc(50% - 4px);
+}
+
+.ProseMirror-menu-submenu {
+  display: none;
+  min-width: 4em;
+  left: 100%;
+  top: -3px;
+}
+
+.ProseMirror-menu-active {
+  background: $pm-grey-2;
+  border-radius: 4px;
+}
+
+.ProseMirror-menu-active {
+  background: $pm-grey-2;
+  border-radius: 4px;
+}
+
+.ProseMirror-menu-disabled {
+  opacity: .3;
+}
+
+.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu, .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu {
+  display: block;
+}
+
+.ProseMirror-menubar {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+  position: relative;
+  min-height: 1em;
+  color: $pm-grey-5;
+  padding: 1px 6px;
+  top: 0; left: 0; right: 0;
+  border-bottom: 1px solid silver;
+  background: white;
+  z-index: 10;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+.ProseMirror-icon {
+  display: inline-block;
+  line-height: .8;
+  vertical-align: -2px; /* Compensate for padding */
+  padding: 2px 8px;
+  cursor: pointer;
+}
+
+.ProseMirror-icon svg {
+  fill: currentColor;
+  height: 1em;
+}
+
+.ProseMirror-icon span {
+  vertical-align: text-top;
+}
+
+
+
+/* Add space around the hr to make clicking it easier */
+
+.ProseMirror-example-setup-style hr {
+  position: relative;
+  height: 6px;
+  border: none;
+}
+
+.ProseMirror-example-setup-style hr:after {
+  content: "";
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  top: 2px;
+  border-top: 2px solid silver;
+}
+
+.ProseMirror-example-setup-style img {
+  cursor: default;
+}
+
+.ProseMirror-example-setup-style table {
+  border-collapse: collapse;
+}
+
+.ProseMirror-example-setup-style td {
+  vertical-align: top;
+  border: 1px solid $pm-grey-3;
+  padding: 3px 5px;
+}
+
+.ProseMirror-prompt {
+  background: white;
+  padding: 5px 10px 5px 15px;
+  border: 1px solid silver;
+  position: fixed;
+  border-radius: 3px;
+  z-index: 11;
+  box-shadow: -.5px 2px 5px rgba(0, 0, 0, .2);
+}
+
+.ProseMirror-prompt h5 {
+  margin: 0;
+  font-weight: normal;
+  font-size: 100%;
+  color: #444;
+}
+
+.ProseMirror-prompt input[type="text"],
+.ProseMirror-prompt textarea {
+  background: $pm-grey-2;
+  border: none;
+  outline: none;
+}
+
+.ProseMirror-prompt input[type="text"] {
+  padding: 0 4px;
+}
+
+.ProseMirror-prompt-close {
+  position: absolute;
+  left: 2px; top: 1px;
+  color: $pm-grey-5;
+  border: none; background: transparent; padding: 0;
+}
+
+.ProseMirror-prompt-close:after {
+  content: "✕";
+  font-size: 12px;
+}
+
+.ProseMirror-invalid {
+  background: $pm-yellow-2;
+  border: 1px solid $pm-yellow-1;
+  border-radius: 4px;
+  padding: 5px 10px;
+  position: absolute;
+  min-width: 10em;
+}
+
+.ProseMirror-prompt-buttons {
+  margin-top: 5px;
+  display: none;
+}