disco_app 0.10.5 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d2699aebc167db360768aa4fa911174c22af550d15d9d3193d7748ce6a4dddf3
-  data.tar.gz: d11b08a1f24ffb3a64d306f03dd84132297c20ea9c51ba86c73f5f5450b4fa33
+  metadata.gz: 893a4010d6048ec000968116ee29259c28743a5489626f7077f7264c36e1bafd
+  data.tar.gz: caf568c938697a64e4d8b0edc2affd1acf68eb1a44f1901b632c97b7ede4fa1a
 SHA512:
-  metadata.gz: 79865fb4cb2da60159930b27830937634e40f10749866fafc27a5fd47af56fcb4343a199d93416df7edd398441b860e0531831a14d167078b8468729ad10e382
-  data.tar.gz: 9edcce2afda59c4a59d850d9018b84ac645941dc1d330bc1ff1075b22c7c0324d9fdd249ae4b7ea9452b959d3f8c1cfb36d3b311c5f63e6b196e7395c395d24c
+  metadata.gz: ff59d830f2aed98994285e32b41597ae5cd150ac2deebc00fb0fcb481d80806e16688aa1b4a5f02e31aaab1acf3f9565ebc5bf32e77a230089b31a19c77110e2
+  data.tar.gz: b9652c159dc3342ed3e12421b4c2ec580e1525d545f56ceeb4466eae6dac9ecce4ecbf480cfa331f3ffb0e17ea29e5e50d5b67aaf1fad7ba1d41ea7b00552603

data/app/assets/components/disco_app/buttons/model-destroy-button.es6.jsx

@@ -0,0 +1,31 @@
+const ModelDestroyButton = ({ label, modelName, modelUrl, modelsUrl }) => {
+
+  const openModal = () => {
+    ShopifyApp.Modal.confirm({
+      title: 'Delete ' + modelName + '?',
+      message: 'Are you sure you want to delete this ' + modelName + '?',
+      okButton: 'Delete ' + modelName,
+      cancelButton: 'Cancel',
+      style: 'danger'
+    }, handleModalResult);
+  };
+
+  const handleModalResult = (result) => {
+    if(result) {
+      $.ajax({
+        url: modelUrl,
+        method: 'DELETE',
+        contentType: 'application/json',
+        dataType: 'json',
+        success: function() {
+          window.location.href = modelsUrl;
+        }
+      });
+    }
+  };
+
+  return (
+    <Button destroy={true} onClick={openModal}>{label}</Button>
+  );
+
+};

data/app/assets/components/disco_app/forms/model-form.es6.jsx

@@ -0,0 +1,64 @@
+class ModelForm extends BaseForm {
+
+  render() {
+    const { modelTitle, modelName, modelUrl, modelsUrl, children, authenticityToken } = this.props;
+    const errors = this.renderErrors();
+
+    return(
+      <form action={modelUrl ? modelUrl : modelsUrl} acceptCharset="UTF-8" method="POST" data-shopify-app-submit="ea.save">
+        <input type="hidden" name="utf8" value="✓"/>
+        <input type="hidden" name="_method" value={modelUrl ? 'patch' : 'post'} />
+        <input type="hidden" name="authenticity_token" value={authenticityToken}/>
+
+        {(() => {
+          if (!errors) return false;
+          return (
+            {errors}
+          );
+        })()}
+
+        {children}
+
+        <ModelFormEmbeddedAppBar modelTitle={modelTitle} modelsUrl={modelsUrl} />
+        <ModelFormPageActions modelName={modelName} modelUrl={modelUrl} modelsUrl={modelsUrl} />
+      </form>
+    )
+  }
+}
+
+const ModelFormEmbeddedAppBar = ({ modelTitle, modelsUrl }) => {
+  const buttons = {
+    primary: {
+      label: "Save",
+      message: "ea.save"
+    },
+    secondary: [{
+      label: "Cancel",
+      href: modelsUrl
+    }]
+  };
+
+  return (
+    <EmbeddedAppBar title={modelTitle} buttons={buttons} />
+  );
+};
+
+const ModelFormPageActions = ({ modelName, modelUrl, modelsUrl }) => {
+  const primary = [
+    <a href={modelsUrl} className="btn">Cancel</a>,
+    <Button type="submit" primary={true}>{'Save' + (modelUrl ? '' : ' ' + modelName)}</Button>
+  ];
+
+  const secondary = modelUrl ? [
+    <ModelDestroyButton
+      label={'Delete ' + modelName}
+      modelName={modelName}
+      modelUrl={modelUrl}
+      modelsUrl={modelsUrl}
+    />
+  ] : [];
+
+  return (
+    <UIPageActions primary={primary} secondary={secondary} />
+  );
+};

data/app/assets/components/embedded_app/bar.es6.jsx

@@ -0,0 +1,31 @@
+class EmbeddedAppBar extends React.Component {
+
+  componentDidMount() {
+    const { title, icon, buttons, breadcrumb } = this.props;
+    ShopifyApp.Bar.initialize({
+      title: title || DiscoApp.INITIAL_TITLE,
+      icon: icon || DiscoApp.INITIAL_ICON,
+      buttons: buttons,
+      breadcrumb: breadcrumb
+    });
+  }
+
+  render() {
+    return null;
+  }
+
+}
+
+EmbeddedAppBar.propTypes = {
+  title: React.PropTypes.string,
+  icon: React.PropTypes.string,
+  buttons: React.PropTypes.object,
+  breadcrumbs: React.PropTypes.object
+};
+
+EmbeddedAppBar.defaultProps = {
+  title: undefined,
+  icon: undefined,
+  buttons: {},
+  breadcrumbs: undefined
+};

data/app/assets/components/shopify/buttons/_buttons.scss

@@ -0,0 +1,546 @@
+.btn {
+  color: rgba(0,0,0,0.9);
+  font-size: 1.14286rem;
+  line-height: 1.71429rem;
+  font-weight: 400;
+  text-transform: initial;
+  letter-spacing: initial;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.14286rem;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  padding: 9px 15px;
+  margin: 0;
+  border-radius: 3px;
+  height: auto;
+  white-space: nowrap;
+  text-transform: none;
+  font-family: inherit;
+  font-weight: normal;
+  position: relative;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.btn-default, .btn {
+  background-color: #ffffff;
+  color: #0078bd;
+  border: 1px solid #d3dbe2;
+}
+
+.btn-default:hover, .btn:hover, .btn-default:focus, .btn:focus, .btn-default.focus, .focus.btn, .btn-default:active, .btn:active, .btn-default.active, .active.btn {
+  border: 1px solid #d3dbe2;
+  background-color: #f5f6f7;
+  color: #0078bd;
+  text-decoration: none;
+}
+
+.btn-default:active, .btn:active, .btn-default.active, .active.btn, .btn-default.rte-command-active, .rte-command-active.btn {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1) inset;
+  background: #f5f6f7;
+}
+
+.btn-primary {
+  background-color: #0078bd;
+  color: #ffffff;
+  border: 1px solid #0078bd;
+}
+
+.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active {
+  border: 1px solid #0069a6;
+  background-color: #0069a6;
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.btn-primary:active, .btn-primary.active, .btn-primary.rte-command-active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset;
+  background: #0069a6;
+}
+
+.btn-destroy {
+  background-color: #ffffff;
+  color: #0078bd;
+  border: 1px solid #d3dbe2;
+}
+
+.btn-destroy:hover, .btn-destroy:focus, .btn-destroy.focus, .btn-destroy:active, .btn-destroy.active {
+  border: 1px solid #d3dbe2;
+  background-color: #ff5d5d;
+  color: #0078bd;
+  text-decoration: none;
+}
+
+.btn-destroy:active, .btn-destroy.active, .btn-destroy.rte-command-active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset;
+  background: #ff5d5d;
+}
+
+.btn-destroy-no-hover {
+  background-color: #ff5d5d;
+  color: #ffffff;
+  border: 1px solid #ff5d5d;
+}
+
+.btn-destroy-no-hover:hover, .btn-destroy-no-hover:focus, .btn-destroy-no-hover.focus, .btn-destroy-no-hover:active, .btn-destroy-no-hover.active {
+  border: 1px solid #d83e3e;
+  background-color: #d83e3e;
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.btn-destroy-no-hover:active, .btn-destroy-no-hover.active, .btn-destroy-no-hover.rte-command-active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset;
+  background: #d83e3e;
+}
+
+.btn-disabled {
+  background-color: #fafbfc;
+  color: #c3cfd8;
+  border: 1px solid #d3dbe2;
+}
+
+.btn-disabled:hover, .btn-disabled:focus, .btn-disabled.focus, .btn-disabled:active, .btn-disabled.active {
+  border: 1px solid #d3dbe2;
+  background-color: #fafbfc;
+  color: #c3cfd8;
+  text-decoration: none;
+}
+
+.btn-disabled:active, .btn-disabled.active, .btn-disabled.rte-command-active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1) inset;
+  background: #fafbfc;
+}
+
+.btn-purchase {
+  background-color: #96bf48;
+  color: #ffffff;
+  border: 1px solid #96bf48;
+}
+
+.btn-purchase:hover, .btn-purchase:focus, .btn-purchase.focus, .btn-purchase:active, .btn-purchase.active {
+  border: 1px solid #7ba232;
+  background-color: #7ba232;
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.btn-purchase:active, .btn-purchase.active, .btn-purchase.rte-command-active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset;
+  background: #7ba232;
+}
+
+.btn--facebook {
+  background-color: #3b5998;
+  color: #ffffff;
+  border: 1px solid #3b5998;
+}
+
+.btn--facebook:hover, .btn--facebook:focus, .btn--facebook.focus, .btn--facebook:active, .btn--facebook.active {
+  border: 1px solid #344e86;
+  background-color: #344e86;
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.btn--facebook:active, .btn--facebook.active, .btn--facebook.rte-command-active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset;
+  background: #344e86;
+}
+
+.btn--twitter {
+  background-color: #55acee;
+  color: #ffffff;
+  border: 1px solid #55acee;
+}
+
+.btn--twitter:hover, .btn--twitter:focus, .btn--twitter.focus, .btn--twitter:active, .btn--twitter.active {
+  border: 1px solid #3ea1ec;
+  background-color: #3ea1ec;
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.btn--twitter:active, .btn--twitter.active, .btn--twitter.rte-command-active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset;
+  background: #3ea1ec;
+}
+
+.btn-warning {
+  background-color: transparent;
+  color: #6f4f0c;
+  border: 1px solid #6f4f0c;
+}
+
+.btn-warning:hover, .btn-warning:focus, .btn-warning.focus, .btn-warning:active, .btn-warning.active {
+  border: 1px solid #6f4f0c;
+  background-color: rgba(111, 79, 12, 0.1);
+  color: #6f4f0c;
+  text-decoration: none;
+}
+
+.btn-warning:active, .btn-warning.active, .btn-warning.rte-command-active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset;
+  background: rgba(111, 79, 12, 0.1);
+}
+
+.btn--outline {
+  background-color: transparent;
+  color: #31373d;
+  border: 1px solid #31373d;
+}
+
+.btn--outline:hover, .btn--outline:focus, .btn--outline.focus, .btn--outline:active, .btn--outline.active {
+  border: 1px solid #31373d;
+  background-color: rgba(49, 55, 61, 0.1);
+  color: #31373d;
+  text-decoration: none;
+}
+
+.btn--outline:active, .btn--outline.active, .btn--outline.rte-command-active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset;
+  background: rgba(49, 55, 61, 0.1);
+}
+
+.btn.has-loading::before {
+  background-position: 50% 50% !important;
+  background-repeat: no-repeat !important;
+  content: "";
+  display: none;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.btn:not(.btn-disabled).is-loading, .btn:not(.btn-disabled).is-loading:hover {
+  border: 1px solid #d3dbe2;
+  cursor: default;
+  color: transparent;
+  text-shadow: none;
+}
+
+.btn:not(.btn-disabled).is-loading::before, .btn:not(.btn-disabled).is-loading:hover::before {
+  display: block;
+}
+
+.btn:disabled {
+  cursor: default;
+}
+
+.btn::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+.btn .next-icon {
+  margin-top: -13px;
+  margin-bottom: -13px;
+}
+
+.btn .ico {
+  vertical-align: middle;
+  margin-top: -17px;
+  margin-bottom: -13px;
+}
+
+.btn.attached-to-right {
+  border-radius: 0 3px 3px 0;
+  position: relative;
+  left: -2px;
+}
+
+.btn-large {
+  font-size: 16px;
+  padding: 13px 30px;
+  margin: 15px 0;
+}
+
+.btn-slim {
+  padding: 6.5px 10px;
+}
+
+.btn-extra-slim {
+  font-size: 11px;
+  padding: 3.5px 6px;
+}
+
+.btn.btn--full-width {
+  width: 100%;
+  line-height: 1.3;
+  white-space: normal;
+  padding: 13px 15px;
+}
+
+.btn-destroy:hover, .btn-destroy:focus, .btn-destroy:active {
+  border: 1px solid #ff5d5d;
+  color: #ffffff;
+}
+
+.btn-disabled.btn-disabled,
+input[type="submit"].btn-disabled,
+.btn.disabled {
+  cursor: default;
+  box-shadow: none;
+  background: #fafbfc;
+  color: #c3cfd8;
+  border: 1px solid #d3dbe2;
+}
+
+.btn-disabled.btn-disabled.btn--outline,
+input[type="submit"].btn-disabled.btn--outline,
+.btn.disabled.btn--outline {
+  background: transparent;
+  color: #95a7b7;
+  border-color: #95a7b7;
+}
+
+.btn-more::before {
+  content: "•••";
+  text-indent: 0;
+  display: block;
+  font-size: 13px;
+}
+
+.btn-skip {
+  z-index: 226;
+  border-radius: 0;
+  left: 0;
+  min-width: 240px;
+  padding: 20px 0 !important;
+  text-align: center;
+  top: 0;
+}
+
+.btn--icon {
+  padding-left: 9px;
+  padding-right: 9px;
+}
+
+.btn--icon.btn-large {
+  padding-left: 13px;
+  padding-right: 13px;
+}
+
+.btn--icon.btn-slim {
+  padding-left: 7px;
+  padding-right: 7px;
+}
+
+.btn--icon--tiny {
+  padding: 1px;
+}
+
+.btn--plain,
+.btn--link {
+  background-color: transparent !important;
+  border: none;
+  cursor: pointer;
+  color: #0078bd;
+  text-decoration: none;
+  vertical-align: initial;
+}
+
+.btn--plain:hover, .btn--plain:focus, .btn--plain:active,
+.btn--link:hover,
+.btn--link:focus,
+.btn--link:active {
+  background: transparent;
+  box-shadow: none;
+  border: none;
+}
+
+.btn--plain:hover,
+.btn--link:hover {
+  color: #0069a6;
+  text-decoration: underline;
+}
+
+.btn--link {
+  height: auto;
+  padding: 0;
+  line-height: 18px;
+  white-space: normal;
+  text-align: left;
+}
+
+.btn--plain--flush-right {
+  margin-right: -15px;
+}
+
+.btn--link.btn-disabled,
+.btn--plain.btn-disabled {
+  border: none;
+  color: #c3cfd8;
+}
+
+.btn--link.btn-disabled:hover, .btn--link.btn-disabled:active, .btn--link.btn-disabled:focus,
+.btn--plain.btn-disabled:hover,
+.btn--plain.btn-disabled:active,
+.btn--plain.btn-disabled:focus {
+  text-decoration: none;
+}
+
+.segmented {
+  padding: 0;
+  line-height: 22px;
+  font-size: 0;
+  margin: 0;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.segmented > li {
+  position: relative;
+}
+
+.segmented > li .btn {
+  display: inline-block;
+  position: static;
+  border-radius: 0px 0px 0px 0px;
+  border-left-width: 0 !important;
+}
+
+.segmented > li .btn.btn-primary {
+  border: 1px solid #0078bd;
+  border-right-color: #3e89b5;
+}
+
+.segmented > li {
+  list-style-type: none;
+  display: inline-block;
+  margin: 0;
+}
+
+.segmented > li:first-child .btn, .segmented > li.first-child .btn {
+  border-radius: 3px 0px 0px 3px;
+  border-left-width: 1px !important;
+}
+
+.segmented > li:last-child .btn {
+  border-radius: 0px 3px 3px 0px;
+}
+
+.segmented > li:last-child .btn.btn-primary {
+  border-right-color: #0078bd;
+}
+
+.segmented > li.middle-child > .btn {
+  border-radius: 0px;
+}
+
+.segmented > li:only-child > .btn, .segmented > li.only-child > .btn {
+  border-radius: 3px 3px 3px 3px;
+  border-left-width: 1px !important;
+}
+
+.segmented .btn.active {
+  color: #c3cfd8;
+}
+
+.segmented .btn.active.btn-primary {
+  color: #ffffff;
+}
+
+.segmented .btn.active:hover {
+  cursor: default;
+}
+
+.buttons {
+  text-align: right;
+  padding: 10px;
+  background: #fafbfc;
+  border-top: 1px solid #d3dbe2;
+  border-bottom: 1px solid #d3dbe2;
+}
+
+.buttons.slim {
+  padding: 5px 10px;
+}
+
+.buttons.slim .btn {
+  padding: 6px 10px;
+}
+
+.buttons.plain {
+  background: none;
+  padding: 13px 0;
+  border-bottom: none;
+  border-top: 1px solid #d3dbe2;
+}
+
+.buttons.connected {
+  background: #fafbfc;
+  border: 1px solid #d3dbe2;
+  border-top: none;
+}
+
+.buttons .text-action {
+  line-height: 32px;
+}
+
+.button-group {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -10px;
+  margin-top: -10px;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.button-group .btn {
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+.button-group .button-group {
+  margin-right: 0;
+}
+
+.button-group--right-aligned {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.btn-separate {
+  margin-left: 5px;
+}
+
+.btn-separate-left {
+  margin-right: 5px;
+}
+
+.btn-separate-top {
+  margin-top: 10px;
+}
+
+.btn--plain, .btn--link {
+  font-size: 14px;
+  background-color: transparent !important;
+  border: none;
+  cursor: pointer;
+  color: #0078bd;
+  text-decoration: none;
+  vertical-align: initial;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}